my-icon-lib

Angular icon library providing a simple <lib-icon> component backed by SVG icon data.

This package is designed to be lightweight and easy to drop into any Angular application. It exposes a single icon component that renders inline SVGs from a predefined icon set.

Installation

Install from npm:

npm install my-icon-lib

Make sure your Angular version is compatible with the peer dependencies declared in the package (@angular/core and @angular/common).

Usage

1. Standalone component usage

If you are using standalone components in Angular, import the icon component directly:

import { Component } from '@angular/core';
import { MyIconComponent } from 'my-icon-lib';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyIconComponent],
  template: `
    <!-- Icon by name -->
    <lib-icon name="home"></lib-icon>

    <!-- Attribute-style usage -->
    <lib-icon filter></lib-icon>
    <lib-icon search></lib-icon>
  `,
})
export class AppComponent {}

2. NgModule usage

If you are using NgModules, import the library module and use the <lib-icon> component in your templates:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyIconLibModule } from 'my-icon-lib';

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

Then in your component template:

<lib-icon name="home"></lib-icon>
<lib-icon menu></lib-icon>
<lib-icon settings></lib-icon>

Available icons

The library ships with a predefined set of SVG icons. You can reference them either via the name input or via attribute-style inputs. Common examples include:

• home
• menu
• search
• settings
• user
• filter
• report
• email

Additional icons are available and defined internally in the MY_ICONS map.

Development

To build the library from source:

ng build my-icon-lib

This will emit the compiled package to dist/my-icon-lib.

To run unit tests:

ng test

Publishing

After building the library, you can publish it to the npm registry:

ng build my-icon-lib
cd dist/my-icon-lib
npm publish

Ensure that your package.json is correctly configured (name, version, description, author, license, and keywords) and that you are logged in to npm with an account that has permission to publish the chosen package name.