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