Iconos

Qué viene integrado

IconButton acepta un string SVG mediante su input svg y lo renderiza con el componente de iconos de Angular Native. Checkbox también utiliza internamente esa integración. Importa NeuIconButtonComponent desde su entrada individual; el control de la biblioteca ya importa su renderizador interno.

Mantén @ng-native/icons alineado con la versión compatible de Angular Native, junto con la dependencia SVG nativa que requiere la plantilla del framework. Instalar un catálogo JavaScript de iconos no añade un módulo nativo ausente a una app ya compilada. Consulta Instalación y Compatibilidad antes de cambiar los peers del framework.

Iconos públicos de foundation

La entrada foundation de Neural Native agrupa primitivas, tokens y utilidades compartidas. Su API pública de iconos contiene las dos constantes SVG siguientes.

import { NEU_PLUS_ICON, NEU_CHECK_ICON } from '@neural-ui/native/foundation';

Ambas constantes contienen texto SVG con viewBox de 24 × 24 y trazos currentColor. Impórtalas en TypeScript, asigna el valor a una propiedad del componente y enlázala con [svg]. Son datos: no se añaden al array imports del componente ni requieren registrar nombres o un proveedor global.

Algunos controles también utilizan SVG internos para chevrons, cerrar, visibilidad, carpetas y otras acciones integradas. Esas constantes internas no son exportaciones públicas de foundation; evita imports a rutas dist o del código fuente. Para otros dibujos, proporciona tu propio SVG mediante la API pública del componente, como se explica más abajo.

Una acción con icono completa

Crea src/app/add-item.component.ts y coloca app-add-item dentro del tema raíz. NEU_PLUS_ICON es uno de los strings SVG públicos documentados arriba. Este ejemplo lo utiliza directamente; no necesitas un catálogo externo de iconos ni registrar nombres.

import { Component, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { NEU_PLUS_ICON } from '@neural-ui/native/foundation';

@Component({
  selector: 'app-add-item',
  imports: [Text, View, NeuIconButtonComponent],
  template: `
    <view class="actions">
      <neu-icon-button label="Add item" [svg]="addIcon" (pressed)="addItem()" />
      <text class="label">Items: {{ count() }}</text>
    </view>
  `,
  styles: `
    .actions { flex-direction: row; align-items: center; gap: 12px; padding: 24px; }
    .label { color: var(--neu-text); }
  `,
})
export class AddItemComponent {
  readonly addIcon = NEU_PLUS_ICON;
  readonly count = signal(0);

  addItem(): void {
    this.count.update(value => value + 1);
  }
}

La etiqueta aporta el nombre accesible de una acción con icono. Utiliza Button cuando necesites también texto visible.

Usa un SVG de tu propio catálogo

Guarda el SVG en src/app/icons.ts y enlázalo mediante [svg]. El atributo viewBox permite escalar el dibujo; currentColor recibe el color del componente. Un fill fijo conserva su color original.

export const addIconSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>';

Un catálogo puede proporcionar los datos SVG, pero su componente web no sustituye a NeuIconButton ni al renderizador nativo. Comprueba que el SVG elegido utiliza funciones admitidas por el módulo SVG nativo y verifícalo en Android e iOS. Utiliza recursos controlados por la aplicación en lugar de SVG no confiable descargado en ejecución.