Mini Widgets

Icon

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. <a href="/docs/react/intro/setup-react">Instalación</a> · <a href="/docs/react/intro/react-components">Todos los componentes</a>.

Ejemplo completo

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 (     &lt;span aria-label={t('Favorit', 'Favorite', 'Favorito')}&gt;       &lt;ArcWidgetIcon         data={{           name: 'star',           iconSet: 'phosphor',           style: 'fill',           iconSize: '28px',           color: '#d97706',         }}       /&gt;     &lt;/span&gt;   ); }</code></pre>
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: <a href="/docs/react/patterns/react-state-events">Estado y eventos</a>.
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. <a href="/docs/react/patterns/nested-widget-descriptors">Combinar contenidos</a>.
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.
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;
}