Che cos'è Iconify e come integrarlo nelle app Vue?

Le migliori applicazioni web sono in realtà una raccolta di testo e immagini. A parte la sensazione estetica che le immagini forniscono a un'app Web, forniscono anche segnali visivi e migliorano l'interesse degli utenti per l'applicazione.

Iconify è un framework di icone che fornisce una vasta raccolta di icone renderizzate in SVG da vari pacchetti di icone, incluse le icone Bootstrap e Material Design. Iconify supporta diversi framework JavaScript front-end che lo rendono una soluzione versatile per l'aggiunta di icone alle tue app web.

Come integrare Iconify nella tua applicazione Vue

Puoi sfruttare Iconify nella tua applicazione Vue con il @iconify/vue pacchetto npm. Questo pacchetto npm è un'integrazione Vue per il framework di icone Iconify.

@iconify/vue fornisce un modo semplice per utilizzare le icone all'interno delle app Vue. Questo pacchetto ti consente di aggiungere e personalizzare rapidamente le icone nel tuo progetto. Installare

@iconify/vue nella tua applicazione Vue, esegui il seguente comando npm nel terminale della directory principale della tua app:

npm install --save-dev @iconify/vue

Questo comando installa il @iconify/vue pacchetto come a dipendenza dallo sviluppo nella tua applicazione Vue.

Questo pacchetto funzionerà solo per le applicazioni Vue 3 di cui hai bisogno per seguire questo articolo. Il pacchetto non supporta le applicazioni Vue 2. Tuttavia, per utilizzare Iconify in Vue 2, esegui il seguente comando npm:

npm install @iconify/vue2

Poiché Vue 2 non sarà più gestito dal 31 dicembre 2023, dovresti imparare a utilizzare Vue 3 e le sue funzionalità. Questo per assicurarti di rimanere aggiornato e pertinente nella community di Vue.

Come aggiungere icone ai tuoi componenti Vue

Puoi aggiungere icone importando il file Icona componente dal pacchetto nei componenti Vue. Per aggiungere icone, incolla il seguente codice nel blocco di script del componente Vue:

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

Dopo questo passaggio, puoi accedere a tutte le icone nella libreria Iconify. Per aggiungere un'icona, vai su Iconifica sito web. Navigando nel sito Web, inserirai il nome dell'icona che ti serve nella tua applicazione.

L'immagine seguente mostra i risultati della ricerca per un'icona di controllo.

È quindi possibile scegliere lo stile dell'icona di controllo di cui si ha bisogno facendo clic sull'icona. Puoi personalizzare ulteriormente le tue icone fornendo il file Colore, Misurare, Flip, E Ruotare campi.

Con questi campi, puoi specificare il colore, le dimensioni, la posizione e l'orientamento richiesti per l'icona. Dopo aver personalizzato la tua icona, ora puoi utilizzare il componente icona nella tua app Vue copiando il codice del componente sulla pagina web.

<template>
<Iconicon="ph: check-fill"color="red"width="500"height="500" />
template>

Il blocco di codice sopra imposta il colore dell'icona su rosso. Specifica inoltre che l'altezza e la larghezza devono essere di 500 pixel ciascuna.

Visualizzando l'anteprima dell'app, otterrai un'immagine simile all'immagine qui sotto:

Sebbene aggiunga icone alla tua applicazione con il @iconify/vue pacchetto è generalmente semplice, occasionalmente può portare a problemi. Alcuni problemi comuni includono problemi di pre-rendering, messaggi di errore nel file Document Object Model (DOM)e Vue non esegue correttamente il rendering del componente.

Questi problemi sorgono a causa della tempistica del processo di montaggio dei componenti in relazione al caricamento delle icone. Puoi risolvere questo problema con il unplugin-icone biblioteca.

Aggiunta di icone con la libreria unplugin-Icons

IL unplugin-icone library offre un modo alternativo e privo di errori per importare e utilizzare le icone direttamente all'interno del modello.

Questo approccio di integrazione delle icone risolve i problemi evidenziati con @iconify/vue, assicurando che Vue includa automaticamente ogni icona che utilizzi nella tua applicazione in bundle.

Per iniziare con il unplugin-icone library, apri il tuo terminale e installa la libreria eseguendo il seguente comando npm:

npm install unplugin-icons

Dopo l'installazione, è necessario configurare il proprio strumento di compilazione. Usi Vue 3 Vite come strumento di costruzione. Vai a vite.config.js e configura il file in modo che appaia esattamente come il blocco di codice qui sotto:

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))
 }
 }
})

Il blocco di codice sopra raffigura il file di configurazione di Vite. Il frammento di codice importa il file Icone plugin da unplugin-icon/vite. Il blocco di codice viene quindi impostato Icone() come plugin nel plugin vettore.

Puoi installare tutti i set di icone per massimizzare la tua scelta di icone. Per installare tutti i set di icone, esegui il seguente comando npm nel terminale della directory della tua app:

npm i -D @iconify/json

Il codice installa tutti i set di icone disponibili per Iconify. La dimensione dell'installazione di questo pacchetto è di circa 200 MB. Puoi anche installare solo un particolare set di icone invece di tutti i set per ridurre le dimensioni del pacchetto:

npm i -D @iconify-json/ph

Lo snippet di codice sopra installa solo le icone dal set di icone Phosphor, che Iconify denota con tel.

Dopo l'installazione, puoi importare il componente icona nella tua app Vue. È necessario importare i nomi delle icone con la convenzione ~icons/{set}/{iconName} per utilizzare le icone nei componenti.

La descrizione della convenzione per importare le icone è la seguente:

• ~icone: Si riferisce al percorso dell'icona.
• { impostato }: si riferisce al set di icone o alla raccolta.
• {iconaNome}: Si riferisce al nome dell'icona nella custodia del kebab.

Ecco un esempio che mostra l'importazione e l'uso del file VerificaRiempi componente icona:

<scriptsetup>
import CheckFill from "~icons/ph/check-fill"
script>
<template>
<CheckFillcolor="red"width="500"height="500" />
template>

Questo frammento di codice mostra come importare i nomi delle icone con la convenzione ~icone/ph/check-fill. Il frammento di codice importa il file VerificaRiempi componente icon dal set di icone Phosphor. Quindi imposta gli attributi di colore, larghezza e altezza del componente dell'icona nel modello Vue.

L'anteprima dell'applicazione dal blocco di codice precedente risulterà nella stessa immagine dell'app vista in precedenza.

Rendi le tue app Vue più accessibili

Iconify è una preziosa libreria per le tue applicazioni Vue in quanto ti consente di integrare facilmente le icone nell'interfaccia della tua app. La vasta libreria di icone di Iconify offre migliori opzioni di personalizzazione per la tua applicazione.

Come sviluppatore Vue, devi rendere le tue applicazioni web accessibili a tutti i tipi di persone. Questo perché persone diverse hanno modi diversi di utilizzare le tue applicazioni, ad esempio persone non vedenti e non udenti. Scopri gli strumenti per rendere le tue app Web facilmente accessibili a queste persone.