Mis on Iconify ja kuidas seda Vue rakendustesse integreerida?

Parimad veebirakendused on tegelikult teksti ja piltide kogu. Lisaks esteetilisele tundele, mida pildid veebirakendusele pakuvad, pakuvad need ka visuaalseid vihjeid ja suurendavad kasutajate huvi rakenduse vastu.

Iconify on ikooniraamistik, mis pakub suurt kogumit SVG-renderdatud ikoone erinevatest ikoonipakettidest, sealhulgas Bootstrapi ja Material Designi ikoonidest. Iconify toetab erinevaid esiotsa JavaScripti raamistikke, muutes selle mitmekülgseks lahenduseks veebirakendustele ikoonide lisamiseks.

Kuidas integreerida Iconify oma Vue rakendusse

Saate oma Vue rakenduses Iconifyt kasutada koos @iconify/vue npm pakett. See npm-pakett on Vue integratsioon Iconify ikooniraamistikku.

@iconify/vue pakub sujuvat viisi ikoonide kasutamiseks Vue rakendustes. See pakett võimaldab teil kiiresti oma projekti ikoone lisada ja kohandada. Paigaldama @iconify/vue käivitage oma Vue rakenduses oma rakenduse juurkataloogi terminalis järgmine npm käsk:

npm install --save-dev @iconify/vue

See käsk installib @iconify/vue pakett kui a arengusõltuvus oma Vue rakenduses.

See pakett töötab ainult Vue 3 rakenduste jaoks, mida peate selle artikli järgimiseks tegema. Pakett ei toeta Vue 2 rakendusi. Kuid Iconify kasutamiseks Vue 2-s käivitage järgmine npm-käsk:

npm install @iconify/vue2

Kuna alates 31. detsembrist 2023 Vue 2 enam ei hallata, peaksite õppima, kuidas Vue 3 ja selle funktsioone kasutada. Selle eesmärk on tagada, et olete Vue kogukonnas kursis ja asjakohane.

Kuidas lisada oma Vue komponentidele ikoone

Saate lisada ikoone, importides Ikoon Vue komponentide pakendist. Ikoonide lisamiseks kleepige Vue komponendi skriptiplokki järgmine kood:

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

Pärast seda sammu pääsete juurde kõigile Iconify teegi ikoonidele. Ikooni lisamiseks minge lehele Iconify veebisait. Veebisaidile navigeerides sisestate oma rakenduses vajaliku ikooni nime.

Järgmine pilt näitab linnukese ikooni otsingutulemusi.

Seejärel saate valida vajaliku kontrolliikooni stiili, klõpsates ikoonil. Saate oma ikoone veelgi kohandada, pakkudes Värv, Suurus, Pöörake, ja Pöörake väljad.

Nende väljade abil saate määrata oma ikooni vajaliku värvi, suuruse, asukoha ja suuna. Kui olete oma ikooni kohandanud, saate nüüd kasutada ikoonikomponenti oma Vue rakenduses, kopeerides komponendi koodi veebilehele.

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

Ülaltoodud koodiplokk määrab ikooni värvi punaseks. Samuti määrab see kõrguseks ja laiuseks 500 pikslit.

Rakenduse eelvaate kuvamisel kuvatakse allolevale pildile sarnane pilt:

Kuigi lisate oma rakendusele ikoone rakendusega @iconify/vue pakett on üldiselt lihtne, võib see mõnikord põhjustada probleeme. Mõned levinumad probleemid hõlmavad eelrenderdusprobleeme ja tõrketeateid Dokumendiobjekti mudel (DOM)ja Vue ei renderda komponenti korralikult.

Need probleemid tulenevad komponentide paigaldamise protsessi ajastusest, mis on seotud ikoonide laadimisega. Saate selle probleemi lahendada rakendusega unplugin-ikoonid raamatukogu.

Ikoonide lisamine unplugin-ikoonide teegiga

The unplugin-ikoonid teek pakub alternatiivset veavaba viisi ikoonide importimiseks ja kasutamiseks otse malli sees.

Selline ikoonide integreerimise lähenemisviis lahendab esiletõstetud probleemid @iconify/vue, tagades, et Vue kaasab automaatselt iga ikooni, mida kasutate oma komplekteeritud rakenduses.

Et alustada unplugin-ikoonid raamatukogu, avage oma terminal ja installige teek, käivitades järgmise npm-käsu:

npm install unplugin-icons

Pärast installimist peate oma ehitustööriista konfigureerima. Vue 3 kasutusalad Vite kui selle ehitustööriist. Suunduge vite.config.js ja konfigureerige fail välja nägema täpselt nagu alltoodud koodiplokk:

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

Ülaltoodud koodiplokk kujutab Vite konfiguratsioonifaili. Koodilõik impordib Ikoonid plugin alates unplugin-icon/vite. Seejärel seatakse koodiplokk Ikoonid () pistikprogrammina pistikprogrammid massiivi.

Ikoonivaliku maksimeerimiseks saate installida kõik ikoonikomplektid. Kõigi ikoonikomplektide installimiseks käivitage oma rakenduse kataloogi terminalis järgmine npm-käsk:

npm i -D @iconify/json

Kood installib kõik Iconify jaoks saadaolevad ikoonikomplektid. Selle paketi installimaht on umbes 200 MB. Paki suuruse vähendamiseks saate installida ka ainult konkreetse ikoonikomplekti kõigi komplektide asemel:

npm i -D @iconify-json/ph

Ülaltoodud koodilõik installib ainult Phosphori ikoonikomplekti ikoone, millega Iconify tähistab tel.

Pärast installimist saate ikoonikomponendi oma Vue rakendusse importida. Peate importima ikoonide nimed kokkuleppega ~icons/{set}/{iconName} komponentides olevate ikoonide kasutamiseks.

Ikoonide importimise tava kirjeldus on järgmine:

• ~ ikoonid: see viitab ikooni teele.
• { set }: see viitab ikoonikomplektile või -kogule.
• { ikooninimi }: See viitab ikooni nimele kebabikarbis.

Siin on näide, mis näitab importi ja kasutamist Kontrollige täitmist ikooni komponent:

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

See koodilõik näitab, kuidas importida ikooninimesid vastavalt tavale ~icons/ph/check-fill. Koodilõik impordib Kontrollige täitmist ikooni komponent Phosphori ikoonikomplektist. Seejärel määrab see Vue mallis ikoonikomponendi värvi, laiuse ja kõrguse atribuudid.

Rakenduse eelvaate kuvamisel ülaltoodud koodiplokist kuvatakse sama rakenduse pilt, nagu varem.

Muutke oma Vue rakendused juurdepääsetavamaks

Iconify on teie Vue rakenduste jaoks väärtuslik raamatukogu, kuna see võimaldab teil hõlpsasti ikoone oma rakenduse liidesesse integreerida. Iconify suur ikooniteek pakub teie rakenduse jaoks paremaid kohandamisvõimalusi.

Vue arendajana peate oma veebirakendused igat tüüpi inimestele kättesaadavaks tegema. Selle põhjuseks on asjaolu, et erinevatel inimestel on teie rakenduste kasutamine erinev, näiteks pimedatel ja kurtidel. Õppige tööriistu, mis muudavad oma veebirakendused neile inimestele hõlpsasti juurdepääsetavaks.