Želite izboljšati svoje aplikacije Vue z ikonami? Naučite se brez truda integrirati Iconify v svojo aplikacijo Vue.

Najboljše spletne aplikacije so v resnici zbirka besedila in slik. Poleg estetskega občutka, ki ga slike dajejo spletni aplikaciji, zagotavljajo tudi vizualne namige in povečujejo zanimanje uporabnikov za aplikacijo.

Iconify je ogrodje ikon, ki ponuja veliko zbirko ikon, upodobljenih v SVG, iz različnih paketov ikon, vključno z ikonami Bootstrap in Material Design. Iconify podpira različna sprednja ogrodja JavaScript, zaradi česar je vsestranska rešitev za dodajanje ikon v vaše spletne aplikacije.

Kako integrirati Iconify v vašo aplikacijo Vue

Iconify lahko uporabite v svoji aplikaciji Vue z @iconify/vue paket npm. Ta paket npm je integracija Vue za ogrodje ikon Iconify.

@iconify/vue zagotavlja brezhiben način uporabe ikon v aplikacijah Vue. Ta paket vam omogoča hitro dodajanje in prilagajanje ikon v vašem projektu. Za namestitev @iconify/vue v aplikaciji Vue zaženite naslednji ukaz npm v terminalu korenskega imenika vaše aplikacije:

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

Ta ukaz namesti @iconify/vue paket kot a razvojna odvisnost v vaši aplikaciji Vue.

Ta paket bo deloval samo za aplikacije Vue 3, ki jih potrebujete za spremljanje tega članka. Paket ne podpira aplikacij Vue 2. Če želite uporabiti Iconify v Vue 2, zaženite naslednji ukaz npm:

npm install @iconify/vue2

Ker Vue 2 od 31. decembra 2023 ne bo več upravljan, se morate naučiti uporabljati Vue 3 in njegove funkcije. To zagotavlja, da ostanete na tekočem in relevantni v skupnosti Vue.

Kako dodati ikone svojim komponentam Vue

Ikone lahko dodate tako, da uvozite Ikona komponento iz paketa v komponentah Vue. Če želite dodati ikone, prilepite to kodo v blok skripta komponente Vue:

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

Po tem koraku lahko dostopate do vseh ikon v knjižnici Iconify. Če želite dodati ikono, pojdite na Iconify Spletna stran. Ko se pomaknete na spletno mesto, boste vnesli ime ikone, ki jo potrebujete v aplikaciji.

Naslednja slika prikazuje rezultate iskanja za ikono kljukice.

Nato lahko izberete slog ikone potrditve, ki jo potrebujete, tako da kliknete ikono. Svoje ikone lahko dodatno prilagodite tako, da zagotovite barva, Velikost, Flip, in Zasukaj polja.

S temi polji lahko določite zahtevano barvo, velikost, položaj in usmerjenost ikone. Ko prilagodite svojo ikono, lahko zdaj uporabljate komponento ikone v aplikaciji Vue, tako da kopirate kodo komponente na spletno stran.

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

Zgornji blok kode nastavi barvo ikone na rdečo. Določa tudi, da sta višina in širina po 500 slikovnih pik.

Pri predogledu aplikacije boste dobili sliko, podobno spodnji sliki:

Čeprav dodate ikone vaši aplikaciji z @iconify/vue paket je na splošno enostaven, lahko občasno povzroči težave. Nekatere pogoste težave vključujejo težave s predupodabljanjem, sporočila o napakah v Objektni model dokumenta (DOM), in Vue ne upodablja komponente pravilno.

Te težave nastanejo zaradi časovnega razporeda postopka namestitve komponente glede na nalaganje ikon. To težavo lahko rešite z ikone za odklop vtičnikov knjižnica.

Dodajanje ikon s knjižnico ikon unplugin

The ikone za odklop vtičnikov knjižnica ponuja nadomestni način brez napak za uvoz in uporabo ikon neposredno v vaši predlogi.

Ta pristop integracije ikon rešuje težave, poudarjene z @iconify/vue, kar zagotavlja, da bo Vue samodejno vključil vsako ikono, ki jo uporabite v svoji paketni aplikaciji.

Za začetek z ikone za odklop vtičnikov knjižnico, odprite svoj terminal in namestite knjižnico tako, da zaženete naslednji ukaz npm:

npm install unplugin-icons

Po namestitvi morate konfigurirati orodje za gradnjo. Vue 3 uporablja Vite kot orodje za gradnjo. Namenjen vite.config.js in konfigurirajte datoteko, da bo videti natanko tako kot spodnji blok kode:

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

Zgornji blok kode prikazuje konfiguracijsko datoteko Vite. Delček kode uvozi Ikone vtičnik iz unplugin-icon/vite. Blok kode se nato nastavi Ikone () kot vtičnik v vtičniki niz.

Namestite lahko vse nabore ikon, da povečate svojo izbiro ikon. Če želite namestiti vse nabore ikon, zaženite naslednji ukaz npm v terminalu imenika vaše aplikacije:

npm i -D @iconify/json

Koda namesti vse nabore ikon, ki so na voljo za Iconify. Namestitvena velikost tega paketa je približno 200 MB. Namestite lahko tudi samo določen nabor ikon namesto vseh naborov, da zmanjšate velikost paketa:

npm i -D @iconify-json/ph

Zgornji delček kode namesti samo ikone iz nabora ikon Phosphor, ki ga Iconify označuje z tel.

Po namestitvi lahko komponento ikone uvozite v aplikacijo Vue. Imena ikon morate uvoziti v skladu s konvencijo ~ikone/{set}/{ikona} za uporabo ikon v vaših komponentah.

Opis konvencije za uvoz ikon je naslednji:

  • ~ikone: Nanaša se na pot ikone.
  • { set }: Nanaša se na nabor ali zbirko ikon.
  • {iconName}: Nanaša se na ime ikone v škatli za kebab.

Tukaj je primer, ki prikazuje uvoz in uporabo CheckFill komponenta ikone:

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

Ta delček kode prikazuje, kako uvoziti imena ikon s konvencijo ~ikone/ph/check-fill. Delček kode uvozi CheckFill komponenta ikone iz nabora ikon Phosphor. Nato nastavi atribute barve, širine in višine komponente ikone v predlogi Vue.

Predogled aplikacije iz zgornjega bloka kode bo povzročil enako sliko aplikacije, kot smo jo videli prej.

Naredite svoje aplikacije Vue bolj dostopne

Iconify je dragocena knjižnica za vaše aplikacije Vue, saj vam omogoča preprosto integracijo ikon v vmesnik vaše aplikacije. Ogromna knjižnica ikon Iconify ponuja boljše možnosti prilagajanja za vašo aplikacijo.

Kot razvijalec Vue morate svoje spletne aplikacije narediti dostopne vsem vrstam ljudi. To je zato, ker imajo različni ljudje različne načine, kako lahko uporabljajo vaše aplikacije, na primer slepi in gluhi ljudje. Naučite se orodij, s katerimi bodo vaše spletne aplikacije lahko dostopne tem ljudem.