Iconos Personalizados

Carga dinámica de iconos SVG desde el directorio assets/icons. Simplemente agrega archivos SVG a la carpeta de iconos y referéncialos por nombre.

Uso Básico

Ejemplos simples del componente Icon personalizado con diferentes iconos y tamaños.

Persona (24px, max-width: 24px)
Astronauta (32px, max-width: 32px)
Cohete (32px, max-width: 32px)
Perfil (24px, max-width: 24px)
customIcons.logout (24px, max-width: 24px)
customIcons.project (24px, max-width: 24px)
customIcons.workspace (24px, max-width: 24px)

Diferentes Tamaños

Los iconos pueden ser dimensionados usando números o cadenas con unidades.

16px
24px
32px
48px
64px

Max Width Control

Use the maxWidth prop to control the maximum width of the icon, useful for responsive design.

Size: 48px, Max-width: 24px
Size: 64px, Max-width: 32px
Size: 80px, Max-width: 40px

Clases Personalizadas

Aplica clases CSS personalizadas para estilizado, incluyendo clases de color.

Color Primario
Color de Acento
Color Positivo
Color Negativo
Color de Advertencia

Manejo de Errores

El componente maneja elegantemente iconos faltantes o inválidos.

❌ nonexistentIcono Faltante
❌ invalidIcono Inválido

Ejemplos de Uso

Ejemplos de código mostrando cómo usar el componente Icon en diferentes contextos.

<!-- Basic usage -->
<CustomIcon name="persona" size="24" />

<!-- With custom class -->
<CustomIcon name="rocket" size="32" class="" />

<!-- In buttons -->
<q-btn>
  <CustomIcon name="astronaut" size="16" class="q-mr-sm" />
  Launch
</q-btn>

<!-- In cards -->
<q-card>
  <q-card-section>
    <CustomIcon name="persona" size="48" class="text-accent" />
    <h6>User Profile</h6>
  </q-card-section>
</q-card>

Ejemplos Interactivos

Ejemplos en vivo de iconos usados en botones, tarjetas y otros componentes.

Ejemplos de Botones

Ejemplos de Tarjetas

Tarjeta de Cohete

Perfecto para características relacionadas con lanzamientos

Tarjeta de Astronauta

Excelente para características de exploración

Tarjeta de Persona

Ideal para características relacionadas con usuarios

customIcons.workspaceCard

customIcons.workspaceCardDescription

customIcons.projectCard

customIcons.projectCardDescription

customIcons.profileCard

customIcons.profileCardDescription

Agregar Nuevos Iconos

Aprende cómo agregar nuevos iconos a tu proyecto.

1

Descargar Archivos SVG

Descarga archivos SVG de TheNounProject.com u otras fuentes y guárdalos en el directorio assets/icons.

2

Nombrar Tus Archivos

Nombra tus archivos SVG de manera descriptiva (ej., 'user-profile.svg', 'settings-gear.svg').

3

Usar en Componentes

Referencia tus iconos por nombre de archivo (sin extensión .svg) en el componente Icon.