Angular RpgAwesome Lazy Loaded Icon Lib

Use the cool icons from RPGAwesome in your app, fully tree-shaked and only loaded when necessary. Injected into the dom, and therefore IE compatible. Click a button above to load a module containing the icons starting with the given letter!

Icons

Click a button above to load a module containing the icons starting with the given letter!

Usage

Step 1: Install

Install the npm package.

npm i @triangular/rpg-awesome-icons

Step 2: Add to NgModule Imports

Then, add the RpgAwesomeIconsModule to the imports of your app, as follows:

import { NgModule } from '@angular/core';
import { RpgAwesomeIconsModule } from '@triangular/rpg-awesome-icons';

@NgModule({
    declarations: [
    ],
    imports: [
      RpgAwesomeIconsModule,
    ],
    providers: [],
    bootstrap: [],
})
export class AppModule { }

Step 3: Register the Icons in the Registry

The tree-shaking magic happens when you import icons from @triangular/rpg-awesome-icons/icons and register them in the RpgAwesomeIconsRegistry. By explicitly importing the icons where they are required, the tree shaking can ensure they are loaded when they are needed. If an icon is not required, it will not be bundled in your application. If an icon is required in a feature module, it will be bundled with the feature module. And if the icon is bundled in multiple feature modules, it will be bundled with the common bundle - in order to not download the same icon multiple times.

Step 3a: Angular App with Modules

import { Component } from '@angular/core';
import { RpgAwesomeIconsRegistry } from '@triangular/rpg-awesome-icons';
import {
  rpgAwesomeIconAnkh,
  // add more icons here
} from '@triangular/rpg-awesome-icons';

@Component({
  selector: 'app-some-component-with-icons',
  template: '<rpg-awesome-icon name="ankh"></rpg-awesome-icon>',
  styles: 'svg { color: #ccc; fill: currentColor; width: 5rem; height: 5rem; }',
})
export class SomeComponentWithIcons {

  constructor(private registry: RpgAwesomeIconsRegistry) {
    registry.registerIcons([
      rpgAwesomeIconAnkh,
      // add more icons here
    ]);
  }
}

Step 3b: Standalone Angular App

import { Component } from '@angular/core';
import { RpgAwesomeIconComponent, RpgAwesomeIconsRegistry } from '@triangular/rpg-awesome-icons';
import {
  rpgAwesomeIconAnkh,
  // add more icons here
} from '@triangular/rpg-awesome-icons';

@Component({
  selector: 'app-some-component-with-icons',
  template: '<rpg-awesome-icon name="ankh"></rpg-awesome-icon>',
  styles: 'svg { color: #ccc; fill: currentColor; width: 5rem; height: 5rem; }',
  standalone: true,
  imports: [
    RpgAwesomeIconComponent,
  ]
})
export class SomeComponentWithIcons {

  constructor(private registry: RpgAwesomeIconsRegistry) {
    registry.registerIcons([
      rpgAwesomeIconAnkh,
      // add more icons here
    ]);
  }
}

Step 4: Enjoy using the Icons with a Peace of Mind

Once an icon has been registered, it can simply be used in your template. If you get the error can't bind to 'name' since it isn't a known property of 'rpg-awesome-icon', you need to include the RpgAwesomeIconsModule in your module.

<rpg-awesome-icon name="ankh"></rpg-awesome-icon>

Source Code

The source code is published at akehir.com and mirrored on Github.

The package ist published to npm at @triangular/rpg-awesome-icons.

License

This project is licensed under the MIT License