Szeretnéd ikonokkal bővíteni Vue alkalmazásaidat? Ismerje meg, hogyan integrálhatja könnyedén az Iconify-t Vue alkalmazásába.

A legjobb webes alkalmazások valójában szövegek és képek gyűjteményei. A képek a webalkalmazások számára nyújtott esztétikai érzet mellett vizuális jelzéseket is nyújtanak, és növelik a felhasználók érdeklődését az alkalmazás iránt.

Az Iconify egy ikonkeretrendszer, amely SVG-ben renderelt ikonok nagy gyűjteményét kínálja különféle ikoncsomagokból, beleértve a Bootstrap és a Material Design ikonokat. Az Iconify támogatja a különböző előtérbeli JavaScript-keretrendszereket, így sokoldalú megoldást jelent ikonok hozzáadására webalkalmazásaihoz.

Az Iconify integrálása a Vue alkalmazásba

Kihasználhatja az Iconify-t a Vue alkalmazásban a @iconify/vue npm csomag. Ez az npm-csomag az Iconify ikonkeretrendszer Vue-integrációja.

@iconify/vue zökkenőmentes módot biztosít az ikonok használatára a Vue alkalmazásokon belül. Ez a csomag lehetővé teszi ikonok gyors hozzáadását és testreszabását a projektben. Telepíteni

instagram viewer
@iconify/vue a Vue alkalmazásban futtassa a következő npm parancsot az alkalmazás gyökérkönyvtárának termináljában:

npm install --save-dev @iconify/vue

Ez a parancs telepíti a @iconify/vue csomag mint a fejlődési függőség a Vue alkalmazásban.

Ez a csomag csak a Vue 3 alkalmazásokhoz fog működni, amelyekre szükség van a cikk nyomon követéséhez. A csomag nem támogatja a Vue 2 alkalmazásokat. Az Iconify Vue 2-ben való használatához azonban futtassa a következő npm parancsot:

npm install @iconify/vue2

Mivel 2023. december 31-től a Vue 2 nem lesz felügyelve, meg kell tanulnod a Vue 3 és funkciói használatát. Ez annak biztosítására szolgál, hogy naprakész és releváns maradjon a Vue közösségben.

Hogyan adhatunk ikonokat a Vue összetevőihez

A ikonok importálásával adhat hozzá ikonokat Ikon komponenst a csomagból a Vue összetevőiben. Ikonok hozzáadásához illessze be a következő kódot a Vue összetevő szkriptblokkjába:

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

E lépés után elérheti az Iconify könyvtár összes ikonját. Ikon hozzáadásához lépjen a következőre: Ikonizálni weboldal. A webhelyre navigálva meg kell adnia annak az ikonnak a nevét, amelyre szüksége van az alkalmazásban.

A következő képen a pipa ikon keresési eredményei láthatók.

Ezután az ikonra kattintva kiválaszthatja a kívánt csekk ikon stílusát. Tovább testreszabhatja ikonjait, ha megadja a Szín, Méret, Flip, és Forog mezőket.

Ezekkel a mezőkkel megadhatja az ikon kívánt színét, méretét, helyzetét és tájolását. Miután személyre szabta az ikont, most már használhatja az ikonkomponenst a Vue alkalmazásban, ha másolja az összetevő kódját a weboldalra.

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

A fenti kódblokk az ikon színét pirosra állítja. Azt is meghatározza, hogy a magasság és a szélesség egyenként 500 pixel.

Az alkalmazás előnézete az alábbihoz hasonló képet kap:

Bár ikonok hozzáadása az alkalmazáshoz a @iconify/vue A csomag általában egyszerű, esetenként problémákhoz vezethet. Néhány gyakori probléma a megjelenítés előtti problémák, hibaüzenetek a Dokumentumobjektum modell (DOM), és a Vue nem rendereli megfelelően az összetevőt.

Ezek a problémák az elemek beszerelési folyamatának időzítése miatt merülnek fel az ikonok betöltésével kapcsolatban. Ezt a problémát a unplugin-ikonok könyvtár.

Ikonok hozzáadása az unplugin-Icons könyvtárral

A unplugin-ikonok könyvtár alternatív, hibamentes módot kínál az ikonok közvetlenül a sablonon belüli importálására és használatára.

Az ikonok integrálásának ez a megközelítése megoldja a -val kiemelt problémákat @iconify/vue, biztosítva, hogy a Vue automatikusan felvegye a mellékelt alkalmazásban használt minden ikont.

A kezdéshez a unplugin-ikonok könyvtárat, nyissa meg a terminált, és telepítse a könyvtárat a következő npm parancs futtatásával:

npm install unplugin-icons

A telepítés után konfigurálnia kell az építőeszközt. A Vue 3 használata Vite, mint építőeszköze. Irány vite.config.js és állítsa be a fájlt úgy, hogy pontosan úgy nézzen ki, mint az alábbi kódblokk:

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

A fenti kódblokk a Vite konfigurációs fájlját ábrázolja. A kódrészlet importálja a Ikonok plugin innen unplugin-icon/vite. A kódblokk ezután beáll Ikonok () pluginként a bővítmények sor.

Telepítheti az összes ikonkészletet, hogy maximalizálja az ikonok kiválasztását. Az összes ikonkészlet telepítéséhez futtassa a következő npm parancsot az alkalmazás könyvtárának termináljában:

npm i -D @iconify/json

A kód telepíti az Iconify számára elérhető összes ikonkészletet. A csomag telepítési mérete körülbelül 200 MB. A csomag méretének csökkentése érdekében az összes készlet helyett csak egy adott ikonkészletet telepíthet:

npm i -D @iconify-json/ph

A fenti kódrészlet csak a Phosphor ikonkészletből származó ikonokat telepíti, amelyeket az Iconify jelöl ph.

A telepítés után importálhatja az ikonkomponenst a Vue alkalmazásba. Az ikonneveket a konvencióval kell importálni ~icons/{set}/{iconName} az összetevők ikonjainak használatához.

Az ikonok importálására vonatkozó konvenció leírása a következő:

  • ~ ikonok: Az ikon elérési útjára utal.
  • {készlet }: Az ikonkészletre vagy gyűjteményre utal.
  • { ikonName }: A kebabtartóban lévő ikon nevére utal.

Íme egy példa, amely bemutatja az importálást és a Check Fill ikon komponens:

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

Ez a kódrészlet bemutatja, hogyan importálhat ikonneveket a konvencióval ~ikonok/ph/check-fill. A kódrészlet importálja a Check Fill ikon komponens a Phosphor ikonkészletből. Ezután beállítja az ikonkomponens színét, szélességét és magasságát a Vue-sablonban.

Az alkalmazás előnézetének megtekintése a fenti kódblokkból ugyanazt az alkalmazásképet eredményezi, mint korábban.

Tegye elérhetőbbé Vue alkalmazásait

Az Iconify értékes könyvtár a Vue-alkalmazásokhoz, mivel lehetővé teszi az ikonok egyszerű integrálását az alkalmazás felületébe. Az Iconify hatalmas ikontára jobb testreszabási lehetőségeket kínál az alkalmazáshoz.

Vue fejlesztőként minden típusú ember számára elérhetővé kell tennie webes alkalmazásait. Ennek az az oka, hogy különböző emberek különböző módon használhatják alkalmazásait, például vakok és siketek. Tanuljon meg olyan eszközöket, amelyek segítségével webalkalmazásait könnyen elérhetővé teheti ezeknek az embereknek.