Hvad er Iconify, og hvordan integreres det i Vue Apps?

De bedste webapplikationer er virkelig en samling af tekst og billeder. Bortset fra den æstetiske følelse, som billeder giver til en webapp, giver de også visuelle signaler og forbedrer brugernes interesse for applikationen.

Iconify er en ikonramme, der giver en stor samling af SVG-renderede ikoner fra forskellige ikonpakker, inklusive Bootstrap og Material Design-ikoner. Iconify understøtter forskellige front-end JavaScript-rammer, hvilket gør det til en alsidig løsning til at tilføje ikoner til dine webapps.

Sådan integreres Iconify i din Vue-applikation

Du kan udnytte Iconify i din Vue-applikation med @iconify/vue npm pakke. Denne npm-pakke er en Vue-integration til Iconify-ikonrammerne.

@iconify/vue giver en problemfri måde at bruge ikoner i Vue-apps på. Denne pakke giver dig mulighed for hurtigt at tilføje og tilpasse ikoner i dit projekt. At installere @iconify/vue i din Vue-applikation skal du køre følgende npm-kommando i terminalen i din apps rodmappe:

npm install --save-dev @iconify/vue

Denne kommando installerer @iconify/vue pakke som en udviklingsafhængighed i din Vue-applikation.

Denne pakke fungerer kun for Vue 3-applikationer, som du skal bruge for at følge op på denne artikel. Pakken understøtter ikke Vue 2-applikationer. For at bruge Iconify i Vue 2 skal du dog køre følgende npm-kommando:

npm install @iconify/vue2

Da Vue 2 ikke længere vil blive administreret fra den 31. december 2023, bør du lære, hvordan du bruger Vue 3 og dens funktioner. Dette er for at sikre, at du forbliver opdateret og relevant i Vue-fællesskabet.

Sådan tilføjer du ikoner til dine Vue-komponenter

Du kan tilføje ikoner ved at importere Ikon komponent fra pakken i dine Vue-komponenter. For at tilføje ikoner skal du indsætte følgende kode i scriptblokken i Vue-komponenten:

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

Efter dette trin kan du få adgang til alle ikoner i Iconify-biblioteket. For at tilføje et ikon skal du gå over til Ikonificere internet side. Når du navigerer til webstedet, skal du indtaste navnet på det ikon, du skal bruge i din applikation.

Følgende billede viser dig søgeresultaterne for et afkrydsningsikon.

Du kan derefter vælge stilen for det afkrydsningsikon, du har brug for, ved at klikke på ikonet. Du kan yderligere tilpasse dine ikoner ved at levere Farve, Størrelse, Vend, og Rotere felter.

Med disse felter kan du angive dit ikons påkrævede farve, størrelse, position og retning. Når du har tilpasset dit ikon, kan du nu bruge ikonkomponenten i din Vue-app ved at kopiere komponentens kode på websiden.

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

Kodeblokken ovenfor indstiller farven på ikonet til rød. Det angiver også, at højden og bredden skal være 500 pixels hver.

Når du forhåndsviser appen, får du et billede, der ligner billedet nedenfor:

Selvom du tilføjer ikoner til din applikation med @iconify/vue pakken er generelt ligetil, det kan lejlighedsvis føre til problemer. Nogle almindelige problemer omfatter præ-renderingsproblemer, fejlmeddelelser i Document Object Model (DOM), og Vue gengiver ikke komponenten korrekt.

Disse problemer opstår på grund af timingen af ​​komponentmonteringsprocessen i forhold til indlæsning af ikoner. Du kan løse dette problem med unplugin-ikoner bibliotek.

Tilføjelse af ikoner med unplugin-Icons Library

Det unplugin-ikoner bibliotek tilbyder en alternativ, fejlfri måde at importere og bruge ikoner direkte i din skabelon.

Denne tilgang til at integrere ikoner løser de problemer, der er fremhævet med @iconify/vue, hvilket sikrer, at Vue automatisk inkluderer hvert ikon, du bruger i din medfølgende applikation.

For at komme i gang med unplugin-ikoner bibliotek, åbn din terminal og installer biblioteket ved at køre følgende npm-kommando:

npm install unplugin-icons

Efter installationen skal du konfigurere dit byggeværktøj. Vue 3 anvendelser Vite som dets byggeværktøj. Gå til vite.config.js og konfigurer filen til at se nøjagtig ud som kodeblokken nedenfor:

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

Kodeblokken ovenfor viser Vite-konfigurationsfilen. Kodestykket importerer Ikoner plugin fra unplugin-ikon/vite. Kodeblokken sættes derefter Ikoner() som et plugin i plugins array.

Du kan installere alle ikonsæt for at maksimere dit valg af ikon. For at installere alle ikonsæt skal du køre følgende npm-kommando i terminalen i din apps mappe:

npm i -D @iconify/json

Koden installerer alle tilgængelige ikonsæt for Iconify. Installationsstørrelsen af ​​denne pakke er omkring 200 MB. Du kan også kun installere et bestemt ikonsæt i stedet for alle sættene for at reducere pakkestørrelsen:

npm i -D @iconify-json/ph

Kodestykket ovenfor installerer kun ikoner fra Phosphor-ikonsættet, som Iconify angiver med ph.

Efter installationen kan du importere ikonkomponenten til din Vue-app. Du skal importere ikonnavne med konventionen ~icons/{set}/{iconName} at bruge ikonerne i dine komponenter.

Beskrivelsen af ​​konventionen om at importere ikoner er som følger:

• ~ikoner: Det henviser til ikonstien.
• { sæt }: Det henviser til ikonsættet eller samlingen.
• { iconName }: Det refererer til ikonets navn i kebab-sagen.

Her er et eksempel, der viser importen og brugen af CheckFyld ikon komponent:

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

Dette kodestykke viser, hvordan man importerer ikonnavne med konventionen ~ikoner/ph/check-fill. Kodestykket importerer CheckFyld ikonkomponent fra Phosphor-ikonsættet. Den indstiller derefter ikonkomponentens farve-, bredde- og højdeattributter i Vue-skabelonen.

Forhåndsvisning af applikationen fra ovenstående kodeblok vil resultere i det samme appbillede som set før.

Gør dine Vue-apps mere tilgængelige

Iconify er et værdifuldt bibliotek til dine Vue-applikationer, da det giver dig mulighed for nemt at integrere ikoner i din apps grænseflade. Iconifys store ikonbibliotek giver bedre tilpasningsmuligheder til din applikation.

Som Vue-udvikler skal du gøre dine webapplikationer tilgængelige for alle typer mennesker. Dette skyldes, at forskellige mennesker har forskellige måder, de kan bruge dine applikationer på, for eksempel blinde og døve. Lær værktøjer til at gøre dine webapps let tilgængelige for disse mennesker.