SPAD CLOUD - LIBRERÍA DE ÍCONOS

Tecnologías Implementadas

Angular CLI versión 17.3.8

Node.js versión 20.13.1

Descripción General

Esta librería incluye componentes individuales que generan íconos en formato de fuente basado en SVG con la librería icon moon gestionado por clases CSS o SCSS.

Libro de archivos SVG Figma prototype última actualización 10/01/2025.

Compilación e Instalación - Pruebas en Desarrollo

Ejecutar el siguiente comando desde la raíz del proyecto SPAD-LIB-ICONS para compilar la librería:

ng build ngx-spad-lib-icons --configuration=production

Ingresar al directorio dist/ngx-spad-lib-icons y ejecutar el siguiente comando para empaquetar la librería:

npm pack

Copiar el path del archivo *.tgz generado en la carpeta dist/ngx-spad-lib-icons.

En la aplicación de Angular donde se desee utilizar la librería, ejecutar el siguiente comando para instalar la librería:

npm install path/ngx-spad-lib-icons.tgz

Uso de la librería de íconos

Los componentes de íconos están diseñados para usarse de forma individual mediante clases CSS, permitiendo gestionar sus propiedades y estilos a través de hojas de estilos independientes o mediante estilos en línea.

Para el uso de los diferentes íconos se puede ingresar a la siguiente documentación: SPAD Docs - Documentación de Iconos

Ejemplo de Uso: Importar librería en un componente

import { IconComponent } from "ngx-spad-lib-icons";


@Component({
  selector: 'app-component-example',
  standalone: true,
  imports: [
    IconComponent, 
  ],
  templateUrl: './componnet-example.component.html',
  styleUrl: './componnet-example.component.scss'
})

Ejemplo de Uso

En el archivo componnet-example.component.html se muestra el uso del componente.

<ngx-spad-icon-component>
      <i class="icon-notification-true"></i>
</ngx-spad-icon-component>

En el archivo component-example.component.ts se muestra como debe importarse el componente.

import { IconComponent } from "ngx-spad-lib-icons";

@Component({
  selector: 'app-component-example',
  standalone: true,
  imports: [ IconComponent ],
  templateUrl: './component-example.component.html',
  styleUrl: './component-example.component.scss'
})
export class ComponentExampleComponent  { }

Ejemplo de Uso: Agregar otros estilos CSS / SCSS

.icon-notification-true{
  font-size: 30px;
  color: aqua;
}

.icon-notification-true:hover{
  font-size: 40px;
  color: red;
}

Nota: Todos los estilos se gestionan desde la hoja de estilos específica del componente, utilizando la clase asignada al ícono. Por defecto, el color del ícono es negro (sin color).