Verwenden von Unplugin-Symbolen in SvelteKit: Eine Schritt-für-Schritt-Anleitung

In dieser Anleitung erfahren Sie, wie Sie [Unplugin-Symbole] (https://githubcom/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 oder höher

Inhaltsverzeichnis

Eine neue SvelteKit-Anwendung erstellen
Unplugin-Symbole in Ihr SvelteKit-Projekt integrieren
Erstellen und testen Sie Ihre SvelteKit-Anwendung lokal

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:

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:

cd my-app
npm install
npm run dev

Die App sollte auf 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:

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

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:

{
  "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:

<script lang="ts">
  import TwitterIcon from '~icons/devicon/twitter' // [!code ++] // [!code focus]
</script>

<TwitterIcon /> // [!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:

npm run build && npm run preview

Abschluss

In dieser Anleitung haben Sie gelernt, wie Sie Unplugin-Symbole in einer SvelteKit-Anwendung verwenden

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.