Vil du forbedre Vue-appene dine med ikoner? Lær hvordan du enkelt integrerer Iconify i Vue-appen din.

De beste nettapplikasjonene er egentlig en samling tekst og bilder. Bortsett fra den estetiske følelsen som bilder gir en nettapp, gir de også visuelle signaler og forbedrer brukernes interesse for applikasjonen.

Iconify er et ikonrammeverk som gir en stor samling av SVG-gjengitte ikoner fra forskjellige ikonpakker, inkludert Bootstrap og Material Design-ikoner. Iconify støtter forskjellige front-end JavaScript-rammeverk, noe som gjør det til en allsidig løsning for å legge til ikoner i nettappene dine.

Hvordan integrere Iconify i Vue-applikasjonen din

Du kan utnytte Iconify i Vue-applikasjonen din med @iconify/vue npm-pakken. Denne npm-pakken er en Vue-integrasjon for Iconify-ikonrammeverket.

@iconify/vue gir en sømløs måte å bruke ikoner i Vue-apper. Denne pakken lar deg raskt legge til og tilpasse ikoner i prosjektet ditt. Å installere @iconify/vue i Vue-applikasjonen din, kjør følgende npm-kommando i terminalen i appens rotkatalog:

instagram viewer 
npm install --save-dev @iconify/vue

Denne kommandoen installerer @iconify/vue pakke som en utviklingsavhengighet i Vue-applikasjonen din.

Denne pakken vil bare fungere for Vue 3-applikasjoner som du trenger for å følge opp denne artikkelen. Pakken støtter ikke Vue 2-applikasjoner. For å bruke Iconify i Vue 2, kjør imidlertid følgende npm-kommando:

npm install @iconify/vue2

Siden Vue 2 ikke lenger vil bli administrert fra 31. desember 2023, bør du lære hvordan du bruker Vue 3 og dens funksjoner. Dette er for å sikre at du holder deg oppdatert og relevant i Vue-fellesskapet.

Slik legger du til ikoner til Vue-komponentene dine

Du kan legge til ikoner ved å importere Ikon komponent fra pakken i Vue-komponentene dine. For å legge til ikoner, lim inn følgende kode i skriptblokken til Vue-komponenten:

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

Etter dette trinnet har du tilgang til alle ikonene i Iconify-biblioteket. For å legge til et ikon, gå over til Ikonifisere nettsted. Når du navigerer til nettstedet, skriver du inn navnet på ikonet du trenger i applikasjonen.

Følgende bilde viser deg søkeresultatene for et hakeikon.

Du kan deretter velge stilen til hakeikonet du trenger ved å klikke på ikonet. Du kan tilpasse ikonene dine ytterligere ved å gi Farge, Størrelse, Vend, og Rotere Enger.

Med disse feltene kan du spesifisere ikonets nødvendige farge, størrelse, posisjon og retning. Etter at du har tilpasset ikonet ditt, kan du nå bruke ikonkomponenten i Vue-appen din ved å kopiere komponentens kode på nettsiden.

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

Kodeblokken ovenfor setter fargen på ikonet til rød. Den spesifiserer også høyden og bredden til å være 500 piksler hver.

Når du forhåndsviser appen, får du et bilde som ligner på bildet nedenfor:

Selv om du legger til ikoner i applikasjonen din med @iconify/vue pakken er generelt enkel, den kan av og til føre til problemer. Noen vanlige problemer inkluderer problemer med forhåndsgjengivelse, feilmeldinger i Document Object Model (DOM), og Vue gjengir ikke komponenten riktig.

Disse problemene oppstår på grunn av tidspunktet for komponentmonteringsprosessen i forhold til lasting av ikoner. Du kan løse dette problemet med koble fra ikoner bibliotek.

Legge til ikoner med unplugin-Icons Library

De koble fra ikoner biblioteket tilbyr en alternativ, feilfri måte å importere og bruke ikoner direkte i malen din.

Denne tilnærmingen til å integrere ikoner løser problemene som er fremhevet med @iconify/vue, og sikrer at Vue automatisk inkluderer hvert ikon du bruker i den medfølgende applikasjonen.

For å komme i gang med koble fra ikoner bibliotek, åpne terminalen og installer biblioteket ved å kjøre følgende npm-kommando:

npm install unplugin-icons

Etter installasjonen må du konfigurere byggeverktøyet. Vue 3 bruker Vite som byggeverktøy. Drar mot vite.config.js og konfigurer filen til å se nøyaktig ut 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-konfigurasjonsfilen. Kodebiten importerer Ikoner plugin fra unplugin-ikon/vite. Kodeblokken setter seg deretter Ikoner() som en plugin i plugins array.

Du kan installere alle ikonsett for å maksimere ditt valg av ikon. For å installere alle ikonsett, kjør følgende npm-kommando i terminalen i appens katalog:

npm i -D @iconify/json

Koden installerer alle ikonsett som er tilgjengelige for Iconify. Installasjonsstørrelsen på denne pakken er ca. 200 MB. Du kan også installere bare et bestemt ikonsett i stedet for alle settene for å redusere pakkestørrelsen:

npm i -D @iconify-json/ph

Kodebiten ovenfor installerer kun ikoner fra Phosphor-ikonsettet, som Iconify angir med ph.

Etter installasjonen kan du importere ikonkomponenten til Vue-appen din. Du må importere ikonnavn med konvensjonen ~icons/{set}/{iconName} for å bruke ikonene i komponentene dine.

Beskrivelsen av konvensjonen for å importere ikoner er som følger:

  • ~ikoner: Det refererer til ikonbanen.
  • { sett }: Det refererer til ikonsettet eller samlingen.
  • { iconName }: Det refererer til ikonets navn i kebab-saken.

Her er et eksempel som viser import og bruk av CheckFill ikonkomponent:

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

Denne kodebiten viser hvordan du importerer ikonnavn med konvensjonen ~ikoner/ph/sjekk-fyll. Kodebiten importerer CheckFill ikonkomponent fra Phosphor-ikonsettet. Den angir deretter ikonkomponentens farge-, bredde- og høydeattributter i Vue-malen.

Forhåndsvisning av applikasjonen fra kodeblokken ovenfor vil resultere i det samme appbildet som tidligere.

Gjør Vue-appene dine mer tilgjengelige

Iconify er et verdifullt bibliotek for Vue-applikasjonene dine, da det lar deg enkelt integrere ikoner i appens grensesnitt. Iconifys enorme ikonbibliotek gir bedre tilpasningsmuligheter for applikasjonen din.

Som Vue-utvikler må du gjøre nettapplikasjonene dine tilgjengelige for alle typer mennesker. Dette er fordi forskjellige mennesker har forskjellige måter de kan bruke applikasjonene dine på, for eksempel blinde og døve. Lær verktøy for å gjøre nettappene dine lett tilgjengelige for disse menneskene.