Želite poboljšati svoje Vue aplikacije ikonama? Naučite kako bez napora integrirati Iconify u svoju Vue aplikaciju.

Najbolje web aplikacije zapravo su zbirka teksta i slika. Osim estetskog osjećaja koji slike pružaju web aplikaciji, one također pružaju vizualne znakove i povećavaju interes korisnika za aplikaciju.

Iconify je okvir ikona koji nudi veliku zbirku SVG-renderiranih ikona iz raznih paketa ikona, uključujući ikone Bootstrap i Material Design. Iconify podržava različite front-end JavaScript okvire što ga čini svestranim rješenjem za dodavanje ikona u vaše web aplikacije.

Kako integrirati Iconify u svoju Vue aplikaciju

Možete iskoristiti Iconify u svojoj Vue aplikaciji s @iconify/vue npm paket. Ovaj npm paket je Vue integracija za okvir ikona Iconify.

@iconify/vue pruža besprijekoran način korištenja ikona unutar Vue aplikacija. Ovaj paket vam omogućuje brzo dodavanje i prilagođavanje ikona u vašem projektu. Instalirati @iconify/vue u svojoj aplikaciji Vue pokrenite sljedeću naredbu npm u terminalu korijenskog direktorija vaše aplikacije:

instagram viewer 
npm install --save-dev @iconify/vue

Ova naredba instalira @iconify/vue paket kao a razvojna ovisnost u vašoj aplikaciji Vue.

Ovaj paket će raditi samo za Vue 3 aplikacije koje su vam potrebne nakon ovog članka. Paket ne podržava Vue 2 aplikacije. Međutim, da biste koristili Iconify u Vue 2, pokrenite sljedeću naredbu npm:

npm install @iconify/vue2

Kako se Vue 2 više neće upravljati od 31. prosinca 2023., trebali biste naučiti kako koristiti Vue 3 i njegove značajke. Ovo je kako bismo osigurali da ostanete u tijeku i relevantni u Vue zajednici.

Kako dodati ikone svojim Vue komponentama

Možete dodati ikone uvozom Ikona komponentu iz paketa u vašim Vue komponentama. Za dodavanje ikona zalijepite sljedeći kod u blok skripte komponente Vue:

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

Nakon ovog koraka možete pristupiti svim ikonama u biblioteci Iconify. Da biste dodali ikonu, idite na Ikonificiraj web stranica. Prilikom navigacije do web stranice, unijet ćete naziv ikone koja vam je potrebna u vašoj aplikaciji.

Sljedeća slika prikazuje rezultate pretraživanja za ikonu kvačice.

Zatim možete odabrati stil ikone provjere koji vam je potreban klikom na ikonu. Svoje ikone možete dodatno prilagoditi pružanjem Boja, Veličina, Preokreni, i Rotirati polja.

Pomoću ovih polja možete odrediti potrebnu boju, veličinu, položaj i orijentaciju ikone. Nakon što ste prilagodili svoju ikonu, sada možete koristiti komponentu ikone u svojoj aplikaciji Vue kopiranjem koda komponente na web stranici.

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

Gornji blok koda postavlja boju ikone na crvenu. Također navodi da visina i širina budu 500 piksela svaka.

Pregledavajući aplikaciju, dobit ćete sliku sličnu slici ispod:

Iako dodavanje ikona vašoj aplikaciji s @iconify/vue paket je općenito jednostavan, povremeno može dovesti do problema. Neki uobičajeni problemi uključuju probleme prije iscrtavanja, poruke o pogrešci u Objektni model dokumenta (DOM), a Vue ne prikazuje komponentu ispravno.

Ovi problemi nastaju zbog vremena procesa montiranja komponente u odnosu na učitavanje ikona. Ovaj problem možete riješiti s unplugin-ikone knjižnica.

Dodavanje ikona pomoću biblioteke ikona unplugin

The unplugin-ikone biblioteka nudi alternativni način bez pogrešaka za uvoz i korištenje ikona izravno unutar vašeg predloška.

Ovaj pristup integracije ikona rješava probleme istaknute s @iconify/vue, osiguravajući da će Vue automatski uključiti svaku ikonu koju koristite u svojoj priloženoj aplikaciji.

Da biste započeli s unplugin-ikone biblioteku, otvorite svoj terminal i instalirajte biblioteku pokretanjem sljedeće naredbe npm:

npm install unplugin-icons

Nakon instalacije morate konfigurirati svoj alat za izgradnju. Vue 3 koristi Vite kao alat za izgradnju. Zaputi se vite.config.js i konfigurirajte datoteku da izgleda točno kao blok koda u nastavku:

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

Gornji blok koda prikazuje Vite konfiguracijsku datoteku. Isječak koda uvozi Ikone dodatak iz unplugin-icon/vite. Blok koda se zatim postavlja Ikone() kao dodatak u dodaci niz.

Možete instalirati sve skupove ikona kako biste povećali svoj izbor ikona. Da biste instalirali sve skupove ikona, pokrenite sljedeću naredbu npm u terminalu direktorija svoje aplikacije:

npm i -D @iconify/json

Kod instalira sve skupove ikona dostupnih Iconifyju. Veličina instalacije ovog paketa je oko 200 MB. Također možete instalirati samo određeni skup ikona umjesto svih skupova kako biste smanjili veličinu paketa:

npm i -D @iconify-json/ph

Gornji isječak koda instalira samo ikone iz skupa ikona Phosphor, što Iconify označava s tel.

Nakon instalacije, možete uvesti komponentu ikone u svoju Vue aplikaciju. Morate uvesti nazive ikona prema konvenciji ~ikone/{set}/{ikona} da biste koristili ikone u svojim komponentama.

Opis konvencije za uvoz ikona je sljedeći:

  • ~ikone: Odnosi se na putanju ikone.
  • { skup }: Odnosi se na skup ili kolekciju ikona.
  • {iconName}: Odnosi se na ime ikone u kutiji za ćevape.

Evo primjera koji prikazuje uvoz i upotrebu Provjerite Ispuni komponenta ikone:

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

Ovaj isječak koda pokazuje kako uvesti nazive ikona prema konvenciji ~ ikone/ph/check-fill. Isječak koda uvozi Provjerite Ispuni komponenta ikone iz skupa ikona Phosphor. Zatim postavlja atribute boje, širine i visine komponente ikone u Vue predlošku.

Pregled aplikacije iz gornjeg bloka koda rezultirat će istom slikom aplikacije kao što je viđena prije.

Učinite svoje Vue aplikacije pristupačnijim

Iconify je vrijedna biblioteka za vaše Vue aplikacije jer vam omogućuje jednostavnu integraciju ikona u sučelje vaše aplikacije. Ogromna biblioteka ikona Iconifyja pruža bolje mogućnosti prilagodbe za vašu aplikaciju.

Kao Vue programer, morate svoje web aplikacije učiniti dostupnima svim vrstama ljudi. To je zato što različiti ljudi imaju različite načine na koje mogu koristiti vaše aplikacije, na primjer, slijepe i gluhe osobe. Naučite alate kako svoje web aplikacije učiniti lako dostupnima tim ljudima.