---
title: "Importa iconos SVG en Astro con React usando Unplugin Icons"
description: "Cómo importar iconos SVG bajo demanda en una app Astro con React usando Unplugin Icons, paso a paso."
source: "https://www.launchfa.st/es/blog/react-astro-unplugin-icons"
author: "Rishi Raj Jain"
created_at: 2024-06-05T00: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á cómo usar [Unplugin Icons](https://github.com/unplugin/unplugin-icons) en una aplicación Astro usando React. Pasará por el proceso de configurar un nuevo proyecto Astro con React, configurar Desenchufe los íconos y utilícelos 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 Astro](#crea-una-nueva-aplicación-astro)
- [Integra React en tu proyecto Astro](#integra-react-en-tu-proyecto-astro)
- [Integrar iconos Unplugin en tu proyecto Astro](#integrar iconos-unplugin-en-tu-proyecto-astro)
- [Instalar las dependencias de Unplugin Icons](#instalar-las-dependencias-de-unplugin-icons)
- [Crear definiciones de tipo para iconos de desconexión](#create-type-definitions-for-unplugin-icons)
- [Usar iconos de desconexión en la ruta de índice](#use-iconos-de-unplugin-en-la-ruta-de-índice)
- [Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente)
## Crea una nueva aplicación Astro
Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:
```bash
npm create astro@latest my-app
```
`npm create astro` es la forma recomendada de desarrollar rápidamente un proyecto Astro
Cuando se le solicite, elija:
- `Empty` cuando se le pregunta cómo iniciar el nuevo proyecto
- `Sí` cuando se le pregunte si planea escribir Typecript
- `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript.
- `Sí` cuando se le solicita instalar dependencias
- `Sí` cuando se le solicita inicializar un repositorio de git
Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:
```bash
cd my-app
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:4321](http://localhost:4321/)
Ahora, pasemos a integrar React en tu aplicación Astro.
## Integra React en tu proyecto Astro
Ejecute el siguiente comando para integrar React en su proyecto Astro:
```bash
npx astro add react
```
`npx` nos permite ejecutar paquetes binarios npm sin tener que instalarlo primero globalmente
Cuando se le solicite, elija lo siguiente:
- `Sí` cuando se le pregunta si desea instalar las dependencias de React
- `Sí` cuando se le pregunta si desea realizar cambios en el archivo de configuración de Astro
- `Sí` cuando se le pregunta si desea realizar cambios en el archivo `tsconfigjson`
Ahora, pasemos a integrar Unplugin Icons en su aplicación Astro.
## Integre íconos de desconexión en su proyecto Astro
### Instalar las dependencias de Unplugin Icons
Ejecute los siguientes comandos para instalar los paquetes necesarios para usar Unplugin Icons con React en Astro:
```bash
# unplugin-icons package for Vite 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 `astroconfigmjs` para usar la integración de Unplugin Icons:
```tsx
// File: astro.config.mjs
import react from "@astrojs/react";
import Icons from "unplugin-icons/vite"; // [!code ++] // [!code focus]
import { defineConfig } from "astro/config";
export default defineConfig({
integrations: [
react(),
vite: { // [!code ++] // [!code focus]
plugins: [ // [!code ++] // [!code focus]
Icons({ // [!code ++] // [!code focus]
jsx: "react", // [!code ++] // [!code focus]
compiler: "jsx", // [!code ++] // [!code focus]
autoInstall: true, // [!code ++] // [!code focus]
}), // [!code ++] // [!code focus]
Icons({ // [!code ++] // [!code focus]
compiler: "astro", // [!code ++] // [!code focus]
autoInstall: true, // [!code ++] // [!code focus]
}), // [!code ++] // [!code focus]
], // [!code ++] // [!code focus]
}, // [!code ++] // [!code focus]
],
});
```
Como se aprendió en un [problema de GitHub] (https://github.com/unplugin/unplugin-icons/issues/253), es aconsejable usar ambos modos de compilación, es decir, con React y Astro. Esto permite el uso de íconos de Unplugin en ambos React. y componentes Astro en su aplicación Astro
### Crear definiciones de tipo para iconos de desconexión
Para asegurarse de que puede aprovechar las definiciones de tipo de los íconos de Unplugin usando React en Astro, querrá definir globalmente importaciones de íconos específicas como importaciones de componentes de React.
Para hacerlo, actualice `envdts` en el directorio `src` con el siguiente código:
```tsx
///
declare module "virtual:icons/*" { // [!code ++] // [!code focus]
import type { SVGProps } from "react"; // [!code ++] // [!code focus]
import type React from "react"; // [!code ++] // [!code focus]
const component: (props: SVGProps) => React.ReactElement; // [!code ++] // [!code focus]
export default component; // [!code ++] // [!code focus]
} // [!code ++] // [!code focus]
```
El código anterior simplemente marca cada importación realizada a través de `virtual:icons` para que se considere como componentes de React en su aplicación Astro.### Utilice iconos de desconexión en la ruta de índice
Finalmente, importa el ícono y úsalo en tu componente Astro (o React) con el siguiente código:
```astro
---
import MdiAlarmOff from "virtual:icons/mdi/alarm-off"; // [!code ++] // [!code focus]
---
Astro
Astro
// [!code ++] // [!code focus]
```
El código anterior importa un ícono como componente de React en la ruta de índice
¡Ya terminaste!
## Cree y pruebe su aplicación Astro 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 con React en una aplicación Astro.
¿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_)
En esta guía, aprenderá cómo usar [Unplugin Icons](https://github.com/unplugin/unplugin-icons) en una aplicación Astro usando React. Pasará por el proceso de configurar un nuevo proyecto Astro con React, configurar Desenchufe los íconos y utilícelos 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 Astro](#crea-una-nueva-aplicación-astro)
- [Integra React en tu proyecto Astro](#integra-react-en-tu-proyecto-astro)
- [Integrar iconos Unplugin en tu proyecto Astro](#integrar iconos-unplugin-en-tu-proyecto-astro)
- [Instalar las dependencias de Unplugin Icons](#instalar-las-dependencias-de-unplugin-icons)
- [Crear definiciones de tipo para iconos de desconexión](#create-type-definitions-for-unplugin-icons)
- [Usar iconos de desconexión en la ruta de índice](#use-iconos-de-unplugin-en-la-ruta-de-índice)
- [Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente)
## Crea una nueva aplicación Astro
Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:
```bash
npm create astro@latest my-app
```
`npm create astro` es la forma recomendada de desarrollar rápidamente un proyecto Astro
Cuando se le solicite, elija:
- `Empty` cuando se le pregunta cómo iniciar el nuevo proyecto
- `Sí` cuando se le pregunte si planea escribir Typecript
- `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript.
- `Sí` cuando se le solicita instalar dependencias
- `Sí` cuando se le solicita inicializar un repositorio de git
Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:
```bash
cd my-app
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:4321](http://localhost:4321/)
Ahora, pasemos a integrar React en tu aplicación Astro.
## Integra React en tu proyecto Astro
Ejecute el siguiente comando para integrar React en su proyecto Astro:
```bash
npx astro add react
```
`npx` nos permite ejecutar paquetes binarios npm sin tener que instalarlo primero globalmente
Cuando se le solicite, elija lo siguiente:
- `Sí` cuando se le pregunta si desea instalar las dependencias de React
- `Sí` cuando se le pregunta si desea realizar cambios en el archivo de configuración de Astro
- `Sí` cuando se le pregunta si desea realizar cambios en el archivo `tsconfigjson`
Ahora, pasemos a integrar Unplugin Icons en su aplicación Astro.
## Integre íconos de desconexión en su proyecto Astro
### Instalar las dependencias de Unplugin Icons
Ejecute los siguientes comandos para instalar los paquetes necesarios para usar Unplugin Icons con React en Astro:
```bash
# unplugin-icons package for Vite 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 `astroconfigmjs` para usar la integración de Unplugin Icons:
```tsx
// File: astro.config.mjs
import react from "@astrojs/react";
import Icons from "unplugin-icons/vite"; // [!code ++] // [!code focus]
import { defineConfig } from "astro/config";
export default defineConfig({
integrations: [
react(),
vite: { // [!code ++] // [!code focus]
plugins: [ // [!code ++] // [!code focus]
Icons({ // [!code ++] // [!code focus]
jsx: "react", // [!code ++] // [!code focus]
compiler: "jsx", // [!code ++] // [!code focus]
autoInstall: true, // [!code ++] // [!code focus]
}), // [!code ++] // [!code focus]
Icons({ // [!code ++] // [!code focus]
compiler: "astro", // [!code ++] // [!code focus]
autoInstall: true, // [!code ++] // [!code focus]
}), // [!code ++] // [!code focus]
], // [!code ++] // [!code focus]
}, // [!code ++] // [!code focus]
],
});
```
Como se aprendió en un [problema de GitHub] (https://github.com/unplugin/unplugin-icons/issues/253), es aconsejable usar ambos modos de compilación, es decir, con React y Astro. Esto permite el uso de íconos de Unplugin en ambos React. y componentes Astro en su aplicación Astro
### Crear definiciones de tipo para iconos de desconexión
Para asegurarse de que puede aprovechar las definiciones de tipo de los íconos de Unplugin usando React en Astro, querrá definir globalmente importaciones de íconos específicas como importaciones de componentes de React.
Para hacerlo, actualice `envdts` en el directorio `src` con el siguiente código:
```tsx
///