Saltar al contenido principal

SVG Icons

Paquete: @tiendana/utils

Constantes de SVG icons como strings para uso directo en HTML/JSX sin dependencias externas.

Iconos Disponibles​

export const TDN_ICON_CLEAR: string
export const TDN_ICON_ARROW_DOWN: string
export const TDN_ICON_ARROW_BACK: string
export const TDN_ICON_ARROW_FORWARD: string
export const TDN_ICON_ARROW_FORWARS_ALT: string
export const TDN_ICON_PASSWORD_MASK: string
export const TDN_ICON_RESTORE: string
export const TDN_ICON_UPLOAD_IMAGE: string
export const TDN_ICON_UPLOAD: string
export const TDN_ICON_FILE: string
export const TDN_ICON_SEARCH: string
export const TDN_ICON_SCHEDULE: string
export const TDN_ICON_TOOLBAR_IMAGE: string

Uso​

En HTML Vanilla​

import { TDN_ICON_CLEAR } from '@tiendana/utils';

button.innerHTML = `Cerrar ${TDN_ICON_CLEAR}`;

En React/Angular​

import { TDN_ICON_SEARCH, TDN_ICON_CLEAR } from '@tiendana/utils';

// React
<button dangerouslySetInnerHTML={{ __html: TDN_ICON_SEARCH }} />

// Angular
<button [innerHTML]="TDN_ICON_SEARCH"></button>

Personalización con CSS​

import { TDN_ICON_ARROW_FORWARD } from '@tiendana/utils';

const html = `
  <style>
    svg {
      width: 24px;
      height: 24px;
      fill: var(--color-primary);
    }
  </style>
  ${TDN_ICON_ARROW_FORWARD}
`;

Características​

  • ✅ Sin dependencias - No requiere librerías de iconos
  • ✅ Inline SVG - Listo para innerHTML
  • ✅ Personalizable - CSS fill, stroke, width, height
  • ✅ Lightweight - Solo importas lo que usas
  • ✅ Type-safe - Completamente tipado en TypeScript

Casos de Uso​

  • Botones de cierre, navegación, búsqueda
  • Iconos en snackbars y notificaciones
  • Toolbars y controles de formulario
  • Cuando no quieres dependencias de icon fonts

Ver También​