Icon
<sg-icon> v0.1.1 Componente de iconos SVG flexible con acceso a más de 200,000 iconos de Iconify. Importa solo los iconos que necesitas usando el CLI o el Icon Manager visual.
Ejemplos
Iconos de navegación
<sg-icon name="home" size="24"></sg-icon>
<sg-icon name="search" size="24"></sg-icon>
<sg-icon name="menu" size="24"></sg-icon>
<sg-icon name="settings" size="24"></sg-icon>
<sg-icon name="user" size="24"></sg-icon>
Iconos de acciones
<sg-icon name="add" size="24"></sg-icon>
<sg-icon name="edit" size="24"></sg-icon>
<sg-icon name="delete" size="24"></sg-icon>
<sg-icon name="save" size="24"></sg-icon>
<sg-icon name="copy" size="24"></sg-icon>
Con colores
<sg-icon name="heart" size="24" color="#ef4444"></sg-icon>
<sg-icon name="star" size="24" color="#f59e0b"></sg-icon>
<sg-icon name="check" size="24" color="#22c55e"></sg-icon>
<sg-icon name="info" size="24" color="#3b82f6"></sg-icon>
Tamaños
<sg-icon name="star" size="16"></sg-icon>
<sg-icon name="star" size="24"></sg-icon>
<sg-icon name="star" size="32"></sg-icon>
<sg-icon name="star" size="48"></sg-icon>
Animaciones y transformaciones
<sg-icon name="refresh" size="24" spin></sg-icon>
<sg-icon name="chevron-right" size="24" rotate="90"></sg-icon>
<sg-icon name="arrow-right" size="24" flip-h></sg-icon>
Experimenta con los iconos en tiempo real:
API Reference
Propiedades
13| Prop | Tipo | Default | Descripción |
|---|---|---|---|
name | string | undefined | Nombre del icono de la librería integrada |
src | string | undefined | URL a un SVG personalizado |
size | number | string | 24 | Tamaño del icono en pixels |
color | string | 'currentColor' | Color del icono (valor CSS) |
spin | boolean | false | Animación de rotación continua |
rotate | number | undefined | Ángulo de rotación en grados |
flip-h | boolean | false | Voltear horizontalmente |
flip-v | boolean | false | Voltear verticalmente |
decorative | boolean | false | Oculto para lectores de pantalla |
aria-label | string | undefined | Etiqueta accesible |
width | number | string | undefined | Ancho personalizado (sobreescribe size) |
height | number | string | undefined | Alto personalizado (sobreescribe size) |
stroke-width | number | undefined | Grosor del trazo |
Cómo usar
Cómo funciona
El componente sg-icon renderiza iconos SVG que se importan dinámicamente desde Iconify usando el CLI o el Icon Manager. Esto te permite acceder a más de 200,000 iconos de colecciones populares como Lucide, Material Design, Heroicons, Font Awesome y muchas más.
Uso básico
Una vez importados los iconos a tu proyecto, úsalos con el atributo name:
<!-- Iconos importados desde Iconify -->
<sg-icon name="lucide-home" size="24"></sg-icon>
<sg-icon name="mdi-heart" size="24" color="red"></sg-icon>
<sg-icon name="heroicons-star" size="32"></sg-icon>
SVG personalizado
También puedes cargar iconos SVG externos usando el atributo src:
<sg-icon src="/icons/custom.svg" size="24"></sg-icon>
Iconos desde JSON
Carga iconos desde un archivo JSON con el atributo json-src:
<!-- Cargar icono específico desde JSON -->
<sg-icon name="my-icon" json-src="/assets/custom-icons.json"></sg-icon>
<!-- O configurar globalmente -->
<script class="hl-keyword">type="module">
import { SgIcon } from '@sage-box/icons';
// Configurar origen JSON por defecto
SgIcon.configure({ jsonSrc: '/assets/icons.json' });
// O pre-cargar iconos
await SgIcon.loadIcons('/assets/icons.json');
</script>
Registrar iconos personalizados
Registra tus propios iconos SVG programáticamente:
import { registerIcons, registerIcon } from '@sage-box/icons';
// Registrar múltiples iconos
registerIcons({
'my-logo': '<svg viewBox="0 0 24 24"><path d="M12..."/></svg>',
'custom-icon': '<svg>...</svg>'
});
// Registrar un solo icono
registerIcon('brand-icon', '<svg viewBox="0 0 24 24">...</svg>');
CLI & Icon Manager
Gestiona miles de iconos de Iconify directamente desde tu terminal o interfaz visual
Buscar iconos
Accede a más de 200,000 iconos de colecciones como Lucide, Material Design, Heroicons y más.
Fetch desde Iconify
Descarga iconos optimizados directamente desde la API de Iconify con un solo comando.
Seleccionar para build
Marca qué iconos incluir en tu bundle final. Solo se compilan los que realmente usas.
Build automático
Genera TypeScript tipado con auto-registro de iconos para tu proyecto.
Icon Manager - Interfaz Visual
Una interfaz web para gestionar tus iconos de forma visual:
Comandos principales
npx sagebox init
npx sagebox icons search home
npx sagebox icons add lucide:home mdi:settings heroicons:star
npx sagebox icons browse
npx sagebox icons build
npx sagebox icons server
Flujo de trabajo
Inicializa la configuración del proyecto, descarga los iconos que necesitas desde Iconify (CLI o interfaz visual),
genera el archivo TypeScript tipado con build, e importa los iconos en tu aplicación.
Salida generada
El comando build genera automáticamente un archivo TypeScript con los iconos seleccionados:
// Auto-generated - do not edit manually
import { registerIcons } from '@sage-box/icons';
export const icons: Record<string, string> = {
'lucide-home': '<svg xmlns="http:__PRESERVED_1__
'lucide-settings': '<svg xmlns="http:__PRESERVED_2__
'mdi-heart': '<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>',
};
// Auto-register icons
registerIcons(icons);
// Type definitions
export type IconName = 'lucide-home' | 'lucide-settings' | 'mdi-heart';
export const iconNames: IconName[] = ['lucide-home', 'lucide-settings', 'mdi-heart'];
Uso en tu aplicación
// Importa los iconos (se auto-registran)
import './icons';
// Úsalos en tus componentes
<sg-icon name="lucide-home" size="24"></sg-icon>
<sg-icon name="mdi-heart" size="24" color="red"></sg-icon>
Colecciones populares de Iconify
Accede a iconos de las colecciones más populares usando el formato prefix:icon-name: