--- title: "SVG-Icons in Astro mit React über Unplugin Icons importieren" description: "So importierst du SVG-Icons bei Bedarf in einer Astro-App mit React mithilfe von Unplugin Icons, Schritt für Schritt." source: "https://www.launchfa.st/de/blog/react-astro-unplugin-icons" author: "Rishi Raj Jain" created_at: 2024-06-05T00:00:00.000Z --- > **Site index for agents** > Fetch https://www.launchfa.st/llms.txt to discover every page on this site. > Every page is also available as Markdown by appending `.md` to its URL. Using Unplugin Icons in Astro with React 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](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher ## Inhaltsverzeichnis - [Eine neue Astro-Anwendung erstellen](#create-a-new-astro-application) - [React in Ihr Astro-Projekt integrieren](#integrate-react-in-your-astro-project) - [Unplugin-Symbole in Ihr Astro-Projekt integrieren](#integrate-unplugin-icons-in-your-astro-project) - [Installieren Sie die Unplugin-Icons-Abhängigkeiten](#install-the-unplugin-icons-dependencies) - [Typdefinitionen für Unplugin-Symbole erstellen](#create-type-definitions-for-unplugin-icons) - [Unplugin-Symbole in der Indexroute verwenden](#use-unplugin-icons-in-the-index-route) - [Erstellen und testen Sie Ihre Astro-Anwendung lokal](#build-and-test-your-astro-application-locally) ## Erstellen Sie eine neue Astro-Anwendung Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus: ```bash 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: ```bash cd my-app npm run dev ``` Die App sollte auf [localhost:4321](http://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: ```bash 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: ```bash # 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: ```tsx // File: 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](https://github.com/unplugin/unplugin-icons/issues/253) 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: ```tsx /// 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) => 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: ```astro --- import MdiAlarmOff from "virtual:icons/mdi/alarm-off"; // [!code ++] // [!code focus] --- Astro

Astro

// [!code ++] // [!code focus] ``` 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: ```bash npm run build && npm run preview ``` ## Abschluss In dieser Anleitung haben Sie gelernt, wie Sie Unplugin Icons mit React in einer Astro-Anwendung verwenden Nutzen Sie einen anderen Stack? Sehen Sie sich unsere Anleitung zu [Unplugin Icons in Next.js](/de/blog/nextjs-unplugin-icons) an. Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_).