---
title: "Importa iconos SVG en SvelteKit con Unplugin Icons"
description: "Cómo importar iconos SVG bajo demanda en una app SvelteKit usando Unplugin Icons, con configuración y ejemplos completos."
source: "https://www.launchfa.st/es/blog/sveltekit-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 SvelteKit. Pasará por el proceso de configuración de un nuevo proyecto SvelteKit, 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 SvelteKit](#crea-una-nueva-aplicación-sveltekit)
- [Integre iconos Unplugin en su proyecto SvelteKit] (#integre-iconos-unplugin-en-su-proyecto-sveltekit)
- [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 SvelteKit localmente](#construya-y-pruebe-su-aplicación-sveltekit-localmente)
## Crea una nueva aplicación SvelteKit
Comencemos creando un nuevo proyecto SvelteKit. Abra su terminal y ejecute el siguiente comando:
```bash
npm create svelte@latest my-app
```
`npm create svelte` es la forma recomendada de desarrollar rápidamente un proyecto SvelteKit
Cuando se le solicite, elija:
- `Aplicación de demostración SvelteKit` cuando se le solicita que seleccione la plantilla de la aplicación
- `Sí, usando la sintaxis de TypeScript` cuando se le solicite agregar verificación de tipo con TypeScript
- `Agregar Prettier para formatear código` cuando se le solicite seleccionar opciones adicionales
Una vez hecho esto, puede ir al directorio del proyecto, instalar las dependencias e iniciar la aplicación:
```bash
cd my-app
npm install
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:5173](http://localhost:5173/) Ahora, cerremos el servidor de desarrollo para instalar Unplugin Icons
## Integre iconos Unplugin en su proyecto SvelteKit
### Instalar las dependencias de Unplugin Icons
Ejecute los siguientes comandos para instalar los paquetes necesarios para usar Unplugin Icons con SvelteKit:
```bash
# unplugin-icons package for Webpack compiler
npm i -D unplugin-icons
# @iconify/json package for the icons collection
npm i -D @iconify/json
```
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.
Además, realice las siguientes adiciones en `viteconfigts` para usar la integración de Unplugin Icons:
```tsx
// File: vite.config.ts
import { defineConfig } from 'vite'
import Icons from 'unplugin-icons/vite' // [!code ++] // [!code focus]
import { sveltekit } from '@sveltejs/kit/vite'
export default defineConfig({
plugins: [
sveltekit(),
Icons({ // [!code ++] // [!code focus]
compiler: 'svelte', // [!code ++] // [!code focus]
}), // [!code ++] // [!code focus]
],
})
```
### 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 SvelteKit, querrá definir globalmente importaciones de íconos específicas como importaciones de componentes de Svelte. Para hacerlo, actualice el archivo `tsconfigjson` con el siguiente código:
```json
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"types": ["unplugin-icons/types/svelte"], // [!code ++] // [!code focus]
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}
```
El código anterior simplemente marca cada importación desde `~icons` para que se considere un componente Svelte en su aplicación SvelteKit.
### Utilice iconos de desconexión en la ruta de índice
Finalmente, importa el ícono y úsalo en tu ruta de índice SvelteKit con el siguiente código:
```svelte
// [!code ++] // [!code focus]
```
El código anterior importa un icono como componente Svelte en la ruta de índice.
¡Ya terminaste!
## Cree y pruebe su aplicación SvelteKit 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 preview
```
## Conclusión
En esta guía, aprendió cómo usar Unplugin Icons en una aplicación SvelteKit
¿Usas otro stack? Consulta nuestra guía sobre [Unplugin Icons en Next.js](/es/blog/nextjs-unplugin-icons).
Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_)