In dieser Anleitung erfahren Sie, wie Sie [Unplugin-Symbole] (https://githubcom/unplugin/unplugin-icons) in einer Astro-Anwendung mit React verwenden. Sie werden den Prozess der Einrichtung eines neuen Astro-Projekts mit React und der Konfiguration durchlaufen Entfernen Sie Symbole und nutzen Sie sie, um eine riesige Sammlung von Symbolen in Ihrer Anwendung zu nutzen
Voraussetzungen
Sie benötigen Folgendes:
- Nodejs 18 oder höher
Inhaltsverzeichnis
- Eine neue Astro-Anwendung erstellen
- React in Ihr Astro-Projekt integrieren
- Unplugin-Symbole in Ihr Astro-Projekt integrieren
- Erstellen und testen Sie Ihre Astro-Anwendung lokal
Erstellen Sie eine neue Astro-Anwendung
Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:
npm create astro@latest my-app
„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen
Wenn Sie dazu aufgefordert werden, wählen Sie:
- „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
- „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
- „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
- „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren – „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren
Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:
cd my-app
npm run dev
Die App sollte auf localhost:4321 ausgeführt werden.
Fahren wir nun mit der Integration von React in Ihre Astro-Anwendung fort
Integrieren Sie React in Ihr Astro-Projekt
Führen Sie den folgenden Befehl aus, um React in Ihr Astro-Projekt zu integrieren:
npx astro add react
„npx“ ermöglicht es uns, NPM-Paketbinärdateien auszuführen, ohne sie zuerst global installieren zu müssen
Wenn Sie dazu aufgefordert werden, wählen Sie Folgendes aus:
- „Ja“, wenn Sie gefragt werden, ob die React-Abhängigkeiten installiert werden sollen
- „Ja“, wenn Sie gefragt werden, ob Änderungen an der Astro-Konfigurationsdatei vorgenommen werden sollen
- „Ja“, wenn Sie gefragt werden, ob Änderungen an der Datei „tsconfigjson“ vorgenommen werden sollen
Kommen wir nun zur Integration von Unplugin Icons in Ihre Astro-Anwendung
Integrieren Sie Unplugin-Symbole in Ihr Astro-Projekt
Installieren Sie die Unplugin Icons-Abhängigkeiten
Führen Sie die folgenden Befehle aus, um die erforderlichen Pakete für die Verwendung von Unplugin Icons mit React in Astro zu installieren:
# unplugin-icons package for Vite compiler
npm i -D unplugin-icons
# @iconify/json package for the icons collection
npm i -D @iconify/json
# @svgr/core and @svgr/plugin-jsx packages for React compatibility
npm i -D @svgr/core @svgr/plugin-jsx
Der Befehl installiert die folgenden Bibliotheken:
- „unplugin-icons“: Ein Paket für den universellen Zugriff auf Tausende von Symbolen als Komponenten bei Bedarf
- „@iconify/json“: Eine große Sammlung von Open-Source-Vektorsymbolen, alle validiert, bereinigt und in das gleiche benutzerfreundliche Format konvertiert
- „@svgr/core“: Ein Paket zum Umwandeln von SVGs in React-Komponenten
- „@svgr/plugin-jsx“: Ein Paket zur Umwandlung von SVG in JSX
Führen Sie außerdem die folgenden Ergänzungen in „astroconfigmjs“ durch, um die Unplugin Icons-Integration zu verwenden:
// File: astro.config.mjs
import react from "@astrojs/react";
import Icons from "unplugin-icons/vite"; // [!code ++]
import { defineConfig } from "astro/config";
export default defineConfig({
integrations: [
react(),
vite: { // [!code ++]
plugins: [ // [!code ++]
Icons({ // [!code ++]
jsx: "react", // [!code ++]
compiler: "jsx", // [!code ++]
autoInstall: true, // [!code ++]
}), // [!code ++]
Icons({ // [!code ++]
compiler: "astro", // [!code ++]
autoInstall: true, // [!code ++]
}), // [!code ++]
], // [!code ++]
}, // [!code ++]
],
});
Wie aus einem GitHub-Problem gelernt wurde, ist es ratsam, beide Compiler-Modi zu verwenden, d. h. mit React und Astro. Dies ermöglicht die Verwendung von Unplugin-Symbolen in beiden React und Astro-Komponenten in Ihrer Astro-Anwendung
Erstellen Sie Typdefinitionen für Unplugin-Symbole
Um sicherzustellen, dass Sie die Typdefinitionen der Unplugin-Symbole mit React in Astro nutzen können, möchten Sie solche spezifischen Symbolimporte global als React-Komponentenimporte definieren
Aktualisieren Sie dazu die „envdts“ im Verzeichnis „src“ mit dem folgenden Code:
/// <reference types="astro/client" />
declare module "virtual:icons/*" { // [!code ++]
import type { SVGProps } from "react"; // [!code ++]
import type React from "react"; // [!code ++]
const component: (props: SVGProps<SVGSVGElement>) => React.ReactElement; // [!code ++]
export default component; // [!code ++]
} // [!code ++]
Der obige Code markiert einfach jeden über „virtual:icons“ durchgeführten Import, damit er als React-Komponenten in Ihrer Astro-Anwendung berücksichtigt wird### Verwenden Sie Unplugin-Symbole in der Indexroute
Importieren Sie abschließend das Symbol und verwenden Sie es in Ihrer Astro- (oder React-)Komponente mit dem folgenden Code:
---
import MdiAlarmOff from "virtual:icons/mdi/alarm-off"; // [!code ++]
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
<MdiAlarmOff client:load /> // [!code ++]
</body>
</html>
Der obige Code importiert ein Symbol als React-Komponente in die Indexroute
Jetzt sind Sie fertig!
Erstellen und testen Sie Ihre Astro-Anwendung lokal
Um die Anwendung zu testen, bereiten Sie einen Build vor und führen Sie den Vorschauserver mit dem folgenden Befehl aus:
npm run build && npm run preview
Abschluss
In dieser Anleitung haben Sie gelernt, wie Sie Unplugin Icons mit React in einer Astro-Anwendung verwenden
Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.