---
title: "Uso de Unplugin Icons en Next.js: importa cualquier icono"
description: "Guía paso a paso para instalar y usar Unplugin Icons en Next.js e importar iconos SVG de cualquier colección, bajo demanda."
source: "https://www.launchfa.st/es/blog/nextjs-unplugin-icons"
author: "Rishi Raj Jain"
created_at: 2024-06-09T00:00:00.000Z
---
> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.
En esta guía, aprenderá a usar [Unplugin Icons](https://github.com/unplugin/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
## Requisitos previos
Necesitará lo siguiente:
- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
## Tabla de contenido
- [Crear una nueva aplicación Nextjs](#crear-una-nueva-aplicación-nextjs)
- [Integrar iconos Unplugin en tu proyecto Nextjs](#integrar iconos-unplugin-en-tu-proyecto-nextjs)
- [Instalar las dependencias de Unplugin Icons](#instalar-las-dependencias-de-unplugin-icons)
- [Incluir definiciones de tipo para iconos de desconexión](#include-type-definitions-for-unplugin-icons)
- [Usar iconos de desconexión en la ruta de índice](#use-iconos-de-unplugin-en-la-ruta-de-índice)
- [Construya y pruebe su aplicación Nextjs localmente](#construya-y-pruebe-su-aplicación-nextjs-localmente)
## Crea una nueva aplicación Nextjs
Comencemos creando un nuevo proyecto Nextjs. Abra su terminal y ejecute el siguiente comando:
```bash
npx create-next-app@latest my-app
```
Cuando se le solicite, elija:
- `Sí` cuando se le solicite usar TypeScript
- `No` cuando se le solicita usar ESLint
- `Sí` cuando se le solicite usar Tailwind CSS
- `No` cuando se le solicita usar el directorio `src/`
- `Sí` 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:
```bash
cd my-app
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:3000](http://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:
```bash
# 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:
```tsx ins={3,7-15}
// File: 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:
```json
{
"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:
```tsx
import ClockIcon from '~icons/mdi/clock'
export default function Home() {
return (
);
}
```
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:
```bash
npm run build && npm run start
```
## Conclusión
En esta guía, aprendió cómo usar Unplugin Icons en una aplicación Next.js.
¿Usas otro framework? Consulta nuestras guías sobre [Unplugin Icons en SvelteKit](/es/blog/sveltekit-unplugin-icons) o [Unplugin Icons en Astro con React](/es/blog/react-astro-unplugin-icons).
Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_)