npm package: @lightech-llc/lt-icons
Description: Lt-Icons is an [Angular](https://angular.io/) library that contains svg icons
Latest version: 0.0.15

# Lt-Icons 

Lt-Icons is an [Angular](https://angular.io/) library that contains svg icons

## Installation

- Run the command:
```commandline
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

```diff
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.

```html
<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:
```diff
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:
```diff
 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](https://www.npmjs.com/package/svg-to-ts) package

#### Create constants with the package svg-to-ts
- Run the command:
```commandline
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:
```commandline
yarn generate-custom-icons
```
- The file with constants will be generated in src/assets/icons/generated-icons