Was ist Iconify und wie integriert man es in Vue-Apps?

Die besten Webanwendungen sind eigentlich eine Sammlung von Texten und Bildern. Abgesehen von dem ästhetischen Eindruck, den Bilder einer Web-App verleihen, liefern sie auch visuelle Hinweise und steigern das Interesse der Benutzer an der Anwendung.

Iconify ist ein Icon-Framework, das eine große Sammlung SVG-gerenderter Icons aus verschiedenen Icon-Paketen bereitstellt, darunter Bootstrap- und Material Design-Icons. Iconify unterstützt verschiedene Front-End-JavaScript-Frameworks und ist somit eine vielseitige Lösung zum Hinzufügen von Symbolen zu Ihren Web-Apps.

So integrieren Sie Iconify in Ihre Vue-Anwendung

Sie können Iconify in Ihrer Vue-Anwendung mit dem nutzen @iconify/vue npm-Paket. Dieses npm-Paket ist eine Vue-Integration für das Iconify-Icon-Framework.

@iconify/vue bietet eine nahtlose Möglichkeit, Symbole in Vue-Apps zu verwenden. Mit diesem Paket können Sie Ihrem Projekt schnell Symbole hinzufügen und anpassen. Installieren

@iconify/vue Führen Sie in Ihrer Vue-Anwendung den folgenden npm-Befehl im Terminal des Stammverzeichnisses Ihrer App aus:

npm install --save-dev @iconify/vue

Dieser Befehl installiert die @iconify/vue Paket als Entwicklungsabhängigkeit in Ihrer Vue-Anwendung.

Dieses Paket funktioniert nur für Vue 3-Anwendungen, die Sie zur Weiterverfolgung dieses Artikels benötigen. Das Paket unterstützt keine Vue 2-Anwendungen. Um Iconify jedoch in Vue 2 zu verwenden, führen Sie den folgenden npm-Befehl aus:

npm install @iconify/vue2

Da Vue 2 ab dem 31. Dezember 2023 nicht mehr verwaltet wird, sollten Sie sich mit der Nutzung von Vue 3 und seinen Funktionen vertraut machen. Dadurch soll sichergestellt werden, dass Sie in der Vue-Community auf dem neuesten Stand und relevant bleiben.

So fügen Sie Symbole zu Ihren Vue-Komponenten hinzu

Sie können Symbole hinzufügen, indem Sie die importieren Symbol Komponente aus dem Paket in Ihren Vue-Komponenten. Um Symbole hinzuzufügen, fügen Sie den folgenden Code in den Skriptblock der Vue-Komponente ein:

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

Nach diesem Schritt können Sie auf alle Symbole in der Iconify-Bibliothek zugreifen. Um ein Symbol hinzuzufügen, gehen Sie zu Ikonifizieren Webseite. Beim Navigieren zur Website geben Sie den Namen des Symbols ein, das Sie in Ihrer Anwendung benötigen.

Das folgende Bild zeigt Ihnen die Suchergebnisse für ein Häkchensymbol.

Sie können dann den Stil des gewünschten Häkchensymbols auswählen, indem Sie auf das Symbol klicken. Sie können Ihre Symbole weiter anpassen, indem Sie Folgendes bereitstellen Farbe, Größe, Umdrehen, Und Drehen Felder.

Mit diesen Feldern können Sie die gewünschte Farbe, Größe, Position und Ausrichtung Ihres Symbols angeben. Nachdem Sie Ihr Symbol angepasst haben, können Sie die Symbolkomponente nun in Ihrer Vue-App verwenden, indem Sie den Code der Komponente auf der Webseite kopieren.

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

Der obige Codeblock setzt die Farbe des Symbols auf Rot. Außerdem wird die Höhe und Breite auf jeweils 500 Pixel festgelegt.

Wenn Sie eine Vorschau der App anzeigen, erhalten Sie ein Bild, das dem Bild unten ähnelt:

Obwohl das Hinzufügen von Symbolen zu Ihrer Anwendung mit dem @iconify/vue Obwohl das Paket im Allgemeinen unkompliziert ist, kann es gelegentlich zu Problemen kommen. Zu den häufigen Problemen gehören Pre-Rendering-Probleme und Fehlermeldungen im Dokumentobjektmodell (DOM)und Vue rendert die Komponente nicht richtig.

Diese Probleme entstehen durch den zeitlichen Ablauf des Komponentenmontageprozesses im Verhältnis zum Laden der Symbole. Sie können dieses Problem mit dem lösen Unplugin-Symbole Bibliothek.

Hinzufügen von Symbolen mit der Unplugin-Icons-Bibliothek

Der Unplugin-Symbole Die Bibliothek bietet eine alternative, fehlerfreie Möglichkeit, Symbole direkt in Ihre Vorlage zu importieren und zu verwenden.

Dieser Ansatz der Integration von Symbolen löst die hervorgehobenen Probleme @iconify/vueDadurch wird sichergestellt, dass Vue jedes von Ihnen verwendete Symbol automatisch in Ihre gebündelte Anwendung einbezieht.

Um mit dem zu beginnen Unplugin-Symbole Bibliothek, öffnen Sie Ihr Terminal und installieren Sie die Bibliothek, indem Sie den folgenden npm-Befehl ausführen:

npm install unplugin-icons

Nach der Installation müssen Sie Ihr Build-Tool konfigurieren. Vue 3 verwendet Vite als Build-Tool. Gehen Sie zu vite.config.js und konfigurieren Sie die Datei so, dass sie genau wie der folgende Codeblock aussieht:

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

Der obige Codeblock zeigt die Vite-Konfigurationsdatei. Das Code-Snippet importiert die Symbole Plugin von unplugin-icon/vite. Der Codeblock wird dann festgelegt Symbole() als Plugin im Plugins Array.

Sie können alle Symbolsätze installieren, um die Auswahl an Symbolen zu maximieren. Um alle Symbolsätze zu installieren, führen Sie den folgenden npm-Befehl im Terminal Ihres App-Verzeichnisses aus:

npm i -D @iconify/json

Der Code installiert alle für Iconify verfügbaren Symbolsätze. Die Installationsgröße dieses Pakets beträgt etwa 200 MB. Sie können statt aller Sätze auch nur einen bestimmten Symbolsatz installieren, um die Paketgröße zu reduzieren:

npm i -D @iconify-json/ph

Der obige Codeausschnitt installiert nur Icons aus dem Phosphor-Icon-Set, das Iconify mit bezeichnet ph.

Nach der Installation können Sie die Symbolkomponente in Ihre Vue-App importieren. Sie müssen Symbolnamen gemäß der Konvention importieren ~icons/{set}/{iconName} um die Symbole in Ihren Komponenten zu verwenden.

Die Beschreibung der Konvention zum Importieren von Symbolen lautet wie folgt:

• ~Symbole: Es bezieht sich auf den Symbolpfad.
• { Satz }: Es bezieht sich auf den Symbolsatz oder die Sammlung.
• { Symbolname }: Es bezieht sich auf den Namen des Symbols im Kebab-Fall.

Hier ist ein Beispiel, das den Import und die Verwendung von zeigt CheckFill Symbolkomponente:

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

Dieser Codeausschnitt zeigt, wie Symbolnamen mit der Konvention importiert werden ~icons/ph/check-fill. Das Code-Snippet importiert die CheckFill Symbolkomponente aus dem Phosphor-Symbolsatz. Anschließend werden die Farb-, Breiten- und Höhenattribute der Symbolkomponente in der Vue-Vorlage festgelegt.

Die Vorschau der Anwendung aus dem obigen Codeblock führt zu demselben App-Bild wie zuvor.

Machen Sie Ihre Vue-Apps zugänglicher

Iconify ist eine wertvolle Bibliothek für Ihre Vue-Anwendungen, da Sie damit problemlos Symbole in die Benutzeroberfläche Ihrer App integrieren können. Die umfangreiche Symbolbibliothek von Iconify bietet bessere Anpassungsoptionen für Ihre Anwendung.

Als Vue-Entwickler müssen Sie Ihre Webanwendungen für alle Arten von Menschen zugänglich machen. Dies liegt daran, dass verschiedene Menschen Ihre Anwendungen auf unterschiedliche Weise nutzen können, beispielsweise blinde und gehörlose Menschen. Lernen Sie Tools kennen, mit denen Sie Ihre Web-Apps für diese Personen leicht zugänglich machen.