Icon

Renderiza un ícono SVG identificado por un name en la biblioteca integrada, o mediante un arreglo paths personalizado para formas SVG arbitrarias. La resolución del color admite claves del tema, strings CSS y valores dinámicos extraídos de extraData mediante colorKey. La prop name también admite interpolación tipo mustache ({{propiedad}}) resuelta contra extraData.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | name | string | No* | — | Identificador del ícono en la biblioteca. Admite interpolación {{clave}} contra extraData. Requerido si no se provee paths. | | paths | IconPath[] | No* | — | Definiciones de paths SVG personalizados. Reemplaza la búsqueda en la biblioteca. Requerido si no se provee name. | | pathsKey | string | No | — | Clave en extraData cuyo valor reemplaza el arreglo de paths resuelto. | | size | number | No | 24 | Ancho y alto del SVG en píxeles. | | color | string | No | text del tema | Color aplicado a todos los paths. Admite claves del tema o strings CSS. | | colorKey | string | No | — | Clave en extraData usada como color (prioridad sobre color). | | extraData | any | No | {} | Objeto para la búsqueda de colorKey e interpolación de name. | | style | React.CSSProperties | No | {} | Estilos en línea aplicados al wrapper SVG. |

Forma de IconPath

| Campo | Tipo | Requerido | Descripción | |-------|------|-----------|-------------| | d | string | Sí | Atributo d del path SVG. | | color | string | No | Color individual del path. |

Uso

Por nombre

import Icon from '@/components/Icon';

export default function Example() {
  return <Icon name="edit" size={20} color="primary" />;
}

Paths SVG personalizados

import Icon from '@/components/Icon';

const customPaths = [
  { d: 'M12 2L2 22h20L12 2z' },
];

export default function Example() {
  return <Icon paths={customPaths} size={32} color="#e74c3c" />;
}

Color dinámico desde datos

import Icon from '@/components/Icon';

const item = { statusColor: '#27ae60' };

export default function Example() {
  return (
    <Icon
      name="circle"
      size={12}
      colorKey="statusColor"
      extraData={item}
    />
  );
}