Haluatko parantaa Vue-sovelluksiasi kuvakkeilla? Opi integroimaan Iconify vaivattomasti Vue-sovellukseesi.

Parhaat verkkosovellukset ovat todellakin kokoelma tekstiä ja kuvia. Sen esteettisen tunteen lisäksi, jonka kuvat tarjoavat verkkosovellukselle, ne tarjoavat myös visuaalisia vihjeitä ja lisäävät käyttäjien kiinnostusta sovellusta kohtaan.

Iconify on kuvakekehys, joka tarjoaa suuren kokoelman SVG-renderöityjä kuvakkeita eri kuvakepaketeista, mukaan lukien Bootstrap- ja Material Design -kuvakkeet. Iconify tukee erilaisia ​​JavaScript-etutason kehyksiä, mikä tekee siitä monipuolisen ratkaisun kuvakkeiden lisäämiseen verkkosovelluksiisi.

Kuinka integroida Iconify Vue-sovellukseesi

Voit hyödyntää Iconifya Vue-sovelluksessasi @iconify/vue npm-paketti. Tämä npm-paketti on Vue-integraatio Iconify-kuvakekehykseen.

@iconify/vue tarjoaa saumattoman tavan käyttää kuvakkeita Vue-sovelluksissa. Tämän paketin avulla voit nopeasti lisätä ja mukauttaa kuvakkeita projektiisi. Asentaa @iconify/vue Suorita Vue-sovelluksessa seuraava npm-komento sovelluksesi juurihakemiston päätteessä:

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

Tämä komento asentaa @iconify/vue paketti kuten a kehitysriippuvuus Vue-sovelluksessasi.

Tämä paketti toimii vain Vue 3 -sovelluksissa, jotka sinun on seurattava tätä artikkelia. Paketti ei tue Vue 2 -sovelluksia. Kuitenkin, jos haluat käyttää Iconifya Vue 2:ssa, suorita seuraava npm-komento:

npm install @iconify/vue2

Koska Vue 2:ta ei enää hallita 31. joulukuuta 2023 alkaen, sinun tulee oppia käyttämään Vue 3:a ja sen ominaisuuksia. Tällä varmistetaan, että pysyt ajan tasalla ja olennainen Vue-yhteisössä.

Kuinka lisätä kuvakkeita Vue-komponentteihin

Voit lisätä kuvakkeita tuomalla Kuvake Vue-komponenttien pakkauksesta. Voit lisätä kuvakkeita liittämällä seuraavan koodin Vue-komponentin komentosarjalohkoon:

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

Tämän vaiheen jälkeen voit käyttää kaikkia Iconify-kirjaston kuvakkeita. Jos haluat lisätä kuvakkeen, siirry kohtaan Iconify verkkosivusto. Kun siirryt verkkosivustolle, syötät sovellukseesi tarvitsemasi kuvakkeen nimen.

Seuraava kuva näyttää tarkistuskuvakkeen hakutulokset.

Voit sitten valita tarvitsemasi valintamerkkikuvakkeen tyylin napsauttamalla kuvaketta. Voit mukauttaa kuvakkeitasi lisää tarjoamalla Väri, Koko, Voltti, ja Kiertää kentät.

Näillä kentillä voit määrittää kuvakkeen värin, koon, sijainnin ja suunnan. Kun olet mukauttanut kuvakkeesi, voit nyt käyttää kuvakekomponenttia Vue-sovelluksessasi kopioimalla komponentin koodin verkkosivulle.

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

Yllä oleva koodilohko asettaa kuvakkeen värin punaiseksi. Se määrittää myös korkeudeksi ja leveydeksi 500 pikseliä.

Kun esikatselet sovellusta, saat alla olevan kuvan kaltaisen kuvan:

Vaikka lisäät kuvakkeita sovellukseesi @iconify/vue paketti on yleensä yksinkertainen, se voi toisinaan aiheuttaa ongelmia. Joitakin yleisiä ongelmia ovat esihahmonnusongelmat ja virheilmoitukset Document Object Model (DOM), ja Vue ei renderöi komponenttia oikein.

Nämä ongelmat johtuvat komponenttien asennusprosessin ajoituksesta suhteessa kuvakkeiden lataamiseen. Voit ratkaista tämän ongelman käyttämällä unplugin-kuvakkeet kirjasto.

Kuvakkeiden lisääminen unplugin-Icons -kirjaston avulla

The unplugin-kuvakkeet kirjasto tarjoaa vaihtoehtoisen, virheettömän tavan tuoda ja käyttää kuvakkeita suoraan mallissasi.

Tämä kuvakkeiden integrointitapa ratkaisee korostetut ongelmat @iconify/vue, varmistaen, että Vue sisällyttää automaattisesti jokaisen mukana toimitetussa sovelluksessa käyttämäsi kuvakkeen.

Aloitaksesi unplugin-kuvakkeet kirjasto, avaa pääte ja asenna kirjasto suorittamalla seuraava npm-komento:

npm install unplugin-icons

Asennuksen jälkeen sinun on määritettävä rakennustyökalusi. Vue 3 käyttää Vite sen rakennustyökaluna. Suunnata vite.config.js ja määritä tiedosto näyttämään täsmälleen alla olevan koodilohkon kaltaiseksi:

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

Yllä oleva koodilohko kuvaa Vite-määritystiedostoa. Koodinpätkä tuo Kuvakkeet laajennus osoitteesta unplugin-icon/vite. Koodilohko asettuu sitten kuvakkeet () laajennuksena laajennuksia joukko.

Voit asentaa kaikki kuvakesarjat maksimoidaksesi kuvakkeen valinnan. Asenna kaikki kuvakejoukot suorittamalla seuraava npm-komento sovelluksesi hakemiston päätteessä:

npm i -D @iconify/json

Koodi asentaa kaikki Iconifyn käytettävissä olevat kuvakesarjat. Tämän paketin asennuskoko on noin 200 MB. Voit myös asentaa vain tietyn kuvakejoukon kaikkien joukkojen sijaan pienentääksesi paketin kokoa:

npm i -D @iconify-json/ph

Yllä oleva koodinpätkä asentaa vain kuvakkeet Phosphor-kuvakejoukosta, jolla Iconify tarkoittaa ph.

Asennuksen jälkeen voit tuoda kuvakekomponentin Vue-sovellukseesi. Sinun on tuotava kuvakkeiden nimet sopimuksen mukaisesti ~kuvakkeet/{set}/{iconName} käyttääksesi komponenteissasi olevia kuvakkeita.

Kuvakkeiden tuontikäytännön kuvaus on seuraava:

  • ~ kuvakkeet: Se viittaa kuvakkeen polkuun.
  • { aseta }: Se viittaa kuvakesarjaan tai kokoelmaan.
  • { iconName }: Se viittaa kebab-kotelossa olevan kuvakkeen nimeen.

Tässä on esimerkki, joka näyttää tuonnin ja käytön Tarkista täyttö ikonikomponentti:

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

Tämä koodinpätkä osoittaa, kuinka kuvakkeiden nimet tuodaan tavanomaisesti ~kuvakkeet/ph/check-fill. Koodinpätkä tuo Tarkista täyttö kuvakekomponentti Phosphor-kuvakesarjasta. Sitten se asettaa kuvakekomponentin värin, leveyden ja korkeuden määritteet Vue-malliin.

Sovelluksen esikatselu yllä olevasta koodilohkosta johtaa samaan sovelluskuvaan kuin aiemmin.

Tee Vue-sovelluksestasi helpommin saavutettavissa

Iconify on arvokas kirjasto Vue-sovelluksille, koska sen avulla voit helposti integroida kuvakkeet sovelluksesi käyttöliittymään. Iconifyn laaja kuvakekirjasto tarjoaa parempia mukautusvaihtoehtoja sovelluksellesi.

Vue-kehittäjänä sinun on tehtävä verkkosovelluksesi kaikentyyppisten ihmisten saataville. Tämä johtuu siitä, että eri ihmisillä on erilaisia ​​tapoja käyttää sovelluksiasi, esimerkiksi sokeilla ja kuuroilla. Opi työkaluja, joiden avulla voit tehdä verkkosovelluksistasi helposti näiden ihmisten käytettävissä.