npm package: @loyalty-cloud/ui-icons
Description: This documentation outlines the steps to add icons, build, publish, and use the LC Icons Angular NPM package in the project.
Latest version: 1.1.144

# Documentation

This documentation outlines the steps to add icons, build, publish, and use the LC Icons Angular NPM package in the project.

---

## Adding Icons

To add a new icon to the package, follow these steps:

1. **Locate the Icon Directory**  
   Navigate to the directory where your SVG icons are stored, e.g., `src/assets/icons`.

2. **Add the SVG File**  
   Place the new SVG file in the appropriate folder. Use a consistent naming convention, such as `icon-name.svg`.

3. **Test the Icon**  
   Ensure the icon is accessible via the custom component. For example:

   ```html
   <lc-icon 
      name="new-icon">
   </lc-icon>
   ```

---

## Updating the Package Version

Follow these steps to update the version of your NPM package:

1. **Locate the Project Directory**  
   Navigate to the directory where your NPM package resides, e.g., `projects/loyalty-cloud-ui-icons`.

2. **Run the Update Version Command**  
   Update the package version using the following command:

   ```bash
   npm version patch
   ```

---

## Building the NPM Package

To build the NPM package, follow these steps:

1. **Move to the Project Root Directory**  
   Navigate to the root directory of the project.

2. **Remove the `dist` Folder**  
   Ensure that the `dist` folder is deleted from the root directory to avoid conflicts.

3. **Run the Build Command**  
   Build the package using the Angular CLI command:

   ```bash
   ng build @loyalty-cloud/ui-icons
   ```

---

## Publishing the Package

To publish the package to NPM, follow these steps:

1. **Navigate to the Build Package Directory**  
   Go to the directory where the build output resides, e.g., `dist/loyalty-cloud-ui-icons`.

2. **Login to NPM**  
   Authenticate with your NPM account using:

   ```bash
   npm login
   ```

3. **Publish the Package**  
   Publish the package using:

   ```bash
   npm publish
   ```

4. **Verify the Package**  
   Check that your package is available on [npmjs.com](https://www.npmjs.com/).

---

## How to use?

To use the icons, follow these steps:

1. **Install the Package**  
   Install the package using:

   ```bash
   npm install @loyalty-cloud/ui-icons
   ```

2. **Update `angular.json`**  
   Add the following configuration in the `assets` block of `angular.json`:

   ```json
   {
       "glob": "**/*",
       "input": "node_modules/@loyalty-cloud/ui-icons/src/assets/icons",
       "output": "/assets/icons"
   }
   ```

3. **Import the Module**  
   Import the package module in your `app.module.ts` file:

   ```typescript
   import { LcIconModule } from '@loyalty-cloud/ui-icons';

   @NgModule({
       declarations: [
           AppComponent
       ],
       imports: [
           BrowserModule,
           LcIconModule
       ],
       bootstrap: [AppComponent]
   })
   export class AppModule { }
   ```

4. **Use the Icon**  
   Add the tag in your component:

   ```html
   <lc-icon name="home"></lc-icon>
   ```

5. **Customize the Icon**  
   Add additional attributes like `size` and `color` to customize the icon:

   ```html
   <lc-icon name="home" size="15" color="#FFFFFF"></lc-icon>