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:

   <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/lc-icons-npm-package/.

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

   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:

   ng build lc-icons-npm-package

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/lc-icons-npm-package/.

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

   npm login

3. Publish the Package
   Publish the package using:

   npm publish

4. Verify the Package
   Check that your package is available on npmjs.com.

How to use?

To use the icons, follow these steps:

1. Install the Package
   Install the package using:

   npm install lc-icons-npm-package

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

   {
       "glob": "**/*",
       "input": "node_modules/lc-icons-npm-package/src/assets/icons",
       "output": "/assets/icons"
   }

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

   import { LcIconModule } from '<package-name>';
   
   @NgModule({
       declarations: [
           AppComponent
       ],
       imports: [
           BrowserModule,
           LcIconModule
       ],
       bootstrap: [AppComponent]
   })
   export class AppModule { }

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

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

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

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