Čo je Iconify a ako ho integrovať do aplikácií Vue?

Najlepšie webové aplikácie sú skutočne zbierkou textu a obrázkov. Okrem estetického pocitu, ktorý obrázky poskytujú webovej aplikácii, poskytujú aj vizuálne podnety a zvyšujú záujem používateľov o aplikáciu.

Iconify je rámec ikon, ktorý poskytuje veľkú zbierku ikon vykreslených SVG z rôznych balíkov ikon, vrátane ikon Bootstrap a Material Design. Iconify podporuje rôzne front-end rámce JavaScriptu, čo z neho robí všestranné riešenie na pridávanie ikon do vašich webových aplikácií.

Ako integrovať Iconify do vašej aplikácie Vue

Iconify môžete využiť vo svojej aplikácii Vue pomocou @iconify/vue npm balík. Tento balík npm je integráciou Vue pre rámec ikon Iconify.

@iconify/vue poskytuje bezproblémový spôsob používania ikon v aplikáciách Vue. Tento balík vám umožňuje rýchlo pridať a prispôsobiť ikony vo vašom projekte. Inštalovať @iconify/vue vo svojej aplikácii Vue spustite nasledujúci príkaz npm v termináli koreňového adresára vašej aplikácie:

npm install --save-dev @iconify/vue

Tento príkaz nainštaluje @iconify/vue balík ako a vývojová závislosť vo vašej aplikácii Vue.

Tento balík bude fungovať iba pre aplikácie Vue 3, ktoré musíte sledovať podľa tohto článku. Balík nepodporuje aplikácie Vue 2. Ak však chcete použiť Iconify vo Vue 2, spustite nasledujúci príkaz npm:

npm install @iconify/vue2

Keďže Vue 2 už nebude spravovaný od 31. decembra 2023, mali by ste sa naučiť používať Vue 3 a jeho funkcie. Je to preto, aby ste si zaistili, že zostanete aktuálny a relevantný v komunite Vue.

Ako pridať ikony do vašich komponentov Vue

Ikony môžete pridať importovaním súboru Ikona komponent z balíka vo vašich komponentoch Vue. Ak chcete pridať ikony, vložte nasledujúci kód do bloku skriptov komponentu Vue:

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

Po tomto kroku získate prístup ku všetkým ikonám v knižnici Iconify. Ak chcete pridať ikonu, prejdite na stránku Ikonizovať webovej stránky. Pri navigácii na webovú stránku zadáte názov ikony, ktorú potrebujete vo svojej aplikácii.

Nasledujúci obrázok zobrazuje výsledky vyhľadávania ikony začiarknutia.

Kliknutím na ikonu si potom môžete vybrať požadovaný štýl ikony začiarknutia. Svoje ikony môžete ďalej prispôsobiť poskytnutím Farba, Veľkosť, Prevrátiť, a Točiť sa poliach.

Pomocou týchto polí môžete určiť požadovanú farbu, veľkosť, polohu a orientáciu ikony. Po prispôsobení ikony môžete teraz použiť komponent ikony vo svojej aplikácii Vue skopírovaním kódu komponentu na webovú stránku.

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

Blok kódu vyššie nastaví farbu ikony na červenú. Špecifikuje tiež výšku a šírku 500 pixelov.

Po zobrazení ukážky aplikácie získate obrázok podobný obrázku nižšie:

Aj keď pridávanie ikon do vašej aplikácie pomocou @iconify/vue balík je vo všeobecnosti jednoduchý, občas môže viesť k problémom. Niektoré bežné problémy zahŕňajú problémy s predbežným vykresľovaním, chybové hlásenia v Model objektu dokumentu (DOM)a Vue nevykresľuje komponent správne.

Tieto problémy vznikajú v dôsledku načasovania procesu montáže komponentov vo vzťahu k načítaniu ikon. Tento problém môžete vyriešiť pomocou unplugin-ikony knižnica.

Pridávanie ikon pomocou knižnice ikon odpojenia

The unplugin-ikony knižnica ponúka alternatívny, bezchybný spôsob importovania a používania ikon priamo vo vašej šablóne.

Tento prístup integrácie ikon rieši problémy zvýraznené pomocou @iconify/vue, čím sa zabezpečí, že Vue automaticky zahrnie každú ikonu, ktorú použijete vo svojej pribalenej aplikácii.

Ak chcete začať s unplugin-ikony knižnicu, otvorte svoj terminál a nainštalujte knižnicu spustením nasledujúceho príkazu npm:

npm install unplugin-icons

Po inštalácii musíte nakonfigurovať nástroj na zostavovanie. Vue 3 používa Vite ako jeho nástroj na zostavovanie. Zamierte k vite.config.js a nakonfigurujte súbor tak, aby vyzeral presne ako blok kódu nižšie:

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

Vyššie uvedený blok kódu zobrazuje konfiguračný súbor Vite. Útržok kódu importuje súbor ikony plugin od unplugin-ikona/vite. Potom sa nastaví blok kódu ikony () ako doplnok v pluginy pole.

Môžete nainštalovať všetky sady ikon, aby ste maximalizovali svoj výber ikony. Ak chcete nainštalovať všetky sady ikon, spustite nasledujúci príkaz npm v termináli adresára vašej aplikácie:

npm i -D @iconify/json

Kód nainštaluje všetky sady ikon dostupné pre Iconify. Veľkosť inštalácie tohto balíka je približne 200 MB. Môžete tiež nainštalovať iba konkrétnu sadu ikon namiesto všetkých sád, aby ste znížili veľkosť balíka:

npm i -D @iconify-json/ph

Útržok kódu vyššie nainštaluje iba ikony zo sady ikon Phosphor, ktorú Iconify označuje ph.

Po inštalácii môžete komponent ikon importovať do aplikácie Vue. Názvy ikon musíte importovať podľa konvencie ~icons/{set}/{iconName} používať ikony vo vašich komponentoch.

Popis konvencie importu ikon je nasledovný:

• ~ikony: Vzťahuje sa na cestu ikony.
• { set }: Vzťahuje sa na sadu ikon alebo kolekciu.
• { iconName }: Odkazuje na názov ikony v kufríku na kebab.

Tu je príklad znázorňujúci import a použitie CheckFill komponent ikony:

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

Tento útržok kódu ukazuje, ako importovať názvy ikon podľa konvencie ~ikony/ph/check-fill. Útržok kódu importuje súbor CheckFill ikonový komponent zo sady ikon Phosphor. Potom nastaví atribúty farby, šírky a výšky komponentu ikony v šablóne Vue.

Ukážka aplikácie z vyššie uvedeného bloku kódu bude mať za následok rovnaký obrázok aplikácie ako predtým.

Urobte svoje aplikácie Vue dostupnejšími

Iconify je cenná knižnica pre vaše aplikácie Vue, pretože vám umožňuje jednoducho integrovať ikony do rozhrania vašej aplikácie. Rozsiahla knižnica ikon Iconify poskytuje lepšie možnosti prispôsobenia pre vašu aplikáciu.

Ako vývojár Vue musíte sprístupniť svoje webové aplikácie všetkým typom ľudí. Je to preto, že rôzni ľudia majú rôzne spôsoby, ako môžu používať vaše aplikácie, napríklad slepí a nepočujúci. Naučte sa nástroje, vďaka ktorým budú vaše webové aplikácie pre týchto ľudí ľahko dostupné.