dgx-icons-svg

Una librería de componentes Angular (soportado desde Angular 19+) que proporciona iconos SVG interactivos para tu aplicación.

Instalación

Puedes instalar la librería usando npm:

npm install dgx-icons-svg

Uso

Importa el módulo DgxIconsSvgModule en tu módulo de Angular:

import { DgxIconsSvgModule } from 'dgx-icons-svg';

@NgModule({
  imports: [
    // ... otras importaciones
    DgxIconsSvgModule
  ],
  // ...
})
export class YourAppModule { }

Luego, puedes usar los componentes de icono en tus plantillas. Los iconos son interactivos y pueden ser estilizados usando clases CSS. Puedes pasar una clase CSS usando la vinculación de propiedades [class]. Esto es especialmente útil con frameworks CSS como Tailwind CSS:

<icon-account-balance-svg></icon-account-balance-svg>
<icon-add-notes-svg></icon-add-notes-svg>
<icon-autorenew-svg></icon-autorenew-svg>
<icon-badge-id-svg></icon-badge-id-svg>
<icon-calendar-month-svg></icon-month-svg>
<icon-calendar-today-svg></icon-today-svg>
<icon-cash-register-svg></icon-register-svg>
<icon-coins-svg></icon-coins-svg>
<icon-credit-card-svg></icon-card-svg>
<icon-data-alert-svg></icon-alert-svg>
<icon-download-svg></icon-download-svg>
<icon-event-svg></icon-event-svg>
<icon-export-notes-svg></icon-notes-svg>
<icon-eye-tracking-svg></icon-tracking-svg>
<icon-grid-svg></icon-grid-svg>
<icon-location-svg></icon-location-svg>
<icon-paid-svg></icon-paid-svg>
<icon-process-svg></icon-process-svg>
<icon-release-alert-svg></icon-alert-svg>
<icon-search-svg></icon-search-svg>
<icon-sell-svg></icon-sell-svg>
<icon-send-svg></icon-send-svg>
<icon-store-svg></icon-store-svg>
<icon-upload-file-svg></icon-file-svg>

Ejemplo de uso en un componente Angular 19+:

En tu componente (.ts):

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PaidSvg, AccountBalanceSvg, CreditCardSvg } from 'dgx-icons-svg';

@Component({
  selector: 'consiglia-details-page',
  imports: [PaidSvg, AccountBalanceSvg, CreditCardSvg],
  templateUrl: './details-page.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DetailsPageComponent { }

En tu plantilla (.html):

<icon-paid-svg class="w-4 h-4 text-base-content/75"></icon-paid-svg>
<icon-credit-card-svg class="text-base-content/75" />
<icon-account-balance-svg class="text-base-content/75" />

Ejemplo de interactividad con clases CSS (incluyendo Tailwind CSS) y vinculación de propiedades:

En tu componente (.ts):

isActive: boolean = false;

toggleActive() {
  this.isActive = !this.isActive;
}

En tu plantilla (.html):

<icon-grid-svg [class]="isActive ? 'text-blue-600 cursor-pointer' : ''" (click)="toggleActive()"></icon-grid-svg>

En tu archivo de estilos (.css o .scss) si no usas Tailwind, o simplemente usando clases de Tailwind directamente en la plantilla si lo usas:

.active-icon {
  fill: blue; /* Cambia el color cuando está activo */
  cursor: pointer; /* Indica que es interactivo */
}

Iconos disponibles

Aquí tienes una tabla con los iconos disponibles en esta librería y sus vistas previas:

| Nombre del Icono | Vista Previa | |--------------------------|--------------| | account-balance | | | add-notes | | | autorenew | | | badge-id | | | calendar-month | | | calendar-today | | | cash-register | | | coins | | | credit-card | | | data-alert | | | dataphone | | | delivery | | | download | | | event | | | export-notes | | | eye-tracking | | | grid | | | location | | | options | | | paid | | | price-check | | | process | | | release-alert | | | search | | | sell | | | send | | | store | | | upload-file | |

Construcción y Publicación

Para construir la librería, ejecuta:

ng build dgx-icons-svg

Los artefactos de construcción se encontrarán en el directorio dist/.

Para publicar la librería en npm, navega al directorio dist/dgx-icons-svg y ejecuta:

cd dist/dgx-icons-svg
npm publish

Pruebas

Para ejecutar las pruebas unitarias:

ng test