Lt-Icons

Lt-Icons is an Angular library that contains svg icons

Installation

• Run the command:

yarn add @lightech-llc/lt-icons

• Import LtIconsModule inside your main application module (usually named AppModule)

• Add svg-constants that you will use in your applications

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

+ import {
+   LtIconsModule,
+   LtIconsService,
+   ltIconHome,
+   ltIconPencil
+ } from '@lightech-llc/lt-icons';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
+    LtIconsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
+   constructor(private ltIconsService: LtIconsService) {
+     this.ltIconsService.register([
+       ltIconHome,
+       ltIconPencil,
+     ]);
+  }
}

Usage

Use lt-icons component from HTML markup and pass in a size (small | medium | large), color theme (primary | accent | warn | error) or color code.

<lt-icons size="medium" color="accent">pencil</lt-icons>

<lt-icons size="small" color="#33444">home</lt-icons>

For color theme need to add global styles.

Additional

Add new svg icons

• To add icons, you need to create constants with that format:

export const ltIconRocketLunch: {
  name: 'rocket_lunch';
  data: string;
} = {
  name: 'rocket_lunch',
  data: `<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M18 8.5a2.5 2.5 0 01-5 0 2.5 2.5 0 015 0zm-.006 6.866a11.065 11.065 0 01-1.163 4.569A7.634 7.634 0 0110 24H9v-5.5A3.517 3.517 0 005.5 15H0v-1a7.634 7.634 0 014.065-6.831 11.065 11.065 0 014.569-1.163A15.487 15.487 0 0120.972 0 3.009 3.009 0 0124 3a15.507 15.507 0 01-6.006 12.366zM2.084 13h2.262a34.361 34.361 0 012.609-4.763 8.993 8.993 0 00-1.993.72A5.519 5.519 0 002.084 13zm13.679 4.045A34.361 34.361 0 0111 19.654v2.262a5.519 5.519 0 004.043-2.878 8.993 8.993 0 00.72-1.993zM22 2.972A1 1 0 0021 2c-5.16.147-8.65 2.124-12.018 6.822a29.92 29.92 0 00-2.471 4.271 5.5 5.5 0 014.4 4.4 29.92 29.92 0 004.271-2.471C19.876 11.65 21.853 8.16 22 2.972zM6.122 17.879a3.015 3.015 0 010 4.242c-.907.906-3.622 1.465-4.748 1.664l-1.406.247.247-1.406c.2-1.126.758-3.841 1.664-4.748a3.073 3.073 0 014.243.001zM5 20a.993.993 0 00-.293-.707 1 1 0 00-1.414 0A7.318 7.318 0 002.5 21.5a7.342 7.342 0 002.208-.794A.993.993 0 005 20z"/></svg>`
};

• Add this constants in the main module:

 constructor(private ltIconsService: LtIconsService) {
    this.ltIconsService.register([
      ltIconHome,
      ltIconPencil,
      ltIconSettings,
+      ltIconRocketLunch
    ]);
  }

There are several ways to create constants in application:

• create manually
• use the package svg-to-ts package

Create constants with the package svg-to-ts

• Run the command:

yarn add svg-to-ts

For angular 11 you need to install "^6.0.2" version.

• Add to package.json

"scripts": {
    "generate-custom-icons": "svg-to-ts"
},
"svg-to-ts": {
    "conversionType": "constants",
    "srcFiles": [
      "src/assets/icons/*.svg"
    ],
    "outputDirectory": "src/assets/icons/generated-icons",
    "fileName": "svg-icons",
    "interfaceName": "SvgIcon",
    "typeName": "svgIcon",
    "prefix": "ltIcon",
    "optimizeForLazyLoading": true,
    "modelFileName": "svg-icon.model",
    "additionalModelFile": "src/assets/icons",
    "compileSources": true,
    "svgoConfig": {
      "plugins": [
        {
          "removeDimensions": true,
          "cleanupAttrs": true
        }
      ]
    }
},

• Add svg files to src/assets/icons
• Run the command:

yarn generate-custom-icons

• The file with constants will be generated in src/assets/icons/generated-icons