Uso de iconos de desconexión en Next.js: una guía paso a paso

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

LaunchFast Logo LaunchFast

Uso de iconos de desconexión en Next.js: una guía paso a paso

Rishi Raj Jain
Using Unplugin Icons in Next.js

En esta guía, aprenderá a usar Unplugin Icons en una aplicación Nextjs. Pasará por el proceso de configuración de un nuevo proyecto Nextjs, configurará Unplugin Icons y usarlos para aprovechar una gran colección de íconos en su aplicación

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Requisitos previos

Necesitará lo siguiente:

Tabla de contenido

Crea una nueva aplicación Nextjs

Comencemos creando un nuevo proyecto Nextjs. Abra su terminal y ejecute el siguiente comando:

Terminal window
npx create-next-app@latest my-app

Cuando se le solicite, elija:

  • cuando se le solicite usar TypeScript
  • No cuando se le solicita usar ESLint
  • cuando se le solicite usar Tailwind CSS
  • No cuando se le solicita usar el directorio src/
  • cuando se le solicite usar App Router
  • No cuando se le solicite personalizar el alias de importación predeterminado (@/*)

Una vez hecho esto, vaya al directorio del proyecto e inicie la aplicación en modo de desarrollo ejecutando el siguiente comando:

Terminal window
cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:3000 Ahora, cerremos el servidor de desarrollo para instalar Unplugin Icons

Integre iconos Unplugin en su proyecto Nextjs

Instalar las dependencias de Unplugin Icons

Ejecute los siguientes comandos para instalar los paquetes necesarios para usar Unplugin Icons en Nextjs:

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

El comando instala las siguientes bibliotecas:

  • unplugin-icons: un paquete para acceder a miles de iconos como componentes bajo demanda de forma universal
  • @iconify/json: una gran colección de íconos vectoriales de código abierto, todos validados, limpiados y convertidos al mismo formato fácil de usar.
  • @svgr/core: Un paquete para transformar SVG en componentes de React
  • @svgr/plugin-jsx: Un paquete para transformar SVG en JSX

Además, realice las siguientes adiciones en nextconfigmjs para usar la integración de Unplugin Icons:

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

Incluir definiciones de tipo para iconos de desconexión

Para asegurarse de que puede aprovechar las definiciones de tipo de los íconos de Unplugin en Nextjs, querrá definir globalmente importaciones de íconos específicas como importaciones de componentes de React. Para hacerlo, actualice el archivo tsconfigjson con el siguiente código:

{
"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"]
}

El código anterior simplemente marca cada importación desde ~icons para ser considerada como un componente de React en su aplicación Nextjs.

Utilice iconos de desconexión en la ruta de índice

Finalmente, importa el ícono y úsalo en tu ruta de índice Nextjs con el siguiente código:

import ClockIcon from '~icons/mdi/clock'
export default function Home() {
return (
<ClockIcon />
);
}

El código anterior importa un ícono como componente de React en la ruta de índice

¡Ya terminaste!

Cree y pruebe su aplicación Nextjs localmente

Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando:

Terminal window
npm run build && npm run start

Conclusión

En esta guía, aprendió cómo usar iconos de desconexión en una aplicación Nextjs.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter

Learn More Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024 October 30, 2024
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones October 26, 2024