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

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 oder höher

Inhaltsverzeichnis

• Eine neue Nextjs-Anwendung erstellen
• Unplugin-Symbole in Ihr Nextjs-Projekt integrieren
  • Installieren Sie die Unplugin-Icons-Abhängigkeiten
  • Typdefinitionen für Unplugin-Symbole einschließen
  • Unplugin-Symbole in der Indexroute verwenden
• 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:

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:

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

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.