--- title: "Unplugin Icons in Next.js verwenden: jedes Icon automatisch importieren" description: "Schritt-für-Schritt-Anleitung zur Installation und Nutzung von Unplugin Icons in Next.js, um SVG-Icons aus jeder Sammlung bei Bedarf zu importieren." source: "https://www.launchfa.st/de/blog/nextjs-unplugin-icons" author: "Rishi Raj Jain" created_at: 2024-06-09T00: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 Next.js In dieser Anleitung erfahren Sie, wie Sie [Unplugin-Symbole] (https://github.com/unplugin/unplugin-icons) in einer Nextjs-Anwendung verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Nextjs-Projekts, der Konfiguration von Unplugin-Symbolen usw Verwenden 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 Nextjs-Anwendung erstellen](#create-a-new-nextjs-application) - [Unplugin-Symbole in Ihr Nextjs-Projekt integrieren](#integrate-unplugin-icons-in-your-nextjs-project) - [Installieren Sie die Unplugin-Icons-Abhängigkeiten](#install-the-unplugin-icons-dependencies) - [Typdefinitionen für Unplugin-Symbole einschließen](#include-type-definitions-for-unplugin-icons) - [Unplugin-Symbole in der Indexroute verwenden](#use-unplugin-icons-in-the-index-route) - [Erstellen und testen Sie Ihre Nextjs-Anwendung lokal](#build-and-test-your-nextjs-application-locally) ## Erstellen Sie eine neue Nextjs-Anwendung Beginnen wir mit der Erstellung eines neuen Nextjs-Projekts. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus: ```bash npx create-next-app@latest my-app ``` Wenn Sie dazu aufgefordert werden, wählen Sie: - „Ja“, wenn Sie aufgefordert werden, TypeScript zu verwenden - „Nein“, wenn Sie aufgefordert werden, ESLint zu verwenden - „Ja“, wenn Sie aufgefordert werden, Tailwind CSS zu verwenden - „Nein“, wenn Sie aufgefordert werden, das Verzeichnis „src/“ zu verwenden - „Ja“, wenn Sie aufgefordert werden, App Router zu verwenden - „Nein“, wenn Sie aufgefordert werden, den Standard-Importalias („@/*“) anzupassen. Sobald dies erledigt ist, wechseln Sie in das Projektverzeichnis und starten Sie die App im Entwicklungsmodus, indem Sie den folgenden Befehl ausführen: ```bash cd my-app npm run dev ``` Die App sollte auf [localhost:3000](http://localhost:3000/) laufen. Schließen wir nun den Entwicklungsserver, um Unplugin Icons zu installieren ## Integrieren Sie Unplugin-Symbole in Ihr Nextjs-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 in Nextjs zu installieren: ```bash # unplugin-icons package for Webpack 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 „nextconfigmjs“ durch, um die Unplugin Icons-Integration zu verwenden: ```tsx ins={3,7-15} // File: next.config.mjs import unpluginIcons from 'unplugin-icons/webpack' /** @type {import('next').NextConfig} */ const nextConfig = { webpack(config) { config.plugins.push( unpluginIcons({ compiler: 'jsx', jsx: 'react', }), ) return config }, } export default nextConfig ``` ### Typdefinitionen für Unplugin-Symbole einschließen Um sicherzustellen, dass Sie die Typdefinitionen der Unplugin-Symbole in Nextjs nutzen können, möchten Sie solche spezifischen Symbolimporte global als React-Komponentenimporte definieren. Aktualisieren Sie dazu die Datei „tsconfigjson“ mit dem folgenden Code: ```json { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "types": ["unplugin-icons/types/react"], // [!code ++] // [!code focus] "jsx": "preserve", "incremental": true, "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } ``` Der obige Code markiert einfach jeden Import aus „~icons“ als React-Komponente in Ihrer Nextjs-Anwendung ### Verwenden Sie Unplugin-Symbole in der Indexroute Importieren Sie abschließend das Symbol und verwenden Sie es in Ihrer Nextjs-Indexroute mit dem folgenden Code: ```tsx import ClockIcon from '~icons/mdi/clock' export default function Home() { return ( ); } ``` Der obige Code importiert ein Symbol als React-Komponente in die Indexroute Jetzt sind Sie fertig! ## Erstellen und testen Sie Ihre Nextjs-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 start ``` ## Abschluss In dieser Anleitung haben Sie gelernt, wie Sie Unplugin Icons in einer Next.js-Anwendung verwenden Arbeiten Sie mit einem anderen Framework? Sehen Sie sich unsere Anleitungen zu [Unplugin Icons in SvelteKit](/de/blog/sveltekit-unplugin-icons) oder [Unplugin Icons in Astro mit React](/de/blog/react-astro-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_).