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

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

Rishi Raj Jain
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:

Inhaltsverzeichnis

Erstellen Sie eine neue Astro-Anwendung

Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:

Terminal window
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:

Terminal window
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:

Terminal window
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:

Terminal window
# 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:

astro.config.mjs
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:

Terminal window
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.

Learn More Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte October 26, 2024
Schneller Start mit Astro 4.16
Schneller Start mit Astro 4.16 October 23, 2024