Norite patobulinti savo „Vue“ programas piktogramomis? Sužinokite, kaip lengvai integruoti „Iconify“ į „Vue“ programą.

Geriausios žiniatinklio programos iš tikrųjų yra teksto ir vaizdų rinkinys. Be estetinio jausmo, kurį vaizdai suteikia žiniatinklio programai, jie taip pat suteikia vaizdinių užuominų ir padidina vartotojų susidomėjimą programa.

Iconify yra piktogramų sistema, teikianti didelę SVG formato piktogramų kolekciją iš įvairių piktogramų paketų, įskaitant Bootstrap ir Material Design piktogramas. „Iconify“ palaiko skirtingas „JavaScript“ sistemas, todėl tai yra universalus sprendimas pridėti piktogramas prie žiniatinklio programų.

Kaip integruoti „Iconify“ į „Vue“ programą

Galite panaudoti „Iconify“ savo „Vue“ programoje su @iconify/vue npm paketą. Šis npm paketas yra „Vue“ integracija, skirta „Iconify“ piktogramų sistemai.

@iconify/vue suteikia galimybę sklandžiai naudoti piktogramas Vue programose. Šis paketas leidžia greitai pridėti ir tinkinti piktogramas savo projekte. Instaliuoti

instagram viewer
@iconify/vue „Vue“ programoje paleiskite šią npm komandą programos šakninio katalogo terminale:

npm install --save-dev @iconify/vue

Ši komanda įdiegia @iconify/vue pakuotė kaip a vystymosi priklausomybė savo „Vue“ programoje.

Šis paketas veiks tik „Vue 3“ programoms, kurių jums reikia norint tęsti šį straipsnį. Paketas nepalaiko Vue 2 programų. Tačiau norėdami naudoti „Iconify“ „Vue 2“, paleiskite šią npm komandą:

npm install @iconify/vue2

Kadangi nuo 2023 m. gruodžio 31 d. „Vue 2“ nebebus valdomas, turėtumėte išmokti naudotis „Vue 3“ ir jo funkcijomis. Taip siekiama užtikrinti, kad „Vue“ bendruomenėje būtumėte atnaujinami ir aktualūs.

Kaip pridėti piktogramas prie „Vue“ komponentų

Piktogramų galite pridėti importuodami Piktograma komponentą iš „Vue“ komponentų pakuotės. Norėdami pridėti piktogramų, įklijuokite šį kodą į Vue komponento scenarijaus bloką:

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

Atlikę šį veiksmą, galėsite pasiekti visas piktogramas Iconify bibliotekoje. Norėdami pridėti piktogramą, eikite į Ikonizuoti Interneto svetainė. Eidami į svetainę, programoje įvesite reikalingos piktogramos pavadinimą.

Toliau pateiktame paveikslėlyje rodomi varnelės piktogramos paieškos rezultatai.

Tada spustelėdami piktogramą galite pasirinkti reikiamą varnelės piktogramos stilių. Galite toliau tinkinti savo piktogramas pateikdami Spalva, Dydis, Apversti, ir Pasukti laukai.

Naudodami šiuos laukus galite nurodyti reikiamą piktogramos spalvą, dydį, padėtį ir orientaciją. Pritaikę piktogramą, dabar galite naudoti piktogramos komponentą savo „Vue“ programoje, nukopijuodami komponento kodą tinklalapyje.

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

Aukščiau pateiktame kodo bloke piktogramos spalva nustatoma raudona. Taip pat nurodomas aukštis ir plotis, kurių kiekvienas turi būti 500 pikselių.

Peržiūrėdami programą gausite vaizdą, panašų į toliau esantį paveikslėlį:

Nors prie programos pridėjote piktogramas su @iconify/vue paketas paprastai yra paprastas, kartais gali kilti problemų. Kai kurios dažniausiai pasitaikančios problemos apima išankstinio pateikimo problemas, klaidų pranešimus Dokumento objekto modelis (DOM)ir „Vue“ netinkamai atvaizduoja komponentą.

Šios problemos kyla dėl komponentų montavimo proceso laiko, susijusių su piktogramų įkėlimu. Šią problemą galite išspręsti naudodami išjungimo piktogramos biblioteka.

Piktogramų pridėjimas naudojant unplugin-Icons biblioteką

The išjungimo piktogramos biblioteka siūlo alternatyvų be klaidų būdą importuoti ir naudoti piktogramas tiesiai savo šablone.

Šis piktogramų integravimo metodas išsprendžia paryškintas problemas @iconify/vue, užtikrinant, kad „Vue“ automatiškai įtrauks kiekvieną piktogramą, kurią naudojate savo programoje.

Norėdami pradėti su išjungimo piktogramos biblioteką, atidarykite savo terminalą ir įdiekite biblioteką vykdydami šią npm komandą:

npm install unplugin-icons

Įdiegę turite sukonfigūruoti kūrimo įrankį. Vue 3 naudojimas Vite kaip kūrimo įrankis. Eikite į vite.config.js ir sukonfigūruokite failą, kad jis atrodytų tiksliai taip, kaip toliau pateiktame kodo bloke:

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

Aukščiau pateiktame kodo bloke pavaizduotas Vite konfigūracijos failas. Kodo fragmentas importuoja Piktogramos papildinys iš unplugin-icon/vite. Tada kodo blokas nustatomas Piktogramos () kaip įskiepis įskiepių masyvas.

Galite įdiegti visus piktogramų rinkinius, kad padidintumėte piktogramų pasirinkimą. Norėdami įdiegti visus piktogramų rinkinius, programos katalogo terminale paleiskite šią npm komandą:

npm i -D @iconify/json

Kodas įdiegia visus „Iconify“ pasiekiamus piktogramų rinkinius. Šio paketo diegimo dydis yra apie 200 MB. Taip pat galite įdiegti tik konkretų piktogramų rinkinį, o ne visus rinkinius, kad sumažintumėte paketo dydį:

npm i -D @iconify-json/ph

Aukščiau pateiktas kodo fragmentas įdiegia tik piktogramas iš „Phosphor“ piktogramų rinkinio, su kuriuo žymi „Iconify“. tel.

Įdiegę galite importuoti piktogramos komponentą į savo „Vue“ programą. Turite importuoti piktogramų pavadinimus su sutartimi ~icons/{set}/{iconName} naudoti komponentuose esančias piktogramas.

Piktogramų importavimo taisyklės aprašymas yra toks:

  • ~ piktogramos: Tai reiškia piktogramos kelią.
  • { set }: Tai reiškia piktogramų rinkinį arba rinkinį.
  • { iconName }: Tai reiškia piktogramos pavadinimą kebabo dėkle.

Štai pavyzdys, rodantis importavimą ir naudojimą Patikrinkite užpildymą piktogramos komponentas:

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

Šis kodo fragmentas parodo, kaip importuoti piktogramų pavadinimus laikantis susitarimo ~piktogramos/ph/check-fill. Kodo fragmentas importuoja Patikrinkite užpildymą piktogramos komponentas iš Phosphor piktogramų rinkinio. Tada jis nustato piktogramos komponento spalvą, plotį ir aukštį „Vue“ šablone.

Peržiūrėjus programą iš aukščiau pateikto kodo bloko, bus rodomas toks pat programos vaizdas, kaip ir anksčiau.

Padarykite savo „Vue“ programas prieinamesnes

„Iconify“ yra vertinga „Vue“ programų biblioteka, nes ji leidžia lengvai integruoti piktogramas į programos sąsają. Didžiulė „Iconify“ piktogramų biblioteka suteikia geresnes jūsų programos tinkinimo parinktis.

Kaip „Vue“ kūrėjas turite padaryti savo žiniatinklio programas prieinamas visų tipų žmonėms. Taip yra todėl, kad skirtingi žmonės, pavyzdžiui, aklieji ir kurtieji, gali skirtingai naudoti jūsų programas. Išmokite įrankius, kad jūsų žiniatinklio programos būtų lengvai pasiekiamos šiems žmonėms.