Como baixar e usar Ionicons: um guia para desenvolvedores da Web
Se você estiver procurando por um pacote de ícones premium e de código aberto para seus aplicativos da Web, iOS, Android ou desktop, talvez queira conferir o Ionicons. Ionicons é uma coleção de mais de 1300 ícones projetados para se adequar a diferentes plataformas e estilos. Neste artigo, mostraremos como baixar e usar Ionicons em seus projetos web.
download ionicons
O que são Ionicons?
Ionicons é uma biblioteca de ícones criada pela equipe do Ionic Framework. O Ionic Framework é uma estrutura híbrida multiplataforma e Progressive Web App que permite criar aplicativos nativos usando tecnologias da web. Ionicons foi feito para Ionic Framework, mas também pode ser usado de forma independente em qualquer projeto web.
Benefícios de usar Ionicons
Alguns dos benefícios de usar Ionicons são:
Eles são gratuitos e de código aberto, licenciados pelo MIT.
Eles são fáceis de instalar e usar, com suporte para formatos de fonte da Web e SVG.
São compatíveis com diferentes plataformas e frameworks, como Angular, React, Vue, Bootstrap, etc.
Eles são personalizáveis, com opções de tamanho, cor, largura do traçado, variantes e especificidade da plataforma.
Eles são atualizados regularmente, com novos ícones adicionados com frequência.
Tipos de Ionicons
Ionicons tem três tipos principais de ícones:
Ícones de aplicativos: São ícones que representam ações ou funcionalidades comuns em um app, como home, configurações, câmera, etc. Eles possuem as versões Material Design e iOS, para dar continuidade à plataforma aos usuários.
Ícones do logotipo: São ícones que representam marcas ou serviços populares, como Facebook, Twitter, Google, etc. Cada um tem apenas uma versão.
Pacote de designer: São ícones projetados por designers profissionais e com curadoria da equipe Ionic. Eles têm um estilo e tema únicos, como animais, comida, esportes, etc. Eles têm apenas uma versão cada.
Como instalar Ionicons
Existem duas maneiras principais de instalar o Ionicons em seu projeto web: usando o componente web ou usando o pacote npm.
Usando o Web Component
O componente da Web é uma maneira fácil e eficiente de usar Ionicons em seu aplicativo. O componente carregará dinamicamente um SVG para cada ícone, para que seu aplicativo solicite apenas os ícones de que você precisa. Observe também que apenas os ícones visíveis são carregados e os ícones que estão ocultos da visualização do usuário não fazem solicitações de busca para o recurso SVG.
Para usar o componente web, você precisa colocar o seguinte <script> perto do final da sua página, logo antes do fechamento </body> marcação:
<script type="module" src=" <script nomodule src="
Se você quiser usar uma versão específica do Ionicons, você pode substituir o @5.5.2 parte com o número da versão que você deseja.
Usando o Pacote NPM
Se você preferir usar o npm para gerenciar suas dependências, também pode instalar o Ionicons como um pacote npm. Para fazer isso, você precisa abrir a pasta do seu projeto e executar o seguinte comando no seu terminal:
npm instalar ionicons
Depois de instalar o pacote, você precisa importar os ícones em seu arquivo JavaScript:
importar addIcons de 'ionicons'; importar logoFacebook, logoTwitter, logoInstagram de 'ionicons/icons'; addIcons( 'logo-facebook': logoFacebook, 'logo-twitter': logoTwitter, 'logo-instagram': logoInstagram );
Você também pode importar todos os ícones de uma vez, mas isso aumentará o tamanho do pacote:
importar addIcons de 'ionicons'; importar * como allIcons de 'ionicons/icons'; addIcons(allIcons);
Como usar Ionicons
Depois de instalar os Ionicons, você pode usá-los em seu HTML usando o <ion-icon> marcação. A etiqueta tem um nome atributo que especifica o ícone que você deseja usar. Por exemplo, para usar o ícone inicial, você pode escrever:
<ion-icon name="home"></ion-icon>
Você também pode usar o origem para especificar um arquivo SVG personalizado para seu ícone. Por exemplo, para usar seu próprio ícone de logotipo, você pode escrever:
<ion-icon src="/path/to/your/logo.svg"></ion-icon>
Uso Básico
Para usar um ícone em seu aplicativo, basta adicionar o <ion-icon> marque com o apropriado nome ou origem atributo.Você pode colocar a tag em qualquer lugar do seu HTML, como dentro de um botão, um item de lista, um cartão, etc. Por exemplo, para criar um botão com um ícone e algum texto, você pode escrever:
<button> <ion-icon name="camera"></ion-icon> Take a photo </button>
O resultado será mais ou menos assim:
Ícones personalizados
Se você quiser usar seus próprios ícones ou ícones de outras fontes, você pode usar o origem atributo para especificar o arquivo SVG para seu ícone. Você também pode usar o <svg> tag diretamente em seu HTML, mas usando o <ion-icon> tag lhe dará alguns benefícios, como espelhamento automático para idiomas RTL e fácil personalização de tamanho e cor.
variantes
Alguns ícones têm diferentes variantes que você pode escolher. Por exemplo, o ícone de seta tem quatro variantes: seta para cima, seta para baixo, seta para frente, e seta para trás. Para usar uma variante, basta adicionar um traço e o nome da variante após o nome do ícone. Por exemplo, para usar o ícone de seta para frente, você pode escrever:
<ion-icon name="arrow-forward"></ion-icon>
O resultado será mais ou menos assim:
Especificidade da plataforma
Alguns ícones possuem versões diferentes para diferentes plataformas, como iOS e Material Design. Por padrão, o Ionicons detectará automaticamente a plataforma do seu aplicativo e usará a versão apropriada do ícone. No entanto, se você deseja forçar uma versão específica do ícone, pode adicionar um prefixo antes do nome do ícone. Por exemplo, para usar a versão iOS do ícone inicial, você pode escrever:
<ion-icon name="ios-home"></ion-icon>
O resultado será mais ou menos assim:
Tamanho
Você pode alterar facilmente o tamanho de um ícone usando o tamanho atributo. O atributo aceita um tamanho predefinido ou um tamanho personalizado em pixels. Os tamanhos predefinidos são: xpequeno, pequeno, médio, grande, e extra grande. Por exemplo, para usar um tamanho grande para o ícone da câmera, você pode escrever:
<ion-icon name="camera" size="large"></ion-icon>
O resultado será mais ou menos assim:
Para usar um tamanho personalizado, você pode especificar o número de pixels no tamanho atributo. Por exemplo, para usar um tamanho de 48px para o ícone do logotipo do Facebook, você pode escrever:
<ion-icon name="logo-facebook" size="48px"></ion-icon>
O resultado será mais ou menos assim:
Cor
Você pode alterar facilmente a cor de um ícone usando o cor atributo. O atributo aceita uma cor predefinida ou uma cor personalizada em formato hex, rgb ou hsl. As cores predefinidas são: primário, secundário, terciário, sucesso, aviso, perigo, luz, médio, e escuro. Por exemplo, para usar uma cor primária para o ícone inicial, você pode escrever:
<ion-icon name="home" color="primary"></ion-icon>
O resultado será mais ou menos assim:
Para usar uma cor personalizada, você pode especificar o valor da cor no cor atributo. Por exemplo, para usar uma cor rosa para o ícone da câmera, você pode escrever:
<ion-icon name="camera" color="#ff69b4"></ion-icon>
O resultado será mais ou menos assim:
Largura do traçado
Você pode alterar facilmente a largura do traço de um ícone usando o largura do traçado atributo. O atributo aceita uma largura de traço predefinida ou uma largura de traço personalizada em pixels. As larguras de traço predefinidas são: afinar, luz, regular, e audacioso. Por exemplo, para usar uma largura de traço fina para o ícone de seta para frente, você pode escrever:
<ion-icon name="arrow-forward" stroke-width="thin"></ion-icon>
O resultado será mais ou menos assim:
Para usar uma largura de traçado personalizada, você pode especificar o número de pixels no largura do traçado atributo. Por exemplo, para usar uma largura de traçado de 3px para o ícone do logotipo do Facebook, você pode escrever:
<ion-icon name="logo-facebook" stroke-width="3px"></ion-icon>
O resultado será mais ou menos assim:
Conclusão
Neste artigo, aprendemos como baixar e usar Ionicons em nossos projetos web. Vimos como instalar Ionicons usando o componente web ou o pacote npm, e como usar Ionicons usando o <ion-icon> marcação. Também exploramos como personalizar Ionicons usando diferentes atributos, como tamanho, cor, largura do traçado, variantes e especificidade da plataforma. Esperamos que este artigo tenha ajudado você a entender e apreciar o poder e a beleza dos Ionicons.
Perguntas Frequentes (FAQ)
P: Onde posso encontrar todos os ícones e seus nomes?
R: Você pode navegar e pesquisar todos os ícones e seus nomes no site oficial do Ionicons:
P: Como posso usar Ionicons em outras plataformas ou estruturas?
R: Você pode usar Ionicons em qualquer plataforma ou estrutura que suporte componentes da web ou ícones SVG. Por exemplo, você pode usar Ionicons em Angular, React, Vue, Bootstrap, etc. Você pode encontrar mais detalhes e exemplos na documentação oficial do Ionicons:
P: Como posso solicitar novos ícones ou relatar problemas com Ionicons?
R: Você pode solicitar novos ícones ou relatar problemas com Ionicons no repositório GitHub de Ionicons: Você também pode participar da comunidade Ionic no Discord, Twitter ou Fórum para obter ajuda e feedback de outros desenvolvedores.
P: Como posso apoiar o desenvolvimento de Ionicons?
R: Você pode apoiar o desenvolvimento do Ionicons tornando-se um patrocinador no GitHub Sponsors ou Open Collective. Você também pode contribuir com o código ou o design do Ionicons enviando solicitações ou sugestões no GitHub.
P: Como posso saber mais sobre o Ionic Framework e seus recursos?
R: Você pode aprender mais sobre o Ionic Framework e seus recursos visitando o site oficial do Ionic Framework: Você também pode encontrar tutoriais, guias, blogs, podcasts e cursos sobre Ionic Framework na Ionic Academy:
0517a86e26
Comments