Sistema de Iconos

Componente Icon para renderizar iconos SVG desde src/assets/images/icons/

Iconos disponibles

chevron-left

chevron-right

more-vertical

p4-logo

panda-logo

Uso básico

<Icon name="chevron-left" />
<Icon name="p4-logo" styleClass="custom-class" />

Estructura HTML generada

El componente genera la siguiente estructura:

<i class="p4-icon custom-class">
  <svg ...>
    ...
  </svg>
</i>

Personalización con CSS

Puedes controlar el tamaño mediante clases de utilidad:

16px (p4-w-16)

24px (p4-w-24)

48px (p4-w-48)

<Icon name="chevron-right" styleClass="p4-w-16" />
<Icon name="chevron-right" styleClass="p4-w-24" />
<Icon name="chevron-right" styleClass="p4-w-48" />

Características

  • Carga dinámica de archivos SVG
  • SVG renderizado exactamente como está en el archivo
  • Clase base p4-icon para todos los iconos
  • Soporte para clases CSS personalizadas mediante styleClass
  • Control de tamaño mediante clases de utilidad (p4-w-*)
  • Uso de currentColor para herencia de color