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

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

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

Rishi Raj Jain
Using Unplugin Icons in Next.js

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

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Voraussetzungen

Sie benötigen Folgendes:

Inhaltsverzeichnis

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:

Terminal window
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:

Terminal window
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:

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

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:

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

Terminal window
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.

Learn More Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte October 26, 2024