O que é Iconificar? Como integrá-lo em aplicativos Vue
Quer aprimorar seus aplicativos Vue com ícones? Aprenda como integrar facilmente o Iconify ao seu aplicativo Vue.
Os melhores aplicativos da web são, na verdade, uma coleção de textos e imagens. Além da sensação estética que as imagens proporcionam a um aplicativo da web, elas também fornecem dicas visuais e melhoram o interesse dos usuários pelo aplicativo.
Iconify é uma estrutura de ícones que fornece uma grande coleção de ícones renderizados em SVG de vários pacotes de ícones, incluindo ícones Bootstrap e Material Design. Iconify oferece suporte a diferentes estruturas JavaScript front-end, tornando-o uma solução versátil para adicionar ícones aos seus aplicativos da web.
Como integrar o Iconify em seu aplicativo Vue
Você pode aproveitar o Iconify em seu aplicativo Vue com o pacote npm @iconify/vue. Este pacote npm é uma integração Vue para a estrutura de ícones Iconify.
@iconify/vue fornece uma maneira perfeita de usar ícones em aplicativos Vue. Este pacote permite adicionar e personalizar rapidamente ícones em seu projeto. Para instalar @iconify/vue em seu aplicativo Vue, execute o seguinte comando npm no terminal do diretório raiz do seu aplicativo:
npm install --save-dev @iconify/vue
Este comando instala o pacote @iconify/vue como uma dependência de desenvolvimento em seu aplicativo Vue.
Este pacote funcionará apenas para aplicativos Vue 3 que você precisa para acompanhar este artigo. O pacote não oferece suporte a aplicativos Vue 2. No entanto, para usar o Iconify no Vue 2, execute o seguinte comando npm:
npm install @iconify/vue2
Como o Vue 2 não será mais gerenciado a partir de 31 de dezembro de 2023, você deve aprender como usar o Vue 3 e seus recursos. Isso é para garantir que você se mantenha atualizado e relevante na comunidade Vue.
Como adicionar ícones aos seus componentes Vue
Você pode adicionar ícones importando o componente Icon do pacote em seus componentes Vue. Para adicionar ícones, cole o seguinte código no bloco de script do componente Vue:
<script setup>
import { Icon } from '@iconify/vue'
</script>
Após esta etapa, você pode acessar todos os ícones da biblioteca Iconify. Para adicionar um ícone, acesse o site Iconify. Ao navegar até o site, você inserirá o nome do ícone que necessita em sua aplicação.
A imagem a seguir mostra os resultados da pesquisa para um ícone de verificação.
Você pode então escolher o estilo do ícone de verificação necessário clicando no ícone. Você pode personalizar ainda mais seus ícones fornecendo os campos Cor, Tamanho, Inverter e Girar.
Com esses campos, você pode especificar a cor, tamanho, posição e orientação necessários do seu ícone. Depois de personalizar seu ícone, agora você pode usar o componente de ícone em seu aplicativo Vue copiando o código do componente na página da web.
<template>
<Icon icon="ph:check-fill" color="red" width="500" height="500" />
</template>
O bloco de código acima define a cor do ícone para vermelho. Ele também especifica a altura e a largura em 500 pixels cada.
Visualizando o aplicativo, você obterá uma imagem semelhante à imagem abaixo:
Embora adicionar ícones ao seu aplicativo com o pacote @iconify/vue seja geralmente simples, ocasionalmente pode causar problemas. Alguns problemas comuns incluem problemas de pré-renderização, mensagens de erro no Document Object Model (DOM) e Vue não renderizando o componente corretamente.
Esses problemas surgem devido ao tempo do processo de montagem dos componentes em relação ao carregamento dos ícones. Você pode resolver esse problema com a biblioteca unplugin-icons.
Adicionando ícones com a biblioteca unplugin-Icons
A biblioteca unplugin-icons oferece uma maneira alternativa e sem erros de importar e usar ícones diretamente no seu modelo.
Esta abordagem de integração de ícones resolve os problemas destacados com @iconify/vue, garantindo que o Vue incluirá automaticamente cada ícone que você emprega em seu pacote de aplicativos.
Para começar a usar a biblioteca unplugin-icons, abra seu terminal e instale a biblioteca executando o seguinte comando npm:
npm install unplugin-icons
Após a instalação, você precisa configurar sua ferramenta de construção. Vue 3 usa Vite como ferramenta de construção. Vá para vite.config.js e configure o arquivo para se parecer exatamente com o bloco de código abaixo:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), Icons()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
O bloco de código acima descreve o arquivo de configuração do Vite. O trecho de código importa o plugin Icons de unplugin-icon/vite. O bloco de código então define Icons() como um plugin no array plugins.
Você pode instalar todos os conjuntos de ícones para maximizar sua escolha de ícone. Para instalar todos os conjuntos de ícones, execute o seguinte comando npm no terminal do diretório do seu aplicativo:
npm i -D @iconify/json
O código instala todos os conjuntos de ícones disponíveis para Iconify. O tamanho de instalação deste pacote é de cerca de 200 MB. Você também pode instalar apenas um conjunto específico de ícones em vez de todos os conjuntos para reduzir o tamanho do pacote:
npm i -D @iconify-json/ph
O trecho de código acima instala apenas ícones do conjunto de ícones do Phosphor, que o Iconify denota com ph.
Após a instalação, você pode importar o componente de ícone para seu aplicativo Vue. Você deve importar nomes de ícones com a convenção ~icons/{set}/{iconName} para utilizar os ícones em seus componentes.
A descrição da convenção para importar ícones é a seguinte:
- ~icons: Refere-se ao caminho do ícone.
- { set }: Refere-se ao conjunto ou coleção de ícones.
- { iconName }: Refere-se ao nome do ícone na caixa kebab.
Aqui está um exemplo que mostra a importação e o uso do componente de ícone CheckFill:
<script setup>
import CheckFill from "~icons/ph/check-fill"
</script>
<template>
<CheckFill color="red" width="500" height="500" />
</template>
Este trecho de código demonstra como importar nomes de ícones com a convenção ~icons/ph/check-fill. O trecho de código importa o componente de ícone CheckFill do conjunto de ícones do Phosphor. Em seguida, ele define os atributos de cor, largura e altura do componente do ícone no modelo Vue.
A visualização do aplicativo a partir do bloco de código acima resultará na mesma imagem do aplicativo vista antes.
Torne seus aplicativos Vue mais acessíveis
Iconify é uma biblioteca valiosa para seus aplicativos Vue, pois permite integrar facilmente ícones à interface do seu aplicativo. A vasta biblioteca de ícones do Iconify oferece melhores opções de personalização para seu aplicativo.
Como desenvolvedor Vue, você precisa tornar suas aplicações web acessíveis a todos os tipos de pessoas. Isso ocorre porque pessoas diferentes têm maneiras diferentes de usar seus aplicativos, por exemplo, pessoas cegas e surdas. Aprenda ferramentas para tornar seus aplicativos da web facilmente acessíveis para essas pessoas.