--- title: "SVG-Icons in SvelteKit mit Unplugin Icons automatisch importieren" description: "So importierst du SVG-Icons bei Bedarf in einer SvelteKit-App mit Unplugin Icons, inklusive Einrichtung und Beispielen." source: "https://www.launchfa.st/de/blog/sveltekit-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 SvelteKit In dieser Anleitung erfahren Sie, wie Sie [Unplugin-Symbole] (https://github.com/unplugin/unplugin-icons) in einer SvelteKit-Anwendung verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen SvelteKit-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 SvelteKit-Anwendung erstellen](#create-a-new-sveltekit-application) - [Unplugin-Symbole in Ihr SvelteKit-Projekt integrieren](#integrate-unplugin-icons-in-your-sveltekit-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 SvelteKit-Anwendung lokal](#build-and-test-your-sveltekit-application-locally) ## Erstellen Sie eine neue SvelteKit-Anwendung Beginnen wir mit der Erstellung eines neuen SvelteKit-Projekts. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus: ```bash npm create svelte@latest my-app ``` „npm create svelte“ ist die empfohlene Methode, um schnell ein SvelteKit-Projekt zu erstellen Wenn Sie dazu aufgefordert werden, wählen Sie: - „SvelteKit-Demo-App“, wenn Sie aufgefordert werden, die App-Vorlage auszuwählen – „Ja, TypeScript-Syntax verwenden“, wenn Sie aufgefordert werden, die Typprüfung mit TypeScript hinzuzufügen - „Fügen Sie Prettier für die Codeformatierung hinzu“, wenn Sie aufgefordert werden, zusätzliche Optionen auszuwählen Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln, die Abhängigkeiten installieren und die App starten: ```bash cd my-app npm install npm run dev ``` Die App sollte auf [localhost:5173](http://localhost:5173/) laufen. Schließen wir nun den Entwicklungsserver, um Unplugin Icons zu installieren ## Integrieren Sie Unplugin-Symbole in Ihr SvelteKit-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 SvelteKit 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 ``` 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 Führen Sie außerdem die folgenden Ergänzungen in „viteconfigts“ durch, um die Unplugin Icons-Integration zu verwenden: ```tsx // File: vite.config.ts import { defineConfig } from 'vite' import Icons from 'unplugin-icons/vite' // [!code ++] // [!code focus] import { sveltekit } from '@sveltejs/kit/vite' export default defineConfig({ plugins: [ sveltekit(), Icons({ // [!code ++] // [!code focus] compiler: 'svelte', // [!code ++] // [!code focus] }), // [!code ++] // [!code focus] ], }) ``` ### Typdefinitionen für Unplugin-Symbole einschließen Um sicherzustellen, dass Sie die Typdefinitionen der Unplugin-Symbole in SvelteKit nutzen können, sollten Sie solche spezifischen Symbolimporte global als Svelte-Komponentenimporte definieren. Aktualisieren Sie dazu die Datei „tsconfigjson“ mit dem folgenden Code: ```json { "extends": "./.svelte-kit/tsconfig.json", "compilerOptions": { "types": ["unplugin-icons/types/svelte"], // [!code ++] // [!code focus] "allowJs": true, "checkJs": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "skipLibCheck": true, "sourceMap": true, "strict": true } // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias // // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes // from the referenced tsconfig.json - TypeScript does not merge them in } ``` Der obige Code markiert einfach jeden Import aus „~icons“ als Svelte-Komponente in Ihrer SvelteKit-Anwendung ### Verwenden Sie Unplugin-Symbole in der Indexroute Importieren Sie abschließend das Symbol und verwenden Sie es in Ihrer SvelteKit-Indexroute mit dem folgenden Code: ```svelte // [!code ++] // [!code focus] ``` Der obige Code importiert ein Symbol als Svelte-Komponente in die Indexroute Jetzt sind Sie fertig! ## Erstellen und testen Sie Ihre SvelteKit-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 in einer SvelteKit-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_).