Chcete vylepšit své aplikace Vue ikonami? Naučte se, jak bez námahy integrovat Iconify do vaší aplikace Vue.
Nejlepší webové aplikace jsou skutečně sbírkou textu a obrázků. Kromě estetického pocitu, který obrázky poskytují webové aplikaci, poskytují také vizuální podněty a zvyšují zájem uživatelů o aplikaci.
Iconify je rámec ikon, který poskytuje velkou sbírku ikon vykreslených SVG z různých balíčků ikon, včetně ikon Bootstrap a Material Design. Iconify podporuje různé front-endové rámce JavaScriptu, což z něj činí všestranné řešení pro přidávání ikon do vašich webových aplikací.
Jak integrovat Iconify do vaší aplikace Vue
Iconify můžete využít ve své aplikaci Vue pomocí @iconify/vue npm balíček. Tento balíček npm je integrací Vue pro rámec ikon Iconify.
@iconify/vue poskytuje bezproblémový způsob používání ikon v aplikacích Vue. Tento balíček umožňuje rychle přidávat a upravovat ikony ve vašem projektu. Instalovat @iconify/vue ve své aplikaci Vue spusťte následující příkaz npm v terminálu kořenového adresáře vaší aplikace:
npm install --save-dev @iconify/vue
Tento příkaz nainstaluje @iconify/vue balíček jako a vývojová závislost ve vaší aplikaci Vue.
Tento balíček bude fungovat pouze pro aplikace Vue 3, které musíte sledovat podle tohoto článku. Balíček nepodporuje aplikace Vue 2. Chcete-li však použít Iconify ve Vue 2, spusťte následující příkaz npm:
npm install @iconify/vue2
Protože Vue 2 již nebude od 31. prosince 2023 spravován, měli byste se naučit používat Vue 3 a jeho funkce. To má zajistit, abyste zůstali aktuální a relevantní v komunitě Vue.
Jak přidat ikony do vašich komponent Vue
Ikony můžete přidat importováním souboru Ikona komponentu z balíčku ve vašich komponentách Vue. Chcete-li přidat ikony, vložte následující kód do bloku skriptů komponenty Vue:
<scriptsetup>
import { Icon } from '@iconify/vue'
script>
Po tomto kroku získáte přístup ke všem ikonám v knihovně Iconify. Chcete-li přidat ikonu, přejděte na Ikonizovat webová stránka. Při přechodu na webovou stránku zadáte název ikony, kterou potřebujete ve své aplikaci.
Následující obrázek ukazuje výsledky hledání ikony zaškrtnutí.
Poté můžete kliknutím na ikonu vybrat požadovaný styl ikony zaškrtnutí. Ikony můžete dále přizpůsobit poskytnutím Barva, Velikost, Překlopit, a Točit se pole.
Pomocí těchto polí můžete určit požadovanou barvu, velikost, polohu a orientaci ikony. Poté, co si svou ikonu přizpůsobíte, můžete nyní používat komponentu ikony ve své aplikaci Vue zkopírováním kódu komponenty na webovou stránku.
<template>
<Iconicon="ph: check-fill"color="red"width="500"height="500" />
template>
Blok kódu výše nastaví barvu ikony na červenou. Také určuje výšku a šířku 500 pixelů.
Při náhledu aplikace získáte obrázek podobný obrázku níže:
I když přidávání ikon do aplikace pomocí @iconify/vue balíček je obecně přímočarý, občas může vést k problémům. Některé běžné problémy zahrnují problémy s předvykreslováním, chybové zprávy v Objektový model dokumentu (DOM)a Vue nevykresluje komponentu správně.
Tyto problémy vznikají kvůli načasování procesu montáže součásti ve vztahu k načítání ikon. Tento problém můžete vyřešit pomocí unplugin-ikony knihovna.
Přidávání ikon pomocí knihovny ikon unplugin
The unplugin-ikony knihovna nabízí alternativní, bezchybný způsob importu a používání ikon přímo ve vaší šabloně.
Tento přístup integrace ikon řeší problémy zvýrazněné pomocí @iconify/vue, což zajistí, že Vue automaticky zahrne každou ikonu, kterou použijete ve své přibalené aplikaci.
Chcete-li začít s unplugin-ikony knihovny, otevřete svůj terminál a nainstalujte knihovnu spuštěním následujícího příkazu npm:
npm install unplugin-icons
Po instalaci je třeba nakonfigurovat nástroj pro sestavení. Používá Vue 3 Vite jako jeho stavební nástroj. Vydejte se vite.config.js a nakonfigurujte soubor tak, aby vypadal přesně jako blok kódu níže:
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))
}
}
})
Blok kódu výše zobrazuje konfigurační soubor Vite. Fragment kódu importuje soubor ikony plugin od unplugin-ikona/vite. Blok kódu se poté nastaví ikony() jako plugin v pluginy pole.
Můžete nainstalovat všechny sady ikon, abyste maximalizovali svůj výběr ikony. Chcete-li nainstalovat všechny sady ikon, spusťte následující příkaz npm v terminálu adresáře vaší aplikace:
npm i -D @iconify/json
Kód nainstaluje všechny sady ikon dostupné pro Iconify. Velikost instalace tohoto balíčku je asi 200 MB. Můžete také nainstalovat pouze konkrétní sadu ikon namísto všech sad, abyste snížili velikost balíčku:
npm i -D @iconify-json/ph
Výše uvedený fragment kódu nainstaluje pouze ikony ze sady ikon Phosphor, kterou Iconify označuje ph.
Po instalaci můžete importovat komponentu ikony do aplikace Vue. Názvy ikon musíte importovat podle konvence ~icons/{set}/{iconName} používat ikony ve vašich komponentách.
Popis konvence importu ikon je následující:
- ~ikony: Odkazuje na cestu k ikoně.
- { set }: Odkazuje na sadu ikon nebo kolekci.
- { iconName }: Odkazuje na název ikony v pouzdru na kebab.
Zde je příklad ukazující import a použití CheckFill komponenta ikony:
<scriptsetup>
import CheckFill from "~icons/ph/check-fill"
script>
<template>
<CheckFillcolor="red"width="500"height="500" />
template>
Tento fragment kódu ukazuje, jak importovat názvy ikon s konvencí ~ikony/ph/check-fill. Fragment kódu importuje soubor CheckFill ikona komponent ze sady ikon Phosphor. Poté nastaví atributy barvy, šířky a výšky komponenty ikony v šabloně Vue.
Náhled aplikace z výše uvedeného bloku kódu bude mít za následek stejný obrázek aplikace jako dříve.
Zpřístupněte své aplikace Vue
Iconify je cenná knihovna pro vaše aplikace Vue, protože vám umožňuje snadno integrovat ikony do rozhraní vaší aplikace. Rozsáhlá knihovna ikon Iconify poskytuje lepší možnosti přizpůsobení pro vaši aplikaci.
Jako vývojář Vue musíte své webové aplikace zpřístupnit všem typům lidí. Je to proto, že různí lidé mají různé způsoby, jak mohou používat vaše aplikace, například nevidomí a neslyšící lidé. Naučte se nástroje, které těmto lidem usnadní přístup k vašim webovým aplikacím.