Kas ir Iconify un kā to integrēt Vue Apps?

Labākās tīmekļa lietojumprogrammas patiešām ir teksta un attēlu kolekcija. Papildus estētiskajai sajūtai, ko attēli nodrošina tīmekļa lietotnei, tie sniedz arī vizuālas norādes un uzlabo lietotāju interesi par lietojumprogrammu.

Iconify ir ikonu ietvars, kas nodrošina lielu SVG formātā renderētu ikonu kolekciju no dažādām ikonu pakotnēm, tostarp Bootstrap un Material Design ikonām. Iconify atbalsta dažādus priekšgala JavaScript ietvarus, padarot to par daudzpusīgu risinājumu ikonu pievienošanai tīmekļa lietotnēm.

Kā integrēt Iconify savā Vue lietojumprogrammā

Varat izmantot Iconify savā Vue lietojumprogrammā ar @iconify/vue npm pakete. Šī npm pakotne ir Vue integrācija ikonu ietvaram Iconify.

@iconify/vue nodrošina nevainojamu veidu, kā lietot ikonas Vue lietotnēs. Šī pakotne ļauj ātri pievienot un pielāgot ikonas jūsu projektā. Lai instalētu @iconify/vue savā Vue lietojumprogrammā palaidiet šo npm komandu savas lietotnes saknes direktorija terminālī:

npm install --save-dev @iconify/vue

Šī komanda instalē @iconify/vue iepakojums kā a attīstības atkarība savā Vue lietojumprogrammā.

Šī pakotne darbosies tikai Vue 3 lietojumprogrammām, kas jums ir nepieciešamas, lai izpildītu šo rakstu. Pakotne neatbalsta Vue 2 lietojumprogrammas. Tomēr, lai izmantotu Iconify Vue 2, palaidiet šo npm komandu:

npm install @iconify/vue2

Tā kā no 2023. gada 31. decembra Vue 2 vairs netiks pārvaldīts, jums vajadzētu uzzināt, kā lietot Vue 3 un tā funkcijas. Tas tiek darīts, lai nodrošinātu, ka esat jaunākais un atbilstošs Vue kopienā.

Kā pievienot ikonas saviem Vue komponentiem

Varat pievienot ikonas, importējot Ikona komponents no iepakojuma jūsu Vue komponentos. Lai pievienotu ikonas, Vue komponenta skripta blokā ielīmējiet šādu kodu:

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

Pēc šīs darbības varat piekļūt visām ikonām Iconify bibliotēkā. Lai pievienotu ikonu, dodieties uz Ikonizēt tīmekļa vietne. Pārejot uz vietni, lietojumprogrammā ievadīsit vajadzīgās ikonas nosaukumu.

Nākamajā attēlā ir parādīti atzīmes ikonas meklēšanas rezultāti.

Pēc tam varat izvēlēties vajadzīgo čeka ikonas stilu, noklikšķinot uz ikonas. Varat vēl vairāk pielāgot savas ikonas, nodrošinot Krāsa, Izmērs, Apgriezt, un Pagriezt lauki.

Izmantojot šos laukus, varat norādīt ikonai nepieciešamo krāsu, izmēru, novietojumu un orientāciju. Kad esat pielāgojis savu ikonu, tagad varat izmantot ikonas komponentu savā Vue lietotnē, nokopējot komponenta kodu tīmekļa lapā.

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

Iepriekš minētais koda bloks iestata ikonas krāsu uz sarkanu. Tas arī norāda, ka augstums un platums katrs ir 500 pikseļi.

Priekšskatot lietotni, jūs iegūsit attēlu, kas līdzīgs zemāk redzamajam attēlam:

Lai gan pievienojot savai lietojumprogrammai ikonas, izmantojot @iconify/vue pakete parasti ir vienkārša, tā dažkārt var radīt problēmas. Dažas izplatītas problēmas ietver iepriekšējas renderēšanas problēmas, kļūdu ziņojumus Dokumenta objekta modelis (DOM), un Vue neatveido komponentu pareizi.

Šīs problēmas rodas komponentu montāžas procesa laika dēļ saistībā ar ikonu ielādi. Jūs varat atrisināt šo problēmu, izmantojot atvienošanas ikonas bibliotēka.

Ikonu pievienošana, izmantojot unplugin-Icons bibliotēku

The atvienošanas ikonas bibliotēka piedāvā alternatīvu, bez kļūdām veidu, kā importēt un izmantot ikonas tieši savā veidnē.

Šī ikonu integrēšanas pieeja atrisina ar izceltās problēmas @iconify/vue, nodrošinot, ka Vue automātiski iekļaus katru ikonu, ko izmantojat savā komplektētajā lietojumprogrammā.

Lai sāktu darbu ar atvienošanas ikonas bibliotēku, atveriet savu termināli un instalējiet bibliotēku, izpildot šo npm komandu:

npm install unplugin-icons

Pēc instalēšanas jums ir jākonfigurē veidošanas rīks. Vue 3 lietojumi Vite kā tā veidošanas rīks. Doties uz vite.config.js un konfigurējiet failu, lai tas izskatītos tieši tāpat kā tālāk norādītajā koda blokā:

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

Iepriekš redzamais koda bloks attēlo Vite konfigurācijas failu. Koda fragments importē Ikonas spraudnis no unplugin-icon/vite. Pēc tam koda bloks tiek iestatīts Ikonas () kā spraudnis programmā spraudņi masīvs.

Varat instalēt visas ikonu kopas, lai maksimāli palielinātu ikonu izvēli. Lai instalētu visas ikonu kopas, programmas direktorija terminālī palaidiet šo npm komandu:

npm i -D @iconify/json

Kods instalē visas ikonu kopas, kas pieejamas Iconify. Šīs pakotnes instalācijas lielums ir aptuveni 200 MB. Varat arī instalēt tikai noteiktu ikonu kopu, nevis visas kopas, lai samazinātu pakotnes izmēru:

npm i -D @iconify-json/ph

Iepriekš minētais koda fragments instalē tikai ikonas no Phosphor ikonu kopas, ar ko Iconify apzīmē tālr.

Pēc instalēšanas varat importēt ikonas komponentu savā Vue lietotnē. Ikonu nosaukumi ir jāimportē atbilstoši noteikumiem ~icons/{set}/{iconName} lai izmantotu komponentos esošās ikonas.

Ikonu importēšanas konvencijas apraksts ir šāds:

• ~ ikonas: tas attiecas uz ikonas ceļu.
• { set }: tas attiecas uz ikonu kopu vai kolekciju.
• { iconName }: tas attiecas uz ikonas nosaukumu kebaba kastītē.

Šeit ir piemērs, kas parāda importēšanu un izmantošanu Pārbaudiet Aizpildiet ikonas komponents:

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

Šis koda fragments parāda, kā importēt ikonu nosaukumus atbilstoši noteikumiem ~ ikonas/ph/check-fill. Koda fragments importē Pārbaudiet Aizpildiet ikonu komponents no Phosphor ikonu kopas. Pēc tam Vue veidnē tiek iestatīts ikonas komponenta krāsas, platuma un augstuma atribūts.

Priekšskatot lietojumprogrammu no iepriekš minētā koda bloka, tiks parādīts tas pats lietotnes attēls, kas tika parādīts iepriekš.

Padariet savas Vue lietotnes pieejamākas

Iconify ir vērtīga bibliotēka jūsu Vue lietojumprogrammām, jo ​​tā ļauj ērti integrēt ikonas jūsu lietotnes saskarnē. Iconify plašā ikonu bibliotēka nodrošina labākas pielāgošanas iespējas jūsu lietojumprogrammai.

Kā Vue izstrādātājam jums ir jāpadara savas tīmekļa lietojumprogrammas pieejamas visu veidu cilvēkiem. Tas ir tāpēc, ka dažādiem cilvēkiem ir dažādi veidi, kā viņi var izmantot jūsu lietojumprogrammas, piemēram, akli un nedzirdīgi cilvēki. Apgūstiet rīkus, kā padarīt savas tīmekļa lietotnes viegli pieejamas šiem cilvēkiem.