Verwenden von Unplugin-Symbolen in Next.js: Eine Schritt-für-Schritt-Anleitung

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

Inhaltsverzeichnis

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

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:

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:

cd my-app
npm run dev

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

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

// File: next.config.mjs

import unpluginIcons from 'unplugin-icons/webpack' // [!code ++]

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) { // [!code ++]
    config.plugins.push( // [!code ++]
      unpluginIcons({ // [!code ++]
        compiler: 'jsx', // [!code ++]
        jsx: 'react', // [!code ++]
      }), // [!code ++]
    ) // [!code ++]
    return config // [!code ++]
  }, // [!code ++]
}

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:

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

import ClockIcon from '~icons/mdi/clock'

export default function Home() {
  return (
    <ClockIcon />
  );
}

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:

npm run build && npm run start

Abschluss

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

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