---
title: "Icon"
slug: "custom-icon"
category: "Mini Widgets"
reactComponent: "ArcWidgetIcon"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "icon.tsx"
locale: "es"
hosts: "react"
---

# Icon en React

Representa un símbolo de un conjunto de iconos compatible, por ejemplo como indicador de estado o dentro de un botón.

Referencia para `@arcrider/arcwidgets-react@0.1.0-alpha.5`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

```tsx
import { ArcWidgetIcon } from '@arcrider/arcwidgets-react';

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

export default function Example() {
  return (
    <span aria-label={t('Favorit', 'Favorite', 'Favorito')}>
      <ArcWidgetIcon
        data={{
          name: 'star',
          iconSet: 'phosphor',
          style: 'fill',
          iconSize: '28px',
          color: '#d97706',
        }}
      />
    </span>
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetIconData`. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.

### onAction

Fallback opcional `(type: string, ...args: unknown[]) => unknown`. El callback concreto tiene prioridad. Detalles: [Estado y eventos](/docs/react/patterns/react-state-events).

Este widget es un componente de presentación y no ofrece callbacks de interacción propios.

## Configuración

Los siguientes campos pertenecen a `data`. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.

### iconSet

Nombre del conjunto de iconos utilizado.

Tipo: `'phosphor' | 'openmoji' | 'material_symbols' | 'material' | string`.

### name

Nombre del símbolo dentro del conjunto elegido.

Tipo: `string`.

### style

Variante dentro del conjunto de iconos.

Tipo: `string`.

### iconSize

Tamaño del símbolo.

Tipo: `string`.

### color

Color del símbolo o del contenido.

Tipo: `string`.

### containerSize

Tamaño del área de símbolo circundante.

Tipo: `string`.

### backgroundColor

Color de fondo.

Tipo: `string`.

### borderRadius

Redondeo de las esquinas.

Tipo: `string`.

### borderSize

Grosor del borde.

Tipo: `string`.

### borderColor

Color del borde.

Tipo: `string`.

## Comportamiento y límites

- Los iconos se cargan según sea necesario y se almacenan en caché en el navegador. Los SVG de Phosphor y Material usan, cuando la caché está vacía, `https://universe.arc-rider.com/cdn/`; esta conexión debe ser alcanzable y estar permitida en la Content Security Policy de tu app.

- Establece `iconSet` y el `name` correspondiente. El tamaño y el color pertenecen a `iconSize` y `color`.

- El widget es un componente de presentación. La interacción y la etiqueta accesible corresponden al control circundante.

Los campos `ArcWidgetSlot` admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors).

## Tipos de datos

Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como `ArcWidgetSlot`, `ArcWidgetStyles` y `ArcReactWidgetProps`. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.

```typescript
export interface ArcWidgetIconData extends ArcWidgetBaseData {
	iconSet?: 'phosphor' | 'openmoji' | 'material_symbols' | 'material' | string;
	name: string;
	style?: string;
	iconSize?: string;
	color?: string;
	containerSize?: string;
	backgroundColor?: string;
	borderRadius?: string;
	borderSize?: string;
	borderColor?: string;
}
```