Sobre o projeto

# Ionicons [Ionicons](http://ionicons.com/) é um conjunto de ícones totalmente de código aberto com 1.300 ícones criados para web, iOS, Android e aplicativos desktop. O Ionicons foi construído para o [Ionic Framework](https://ionicframework.com/), então os ícones têm versões tanto em Material Design quanto em iOS. Nota: Todos os ícones de marcas são marcas registradas de seus respectivos proprietários. O uso dessas marcas não indica endosso do detentor da marca pela Ionic, nem vice-versa. Pretendemos que este pacote de ícones seja usado com o [Ionic](http://ionicframework.com/), mas não está de forma alguma limitado a ele. Use-os onde achar adequado, pessoal ou comercialmente. Eles são gratuitos para uso e licenciados sob [MIT](http://opensource.org/licenses/MIT). ## Contribuindo Obrigado pelo seu interesse em contribuir! Leia nossas diretrizes para [contribuição](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md) e depois veja nossos problemas com o rótulo [help wanted](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22). ## Usando o Componente Web O Componente Web Ionicons é uma maneira fácil e eficiente de usar Ionicons no seu aplicativo. O componente carregará dinamicamente um SVG para cada ícone, então seu aplicativo só solicita os ícones que você precisa. Observe também que apenas ícones visíveis são carregados, e ícones que estão "abaixo da dobra" e ocultos da visão do usuário não fazem solicitações de busca para o recurso svg. ### Instalação Se você está usando o [Ionic Framework](https://ionicframework.com/), o Ionicons é empacotado por padrão, então nenhuma instalação é necessária. Quer usar o Ionicons sem o Ionic Framework? Coloque o seguinte `<script>` perto do final da sua página, logo antes da tag de fechamento `</body>`, para habilitá-los. ```html <script type="module" src="https://esm.sh/ionicons@latest/loader"></script> <script nomodule src="https://esm.sh/ionicons@latest/loader"></script> ``` Você pode substituir `latest` para escolher qualquer versão do Ionicon, por exemplo: ```html <script type="module" src="https://esm.sh/ionicons@8.0.0/loader"></script> <script nomodule src="https://esm.sh/ionicons@8.0.0/loader"></script> ``` ### Uso básico Para usar um ícone integrado do pacote Ionicons, preencha o atributo `name` no componente ion-icon: ```html <ion-icon name="heart"></ion-icon> ``` ### Ícones personalizados Para usar um SVG personalizado, forneça sua url no atributo `src` para solicitar o arquivo SVG externo. O atributo `src` funciona da mesma forma que `<img src="...">` no sentido de que a url deve ser acessível a partir da página web que está fazendo a solicitação da imagem. Além disso, o arquivo externo só pode ser um svg válido e não permite scripts ou eventos dentro do elemento svg. ```html <ion-icon src="/caminho/para/arquivo/externo.svg"></ion-icon> ``` #### Caminho de Ativo Personalizado Se você tem um conjunto diferente de ícones que gostaria de carregar ou se os ícones do Ionicon estão hospedados em uma página ou caminho diferente, você pode definir a url do ativo da qual o Ionicons puxa os ícones via: ```ts import { setAssetPath, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // define o caminho raiz para carregar ícones como "<raiz>/public/svg" setAssetPath(`${window.location.origin}/public/svg/`); // carrega apenas ícones específicos addIcons({ add, logoIonic, save }); ``` Isso permite o uso de ícones nomeados assim: ```html <!-- agora puxa o svg de "<raiz>/public/svg/heart.svg" --> <ion-icon name="heart"></ion-icon> ``` ## Variantes Cada ícone de aplicativo no Ionicons tem uma variante `filled`, `outline` e `sharp`. Essas diferentes variantes são fornecidas para fazer seu aplicativo parecer nativo em uma variedade de plataformas. A variante filled usa o nome padrão sem sufixo. Nota: Ícones de logotipo não têm variantes outline ou sharp. ```html <ion-icon name="heart"></ion-icon> <!--filled--> <ion-icon name="heart-outline"></ion-icon> <!--outline--> <ion-icon name="heart-sharp"></ion-icon> <!--sharp--> ``` ### Especificidade de plataforma Ao usar ícones no Ionic Framework, você pode especificar ícones diferentes por plataforma. Use os atributos `md` e `ios` e forneça o nome do ícone/variante específico da plataforma. ```html <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon> ``` ## Tamanho Para especificar o tamanho do ícone, você pode usar o atributo size para nossos tamanhos de fonte pré-definidos. ```html <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> ``` Ou você pode definir um tamanho específico aplicando a propriedade CSS `font-size` no componente `ion-icon`. É recomendado usar tamanhos de pixel que sejam múltiplos de 8 (8, 16, 32, 64, etc.) ```css ion-icon { font-size: 64px; } ``` ## Cor Especifique a cor do ícone aplicando a propriedade CSS `color` no componente `ion-icon`. ```css ion-icon { color: blue; } ``` ## Largura do traço Ao usar uma variante de ícone `outline`, é possível ajustar a largura do traço, para melhor equilíbrio visual em relação ao tamanho do ícone ou à largura do texto adjacente. Você pode definir um tamanho específico aplicando a propriedade personalizada CSS `--ionicon-stroke-width` ao componente `ion-icon`. O valor padrão é 32px. ```html <ion-icon name="heart-outline"></ion-icon> ``` ```css ion-icon { --ionicon-stroke-width: 16px; } ``` ## Migrando da v4 Veja as [notas de lançamento 5.0](https://github.com/ionic-team/ionicons/releases/tag/5.0.0) para uma lista de exclusões/renomeações de ícones. ## Licença O Ionicons é licenciado sob a [licença MIT](http://opensource.org/licenses/MIT). ## Relacionados * [Página inicial do Ionicons](http://ionicons.com/) * [Ionic Framework](https://ionicframework.com/) * [Ionic Discord](https://ionic.link/discord) * [Fórum Ionic](https://forum.ionicframework.com/) * [Stencil](https://stenciljs.com/) * [Capacitor](https://capacitorjs.com/)