O que é Iconify e como integrá-lo em aplicativos Vue?

Os melhores aplicativos da web são realmente uma coleção de texto e imagens. Além da sensação estética que as imagens fornecem a um aplicativo da web, elas também fornecem dicas visuais e aumentam 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. O Iconify oferece suporte a diferentes estruturas JavaScript de 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 @iconify/vue pacote npm. 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 @iconify/vue pacote como um dependência de desenvolvimento em seu aplicativo Vue.

Este pacote funcionará apenas para aplicativos Vue 3, dos quais você precisa acompanhar este artigo. O pacote não suporta 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 a usar o Vue 3 e seus recursos. Isso é para garantir que você fique atualizado e relevante na comunidade Vue.

Como adicionar ícones aos seus componentes Vue

Você pode adicionar ícones importando o Ícone componente do pacote em seus componentes Vue. Para adicionar ícones, cole o seguinte código no bloco de script do componente Vue:

<scriptsetup>
import { Icon } from '@iconify/vue'
script>

Após esta etapa, você pode acessar todos os ícones da biblioteca Iconify. Para adicionar um ícone, vá até o Iconificar local na rede Internet. Ao navegar no site, você inserirá o nome do ícone necessário em seu aplicativo.

A imagem a seguir mostra os resultados da pesquisa para um ícone de verificação.

Você pode escolher o estilo do ícone de verificação necessário clicando no ícone. Você pode personalizar ainda mais seus ícones fornecendo o Cor, Tamanho, Virar, e Girar Campos.

Com esses campos, você pode especificar a cor, o tamanho, a posição e a orientação 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>
<Iconicon="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 de 500 pixels cada.

Visualizando o aplicativo, você obterá uma imagem semelhante à imagem abaixo:

Embora adicionar ícones ao seu aplicativo com o @iconify/vue pacote é geralmente simples, pode ocasionalmente levar a problemas. Alguns problemas comuns incluem problemas de pré-renderização, mensagens de erro no Modelo de objeto de documento (DOM), e o Vue não está renderizando o componente corretamente.

Esses problemas surgem devido ao tempo do processo de montagem do componente em relação ao carregamento dos ícones. Você pode resolver esse problema com o unplugin-ícones biblioteca.

Adicionando ícones com a biblioteca unplugin-Icons

O unplugin-ícones A biblioteca oferece uma maneira alternativa e sem erros de importar e usar ícones diretamente em seu modelo.

Essa abordagem de integração de ícones resolve os problemas destacados com @iconify/vue, garantindo que o Vue incluirá automaticamente cada ícone que você empregar em seu aplicativo integrado.

Para começar com unplugin-ícones library, 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 compilação. Usos do Vue 3 Vite como sua ferramenta de construção. Dirigir a 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/
exportdefault 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 Ícones plug-in de unplugin-icon/vite. O bloco de código então define Ícones() como um plug-in no plugins variedade.

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 da instalação deste pacote é de cerca de 200 MB. Você também pode instalar apenas um determinado conjunto 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 Phosphor, que 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:

• ~ícones: Refere-se ao caminho do ícone.
• { definir }: Refere-se ao conjunto ou coleção de ícones.
• { iconName }: Refere-se ao nome do ícone na caixa do kebab.

Aqui está um exemplo mostrando a importação e uso do CheckFill componente do ícone:

<scriptsetup>
import CheckFill from "~icons/ph/check-fill"
script>
<template>
<CheckFillcolor="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 CheckFill componente de ícone do conjunto de ícones de fósforo. Em seguida, ele define os atributos de cor, largura e altura do componente do ícone no modelo Vue.

A visualização do aplicativo do bloco de código acima resultará na mesma imagem do aplicativo vista anteriormente.

Torne seus aplicativos Vue mais acessíveis

Iconify é uma biblioteca valiosa para seus aplicativos Vue, pois permite que você integre facilmente ícones na 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 seus aplicativos da 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 a essas pessoas.