wiki-Icon

Ver en Git

---

Icon

El componente Icon se utiliza para renderizar íconos en una aplicación. Permite tanto el uso de íconos predefinidos (de una lista de tipos) como la carga de íconos personalizados en formato SVG o como imágenes.

Referencia de la API

Propiedad	Tipo	Descripción	Opciones/Valores Posibles
className	string	Clase CSS adicional que se aplicará al ícono.	—
size	'x-small' | 'small' | 'medium' | 'large' | 'x-large'	Define el tamaño del ícono. El tamaño por defecto es medium.	'x-small', 'small', 'medium', 'large', 'x-large'
type	'warning' | 'warning-green' | 'error' | 'info' | 'custom'	El tipo de ícono que se mostrará. Puede ser uno de los íconos predefinidos o un ícono personalizado (custom).	'warning', 'warning-green', 'error', 'info', 'custom'
style	CSSProperties	Estilos en línea aplicados al ícono.	—
onClick	() => void	Función que se ejecutará cuando el ícono sea clickeado.	—
aura-test	string	Atributo adicional utilizado para pruebas de accesibilidad o automatizadas.	—
asImage	boolean	Si se establece en true, se renderiza el ícono como una imagen (img) en lugar de un ícono SVG. Solo se aplica cuando type es 'custom'.	true o false
svg	string	El contenido SVG o la URL de la imagen que representa el ícono personalizado. Solo se aplica cuando type es 'custom'.	—

Comportamiento

1. Íconos Predefinidos:

• Si type es uno de los valores predefinidos ('warning', 'warning-green', 'error', 'info'), el componente renderiza un ícono SVG correspondiente a ese tipo.
• El color del ícono se ajusta automáticamente según el tipo. Los colores predefinidos para cada tipo se toman de la constante COLORS.

2. Íconos Personalizados:

• Si type es 'custom', el componente espera que se pase un SVG como una cadena de texto a través de la propiedad svg. También puedes proporcionar una URL de imagen o renderizar el ícono como una imagen usando asImage.
• Si asImage es true, se usa una etiqueta <img> para renderizar el ícono, de lo contrario, se usa el componente ReactSVG para procesar el SVG.

3. Tamaño:

• El tamaño del ícono se ajusta según la propiedad size. Los valores posibles son 'x-small', 'small', 'medium', 'large' y 'x-large'. Si no se proporciona un valor, el tamaño por defecto es medium.

4. Estilo:

• Se pueden aplicar estilos en línea a través de la propiedad style, que se combinarán con los estilos predeterminados del tipo de ícono.
• Si el ícono es de tipo 'custom', el estilo se ajusta para mantener la relación de aspecto del ícono.

5. Eventos:

• El componente acepta un manejador de clics a través de la propiedad onClick, que se ejecutará cuando el usuario haga clic en el ícono.

Ejemplo de Uso

// svg
<Icon 
 type="custom" 
 svg="<svg>...</svg>" 
 size="small" 
 onClick={() => console.log("Ícono personalizado clickeado")} 
/>

// img
<Icon 
 type="custom" 
 svg="https://example.com/icon.svg" 
 size="x-large" 
 asImage={true} 
 onClick={() => console.log("Imagen clickeada")} 
/>