Qu'est-ce qu'Iconify et comment l'intégrer dans les applications Vue ?

Les meilleures applications Web sont en fait une collection de texte et d'images. Outre le sentiment esthétique que les images procurent à une application Web, elles fournissent également des repères visuels et améliorent l'intérêt des utilisateurs pour l'application.

Iconify est un framework d'icônes fournissant une large collection d'icônes au rendu SVG à partir de divers packs d'icônes, y compris les icônes Bootstrap et Material Design. Iconify prend en charge différents frameworks JavaScript frontaux, ce qui en fait une solution polyvalente pour ajouter des icônes à vos applications Web.

Comment intégrer Iconify dans votre application Vue

Vous pouvez tirer parti d'Iconify dans votre application Vue avec le @iconify/vue paquet npm. Ce package npm est une intégration Vue pour le framework d'icônes Iconify.

@iconify/vue fournit un moyen transparent d'utiliser des icônes dans les applications Vue. Ce package vous permet d'ajouter et de personnaliser rapidement des icônes dans votre projet. À installer

@iconify/vue dans votre application Vue, exécutez la commande npm suivante dans le terminal du répertoire racine de votre application :

npm install --save-dev @iconify/vue

Cette commande installe le @iconify/vue paquet comme un dépendance au développement dans votre application Vue.

Ce package ne fonctionnera que pour les applications Vue 3 dont vous avez besoin pour suivre cet article. Le package ne prend pas en charge les applications Vue 2. Cependant, pour utiliser Iconify dans Vue 2, exécutez la commande npm suivante :

npm install @iconify/vue2

Vu que Vue 2 ne sera plus géré à partir du 31 décembre 2023, vous devez apprendre à utiliser Vue 3 et ses fonctionnalités. Ceci afin de vous assurer de rester à jour et pertinent dans la communauté Vue.

Comment ajouter des icônes à vos composants Vue

Vous pouvez ajouter des icônes en important le Icône composant du package dans vos composants Vue. Pour ajouter des icônes, collez le code suivant dans le bloc de script du composant Vue :

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

Après cette étape, vous pouvez accéder à toutes les icônes de la bibliothèque Iconify. Pour ajouter une icône, rendez-vous sur Iconifier site Internet. En naviguant sur le site Web, vous saisirez le nom de l'icône dont vous avez besoin dans votre application.

L'image suivante vous montre les résultats de la recherche d'une icône de vérification.

Vous pouvez ensuite choisir le style de l'icône de vérification dont vous avez besoin en cliquant sur l'icône. Vous pouvez personnaliser davantage vos icônes en fournissant le Couleur, Taille, Retourner, et Tourner des champs.

Avec ces champs, vous pouvez spécifier la couleur, la taille, la position et l'orientation requises pour votre icône. Après avoir personnalisé votre icône, vous pouvez maintenant utiliser le composant d'icône dans votre application Vue en copiant le code du composant sur la page Web.

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

Le bloc de code ci-dessus définit la couleur de l'icône sur rouge. Il spécifie également la hauteur et la largeur à 500 pixels chacune.

En prévisualisant l'application, vous obtiendrez une image similaire à l'image ci-dessous :

Bien que l'ajout d'icônes à votre application avec le @iconify/vue package est généralement simple, il peut parfois entraîner des problèmes. Certains problèmes courants incluent des problèmes de pré-rendu, des messages d'erreur dans le Modèle d'objet de document (DOM), et Vue ne rend pas le composant correctement.

Ces problèmes surviennent en raison de la synchronisation du processus de montage des composants par rapport au chargement des icônes. Vous pouvez résoudre ce problème avec le débrancher-icônes bibliothèque.

Ajout d'icônes avec la bibliothèque unplugin-Icons

Le débrancher-icônes La bibliothèque offre un moyen alternatif et sans erreur d'importer et d'utiliser des icônes directement dans votre modèle.

Cette approche d'intégration d'icônes résout les problèmes mis en évidence avec @iconify/vue, garantissant que Vue inclura automatiquement chaque icône que vous utilisez dans votre application groupée.

Pour commencer avec le débrancher-icônes bibliothèque, ouvrez votre terminal et installez la bibliothèque en exécutant la commande npm suivante :

npm install unplugin-icons

Après l'installation, vous devez configurer votre outil de génération. Utilisations de Vue 3 Vite comme outil de construction. Se diriger vers vite.config.js et configurez le fichier pour qu'il ressemble exactement au bloc de code ci-dessous :

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

Le bloc de code ci-dessus décrit le fichier de configuration Vite. L'extrait de code importe le Icônes plug-in de icône de débranchement/vite. Le bloc de code définit alors Icônes() en tant que plugin dans le plugins déployer.

Vous pouvez installer tous les jeux d'icônes pour maximiser votre choix d'icônes. Pour installer tous les jeux d'icônes, exécutez la commande npm suivante dans le terminal du répertoire de votre application :

npm i -D @iconify/json

Le code installe tous les jeux d'icônes disponibles pour Iconify. La taille d'installation de ce package est d'environ 200 Mo. Vous pouvez également installer uniquement un jeu d'icônes particulier au lieu de tous les jeux pour réduire la taille du package :

npm i -D @iconify-json/ph

L'extrait de code ci-dessus installe uniquement les icônes du jeu d'icônes Phosphor, que Iconify désigne par pH.

Après l'installation, vous pouvez importer le composant d'icône dans votre application Vue. Vous devez importer les noms d'icônes avec la convention ~icons/{set}/{iconName} pour utiliser les icônes dans vos composants.

La description de la convention pour importer des icônes est la suivante :

• ~ icônes: Il fait référence au chemin de l'icône.
• { ensemble }: Il fait référence au jeu d'icônes ou à la collection.
• { nom de l'icône }: Il fait référence au nom de l'icône dans le kebab-case.

Voici un exemple montrant l'importation et l'utilisation du VérifierRemplir composant d'icône :

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

Cet extrait de code montre comment importer des noms d'icônes avec la convention ~icons/ph/vérifier-remplir. L'extrait de code importe le VérifierRemplir composant d'icône du jeu d'icônes Phosphor. Il définit ensuite les attributs de couleur, de largeur et de hauteur du composant d'icône dans le modèle Vue.

La prévisualisation de l'application à partir du bloc de code ci-dessus se traduira par la même image d'application que celle vue précédemment.

Rendez vos applications Vue plus accessibles

Iconify est une bibliothèque précieuse pour vos applications Vue car elle vous permet d'intégrer facilement des icônes dans l'interface de votre application. La vaste bibliothèque d'icônes d'Iconify offre de meilleures options de personnalisation pour votre application.

En tant que développeur Vue, vous devez rendre vos applications Web accessibles à tous les types de personnes. En effet, différentes personnes ont différentes manières d'utiliser vos applications, par exemple, les personnes aveugles et sourdes. Découvrez des outils pour rendre vos applications Web facilement accessibles à ces personnes.