Doriți să vă îmbunătățiți aplicațiile Vue cu pictograme? Aflați cum să integrați fără efort Iconify în aplicația dvs. Vue.
Cele mai bune aplicații web sunt într-adevăr o colecție de text și imagini. Pe lângă sentimentul estetic pe care imaginile îl oferă unei aplicații web, ele oferă, de asemenea, indicii vizuale și îmbunătățesc interesul utilizatorilor pentru aplicație.
Iconify este un cadru de pictograme care oferă o colecție mare de pictograme redate în format SVG din diverse pachete de pictograme, inclusiv pictograme Bootstrap și Material Design. Iconify acceptă diferite cadre JavaScript front-end, ceea ce o face o soluție versatilă pentru adăugarea de pictograme la aplicațiile dvs. web.
Cum să integrezi Iconify în aplicația ta Vue
Puteți utiliza Iconify în aplicația dvs. Vue cu ajutorul @iconify/vue pachet npm. Acest pachet npm este o integrare Vue pentru cadrul de pictograme Iconify.
@iconify/vue oferă o modalitate simplă de a utiliza pictogramele în aplicațiile Vue. Acest pachet vă permite să adăugați și să personalizați rapid pictograme în proiectul dvs. A instala
@iconify/vue în aplicația ta Vue, rulează următoarea comandă npm în terminalul directorului rădăcină al aplicației:npm install --save-dev @iconify/vue
Această comandă instalează @iconify/vue pachet ca a dependenta de dezvoltare în aplicația ta Vue.
Acest pachet va funcționa numai pentru aplicațiile Vue 3 de care aveți nevoie pentru a urma acest articol. Pachetul nu acceptă aplicațiile Vue 2. Cu toate acestea, pentru a utiliza Iconify în Vue 2, rulați următoarea comandă npm:
npm install @iconify/vue2
Deoarece Vue 2 nu va mai fi gestionat din 31 decembrie 2023, ar trebui să învățați cum să utilizați Vue 3 și funcțiile sale. Acest lucru este pentru a vă asigura că rămâneți actualizat și relevant în comunitatea Vue.
Cum să adăugați pictograme la componentele dvs. Vue
Puteți adăuga pictograme importând Pictogramă componentă din pachetul din componentele dumneavoastră Vue. Pentru a adăuga pictograme, lipiți următorul cod în blocul de script al componentei Vue:
<scriptsetup>
import { Icon } from '@iconify/vue'
script>
După acest pas, puteți accesa toate pictogramele din biblioteca Iconify. Pentru a adăuga o pictogramă, mergeți la Iconify site-ul web. La navigarea pe site, veți introduce numele pictogramei de care aveți nevoie în aplicația dvs.
Următoarea imagine vă arată rezultatele căutării pentru o pictogramă de bifă.
Puteți alege apoi stilul pictogramei de verificare de care aveți nevoie făcând clic pe pictogramă. Vă puteți personaliza în continuare pictogramele furnizând Culoare, mărimea, Flip, și Roti câmpuri.
Cu aceste câmpuri, puteți specifica culoarea, dimensiunea, poziția și orientarea necesare pictogramei dvs. După ce v-ați personalizat pictograma, acum puteți utiliza componenta pictogramă în aplicația Vue prin copierea codului componentei pe pagina web.
<template>
<Iconicon="ph: check-fill"color="red"width="500"height="500" />
template>
Blocul de cod de mai sus setează culoarea pictogramei la roșu. De asemenea, specifică înălțimea și lățimea să fie de 500 de pixeli fiecare.
Previzualizarea aplicației, veți obține o imagine similară cu cea de mai jos:
Deși adăugați pictograme la aplicația dvs. cu @iconify/vue pachetul este în general simplu, poate duce ocazional la probleme. Unele probleme obișnuite includ probleme de pre-randare, mesaje de eroare în Document Object Model (DOM), iar Vue nu redă componenta corect.
Aceste probleme apar din cauza timpului procesului de montare a componentelor în raport cu încărcarea pictogramelor. Puteți rezolva această problemă cu pictogramele de deconectare bibliotecă.
Adăugarea de pictograme cu biblioteca de unplugin-icoane
The pictogramele de deconectare biblioteca oferă o modalitate alternativă, fără erori, de a importa și utiliza pictogramele direct în șablonul dvs.
Această abordare de integrare a pictogramelor rezolvă problemele evidențiate cu @iconify/vue, asigurându-vă că Vue va include automat fiecare pictogramă pe care o utilizați în aplicația dvs. inclusă.
Pentru a începe cu pictogramele de deconectare biblioteca, deschideți terminalul și instalați biblioteca rulând următoarea comandă npm:
npm install unplugin-icons
După instalare, trebuie să configurați instrumentul de construcție. Vue 3 utilizări Vite ca instrument de construcție. Îndreptați-vă spre vite.config.js și configurați fișierul să arate exact ca blocul de cod de mai jos:
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))
}
}
})
Blocul de cod de mai sus prezintă fișierul de configurare Vite. Fragmentul de cod importă icoane plugin de la unplugin-icon/vite. Blocul de cod se setează apoi Pictograme() ca un plugin în pluginuri matrice.
Puteți instala toate seturile de pictograme pentru a maximiza alegerea dvs. de pictogramă. Pentru a instala toate seturile de pictograme, rulați următoarea comandă npm în terminalul directorului aplicației dvs.:
npm i -D @iconify/json
Codul instalează toate seturile de pictograme disponibile pentru Iconify. Dimensiunea de instalare a acestui pachet este de aproximativ 200 MB. De asemenea, puteți instala doar un anumit set de pictograme în loc de toate seturile pentru a reduce dimensiunea pachetului:
npm i -D @iconify-json/ph
Fragmentul de cod de mai sus instalează numai pictograme din setul de pictograme Phosphor, pe care Iconify le denotă cu ph.
După instalare, puteți importa componenta pictogramă în aplicația Vue. Trebuie să importați numele pictogramelor cu convenția ~icons/{set}/{iconName} pentru a utiliza pictogramele din componentele dvs.
Descrierea convenției de importare a pictogramelor este următoarea:
- ~icoane: Se referă la calea pictogramei.
- { a stabilit }: Se referă la setul sau colecția de pictograme.
- { iconName }: Se referă la numele pictogramei din carcasa pentru kebab.
Iată un exemplu care arată importul și utilizarea CheckFill componenta pictogramă:
<scriptsetup>
import CheckFill from "~icons/ph/check-fill"
script>
<template>
<CheckFillcolor="red"width="500"height="500" />
template>
Acest fragment de cod demonstrează cum să importați numele pictogramelor cu convenția ~pictograme/ph/check-fill. Fragmentul de cod importă CheckFill componentă pictogramă din setul de pictograme Fosfor. Apoi setează atributele de culoare, lățime și înălțime ale componentei pictograme în șablonul Vue.
Previzualizarea aplicației din blocul de cod de mai sus va avea ca rezultat aceeași imagine a aplicației ca și înainte.
Faceți-vă aplicațiile Vue mai accesibile
Iconify este o bibliotecă valoroasă pentru aplicațiile tale Vue, deoarece vă permite să integrați cu ușurință pictogramele în interfața aplicației. Biblioteca vastă de pictograme a Iconify oferă opțiuni de personalizare mai bune pentru aplicația dvs.
În calitate de dezvoltator Vue, trebuie să vă faceți aplicațiile web accesibile tuturor tipurilor de persoane. Acest lucru se datorează faptului că diferite persoane au moduri diferite în care vă pot folosi aplicațiile, de exemplu, persoanele nevăzătoare și surde. Aflați instrumente pentru a face aplicațiile dvs. web ușor accesibile acestor persoane.
