This documentation outlines the steps to add icons, build, publish, and use the LC Icons Angular NPM package in the project.
npm install lc-icons-npm-packageThis documentation outlines the steps to add icons, build, publish, and use the LC Icons Angular NPM package in the project.
---
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`
---
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:
`bash`
npm version patch
---
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 lc-icons-npm-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:
`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.
---
To use the icons, follow these steps:
1. Install the Package
Install the package using:
`bash`
npm install lc-icons-npm-package
2. Update angular.json
Add the following configuration in the assets block of angular.json:
`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:
`typescript
import { LcIconModule } from '
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LcIconModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
`
4. Use the Icon
Add the tag in your component:
`html`
5. Customize the Icon
Add additional attributes like size and color to customize the icon:
``html