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

Using Unplugin Icons in Astro with React

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:

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.