Nebula UI

Quick Start

Esta es la forma recomendada de instalar e importar iconos en cualquier app o libreria del ecosistema.

Bash

1npm install nave-ui-icons

TypeScript

1import { NebulaIcon } from 'nave-ui-icons/icons'
2 
3export function SearchButton() {
4  return (
5    <button className="inline-flex items-center gap-2">
6      Buscar
7      <NebulaIcon name="Search" size={18} />
8    </button>
9  )
10}

Import Guide

Convenciones del Design System para usar la libreria de iconos de forma consistente.

1. Importa desde nave-ui-icons/icons

`NebulaIcon` es la API principal. Usa el tipo `NebulaIconName` cuando el nombre del icono viaje por props.

TypeScript

1import { NebulaIcon, type NebulaIconName } from 'nave-ui-icons/icons'
2 
3type ItemProps = {
4  icon: NebulaIconName;
5  label: string;
6};
7 
8export function Item({ icon, label }: ItemProps) {
9  return (
10    <div className="inline-flex items-center gap-2">
11      <NebulaIcon name={icon} size={16} />
12      <span>{label}</span>
13    </div>
14  );
15}

2. Usa tamaño y color desde el componente consumidor

El icono responde a `size`, `color` y `className`. La recomendacion es heredar estilos del contexto visual del componente.

TypeScript

1import { NebulaIcon } from 'nave-ui-icons/icons'
2 
3<NebulaIcon name="Search" size={16} aria-hidden="true" />
4<NebulaIcon name="Bell" size={20} color="#652BDF" aria-hidden="true" />
5<NebulaIcon name="AlertCircle" size={20} title="Hay alertas pendientes" />

Usage Patterns

Ejemplos concretos de como usar iconos en componentes del Design System.

Notificaciones

Alertas

Icon Catalog

Explora los 1251 iconos disponibles y copia un snippet listo para usar.

Buscar iconoTamanoColor

Icono activo: Link Spark

Snippet listo para usar.

TypeScript

1import { NebulaIcon } from 'nave-ui-icons/icons'
2 
3<NebulaIcon
4  name="LinkSpark"
5  size={20}
6  color="#020303"
7/>

Team Rules

Criterios rapidos para mantener una experiencia consistente en el producto.

Importa `NebulaIcon` siempre desde `nave-ui-icons/icons`.
Usa `size` para escala y `color` o `className` para integrarlo al componente.
Para iconos decorativos, usa `aria-hidden`.
Para iconos informativos, agrega `title` o acompanalo con texto visible.

NebulaIcon API

Props disponibles para los iconos que vienen de icons.xml y de los sheets SVG.

Prop	Type	Default	Description
`name`req	`NebulaIconName`	—	Nombre del icono SVG importado desde icons.xml o desde los sheets adicionales de Figma.
`size`	`number \| string`	`24`	Tamaño del icono. Sigue la API SVG/Lucide.
`color`	`string`	`"currentColor"`	Color aplicado al SVG.
`preserveColors`	`boolean`	`false`	Si es true, respeta los fills originales del XML.
`title`	`string`	—	Titulo accesible opcional para lectores de pantalla.