Aspecto visual: La iconografía (lucide, trazo de 2px, tamaños por uso, icono de la página = icono del menú) se consulta en el Manual de Diseño 3.0 desplegado. Esta página describe la arquitectura; no fija colores, medidas ni componentes.
Nebula UI Kit utiliza Lucide Angular como su sistema base de iconografía, con un sistema de proveedores flexible y personalizable mediante inyección de dependencias.
📦 Lucide Angular ⚡ Tree Shakable 🔄 Multi-proveedor 🎯 Tipado seguro
Función que registra un set personalizado de iconos en el sistema.
import { Provider } from '@angular/core';
import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
export function provideNebulaIcons(icons: { [key: string]: any }): Provider[] {
return [
{
provide: LUCIDE_ICONS,
useFactory: () => new LucideIconProvider(icons),
multi: true // Permite múltiples proveedores de iconos
}
];
}
Función preconfigurada que registra automáticamente los iconos esenciales de Nebula.
export function provideNebulaCoreIcons(): Provider[] {
return provideNebulaIcons(NEBULA_CORE_ICONS);
}
💡 Características clave:
multi: true - Permite combinar múltiples sets de iconosapp.config.tsimport { ApplicationConfig } from '@angular/core';
import { provideNebulaCoreIcons, provideNebulaIcons } from '@nebula/ui-kit';
import { CustomIcon, AnotherIcon } from './custom-icons';
export const appConfig: ApplicationConfig = {
providers: [
// ... otros proveedores
// ✅ Registrar los iconos core de Nebula
provideNebulaCoreIcons(),
// ✅ O registrar iconos personalizados
provideNebulaIcons({
MiIconoPersonalizado: CustomIcon,
OtroIcono: AnotherIcon
}),
]
};
import { Component } from '@angular/core';
import { LucideAngularModule } from 'lucide-angular';
@Component({
selector: 'app-example',
standalone: true,
imports: [LucideAngularModule],
template: `
<!-- Usar icono por su clave registrada -->
<lib-icon name="House" size="24" color="#667eea"></lib-icon>
<lib-icon name="Plus" size="20"></lib-icon>
<lib-icon name="Settings" [size]="iconSize"></lib-icon>
<!-- Con eventos -->
<lib-icon
name="Trash2"
(click)="onDelete()"
class="cursor-pointer">
</lib-icon>
`
})
export class ExampleComponent {
iconSize = 18;
onDelete() {
console.log('Eliminar');
}
}
// app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
// Set Core - Siempre disponible
provideNebulaCoreIcons(),
// Set del Módulo de Contabilidad
provideNebulaIcons(ACCOUNTING_ICONS),
// Set del Módulo de Tesorería
provideNebulaIcons(TREASURY_ICONS),
// Set Personalizado de la Empresa
provideNebulaIcons(CUSTOM_ICONS),
]
};
export const NEBULA_CORE_ICONS = {
// Alias para compatibilidad
Home: House, // 'Home' es alias de 'House'
EyeClosed: EyeOff, // Consistencia en nombres
CircleHelp: CircleQuestionMark,
// Múltiples nombres para el mismo icono
Sparkle: FileChartLine,
Tickets: FileChartLine,
Gpu: FolderOpen,
// Iconos compuestos
BellElectric: Banknote,
UserCog: FileCog,
};
// custom-icons.ts
import { Component } from '@angular/core';
@Component({
selector: 'svg:svg[custom-icon]',
template: `<svg:path d="M12 2L2 7l10 5 10-5-10-5z"/>`,
standalone: true
})
export class CustomIcon {}
// app.config.ts
import { CustomIcon } from './custom-icons';
export const appConfig: ApplicationConfig = {
providers: [
provideNebulaCoreIcons(),
provideNebulaIcons({
MyCustomIcon: CustomIcon
})
]
};
Última actualización: 2025 | Documentación para desarrolladores