Wilt u uw Vue-apps verbeteren met pictogrammen? Leer hoe u Iconify moeiteloos integreert in uw Vue-app.
De beste webapplicaties zijn eigenlijk een verzameling tekst en afbeeldingen. Afgezien van het esthetische gevoel dat afbeeldingen aan een webapp geven, bieden ze ook visuele aanwijzingen en vergroten ze de interesse van gebruikers in de applicatie.
Iconify is een pictogramframework dat een grote verzameling SVG-gerenderde pictogrammen uit verschillende pictogrampakketten biedt, waaronder Bootstrap- en Material Design-pictogrammen. Iconify ondersteunt verschillende front-end JavaScript-frameworks, waardoor het een veelzijdige oplossing is voor het toevoegen van pictogrammen aan uw webapps.
Hoe Iconify te integreren in uw Vue-applicatie
U kunt Iconify gebruiken in uw Vue-applicatie met de @iconify/vue npm-pakket. Dit npm-pakket is een Vue-integratie voor het Iconify-pictogramframework.
@iconify/vue biedt een naadloze manier om pictogrammen in Vue-apps te gebruiken. Met dit pakket kunt u snel pictogrammen in uw project toevoegen en aanpassen. Installeren
@iconify/vue voer in uw Vue-toepassing de volgende npm-opdracht uit in de terminal van de hoofdmap van uw app:npm install --save-dev @iconify/vue
Deze opdracht installeert het @iconify/vue pakket als een ontwikkelingsafhankelijkheid in uw Vue-applicatie.
Dit pakket werkt alleen voor Vue 3-applicaties die u nodig hebt om dit artikel op te volgen. Het pakket ondersteunt geen Vue 2-applicaties. Om Iconify echter in Vue 2 te gebruiken, voert u de volgende npm-opdracht uit:
npm install @iconify/vue2
Aangezien Vue 2 vanaf 31 december 2023 niet meer wordt beheerd, moet u leren hoe u Vue 3 en de bijbehorende functies gebruikt. Dit is om ervoor te zorgen dat u up-to-date en relevant blijft in de Vue-community.
Pictogrammen toevoegen aan uw Vue-componenten
U kunt pictogrammen toevoegen door het Icoon component uit het pakket in uw Vue-componenten. Om pictogrammen toe te voegen, plakt u de volgende code in het scriptblok van de Vue-component:
<scriptsetup>
import { Icon } from '@iconify/vue'
script>
Na deze stap heb je toegang tot alle pictogrammen in de Iconify-bibliotheek. Om een pictogram toe te voegen, gaat u naar de Iconiseren website. Wanneer u naar de website navigeert, voert u de naam in van het pictogram dat u nodig hebt in uw toepassing.
De volgende afbeelding toont u de zoekresultaten voor een vinkje.
U kunt vervolgens de gewenste stijl van het vinkje kiezen door op het pictogram te klikken. U kunt uw pictogrammen verder aanpassen door de Kleur, Maat, Omdraaien, En Draaien velden.
Met deze velden kunt u de vereiste kleur, grootte, positie en richting van uw pictogram specificeren. Nadat u uw pictogram hebt aangepast, kunt u nu de pictogramcomponent in uw Vue-app gebruiken door de code van de component op de webpagina te kopiëren.
<template>
<Iconicon="ph: check-fill"color="red"width="500"height="500" />
template>
Het bovenstaande codeblok stelt de kleur van het pictogram in op rood. Het geeft ook aan dat de hoogte en breedte elk 500 pixels moeten zijn.
Als u een voorbeeld van de app bekijkt, krijgt u een afbeelding die lijkt op de onderstaande afbeelding:
Hoewel het toevoegen van pictogrammen aan uw applicatie met de @iconify/vue pakket is over het algemeen eenvoudig, het kan af en toe tot problemen leiden. Enkele veelvoorkomende problemen zijn problemen met pre-rendering, foutmeldingen in de Documentobjectmodel (DOM), en Vue geeft de component niet correct weer.
Deze problemen ontstaan door de timing van het montageproces van componenten in relatie tot het laden van pictogrammen. U kunt dit probleem oplossen met de unplugin-iconen bibliotheek.
Pictogrammen toevoegen met de unplugin-Icons Library
De unplugin-iconen library biedt een alternatieve, foutloze manier om pictogrammen rechtstreeks in uw sjabloon te importeren en te gebruiken.
Deze benadering van het integreren van pictogrammen lost de problemen op die zijn gemarkeerd met @iconify/vue, zodat Vue automatisch elk pictogram dat u in uw gebundelde applicatie gebruikt, opneemt.
Om aan de slag te gaan met de unplugin-iconen bibliotheek, open je terminal en installeer de bibliotheek door de volgende npm-opdracht uit te voeren:
npm install unplugin-icons
Na de installatie moet u uw build-tool configureren. Vue 3 gebruikt Vite als bouwtool. Ga naar vite.config.js en configureer het bestand zodat het er precies zo uitziet als het onderstaande codeblok:
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))
}
}
})
Het bovenstaande codeblok geeft het Vite-configuratiebestand weer. Het codefragment importeert het Pictogrammen plug-in van unplugin-icoon/vite. Het codeblok wordt vervolgens ingesteld Pictogrammen() als plug-in in de plug-ins reeks.
U kunt alle pictogrammensets installeren om uw pictogramkeuze te maximaliseren. Om alle pictogrammensets te installeren, voert u de volgende npm-opdracht uit in de terminal van de map van uw app:
npm i -D @iconify/json
De code installeert alle pictogrammensets die beschikbaar zijn voor Iconify. De installatiegrootte van dit pakket is ongeveer 200 MB. U kunt ook alleen een bepaalde pictogrammenset installeren in plaats van alle sets om de pakketgrootte te verkleinen:
npm i -D @iconify-json/ph
Het bovenstaande codefragment installeert alleen pictogrammen uit de pictogrammenset Phosphor, waarmee Iconify aangeeft tel.
Na de installatie kunt u de pictogramcomponent in uw Vue-app importeren. U moet pictogramnamen importeren met de conventie ~icons/{set}/{iconName} om de pictogrammen in uw componenten te gebruiken.
De beschrijving van de conventie voor het importeren van pictogrammen is als volgt:
- ~ pictogrammen: Het verwijst naar het pictogrampad.
- { set }: Het verwijst naar de pictogrammenset of verzameling.
- { iconNaam }: Het verwijst naar de naam van het icoon in de kebabdoos.
Hier is een voorbeeld van de import en het gebruik van de ControleerVullen pictogramcomponent:
<scriptsetup>
import CheckFill from "~icons/ph/check-fill"
script>
<template>
<CheckFillcolor="red"width="500"height="500" />
template>
Dit codefragment laat zien hoe u pictogramnamen importeert met de conventie ~icons/ph/check-fill. Het codefragment importeert het ControleerVullen icooncomponent uit de Phosphor icon set. Vervolgens stelt het de kleur-, breedte- en hoogtekenmerken van de pictogramcomponent in de Vue-sjabloon in.
Als u een voorbeeld van de toepassing uit het bovenstaande codeblok bekijkt, krijgt u dezelfde app-afbeelding als eerder.
Maak uw Vue-apps toegankelijker
Iconify is een waardevolle bibliotheek voor uw Vue-applicaties, omdat u hiermee eenvoudig pictogrammen kunt integreren in de interface van uw app. De uitgebreide pictogrammenbibliotheek van Iconify biedt betere aanpassingsmogelijkheden voor uw toepassing.
Als Vue-ontwikkelaar moet u uw webapplicaties toegankelijk maken voor alle soorten mensen. Dit komt omdat verschillende mensen verschillende manieren hebben om uw applicaties te gebruiken, bijvoorbeeld blinde en dove mensen. Leer hulpmiddelen om uw web-apps gemakkelijk toegankelijk te maken voor deze mensen.