Verwenden von Unplugin-Symbolen in Astro mit React: Eine Schritt-für-Schritt-Anleitung

In dieser Anleitung erfahren Sie, wie Sie [Unplugin-Symbole] (https://github.com/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
  • Installieren Sie die Unplugin-Icons-Abhängigkeiten
  • Typdefinitionen für Unplugin-Symbole erstellen
  • Unplugin-Symbole in der Indexroute verwenden
• 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:

import react from "@astrojs/react";
import Icons from "unplugin-icons/vite"; // [!code ++] // [!code focus]
import { defineConfig } from "astro/config";

export default defineConfig({
  integrations: [
    react(),
    vite: { // [!code ++] // [!code focus]
        plugins: [ // [!code ++] // [!code focus]
            Icons({ // [!code ++] // [!code focus]
                jsx: "react", // [!code ++] // [!code focus]
                compiler: "jsx", // [!code ++] // [!code focus]
                autoInstall: true, // [!code ++] // [!code focus]
            }), // [!code ++] // [!code focus]
            Icons({ // [!code ++] // [!code focus]
                compiler: "astro", // [!code ++] // [!code focus]
                autoInstall: true, // [!code ++] // [!code focus]
            }), // [!code ++] // [!code focus]
        ], // [!code ++] // [!code focus]
    }, // [!code ++] // [!code focus]
  ],
});

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 ++] // [!code focus]
    import type { SVGProps } from "react"; // [!code ++] // [!code focus]
    import type React from "react"; // [!code ++] // [!code focus]
    const component: (props: SVGProps<SVGSVGElement>) => React.ReactElement; // [!code ++] // [!code focus]
    export default component; // [!code ++] // [!code focus]
} // [!code ++] // [!code focus]

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 ++] // [!code focus]
---

<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 ++] // [!code focus]
  </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.