@triangular/rpg-awesome-icons
Version:
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.
109 lines (102 loc) • 5.43 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, NgModule } from '@angular/core';
import { DOCUMENT } from '@angular/common';
class RpgAwesomeIconsRegistry {
constructor() {
this.registry = new Map();
}
registerIcons(icons) {
icons.forEach((icon) => this.registry.set(icon.name, icon.data));
}
getIcon(iconName) {
if (!this.registry.has(iconName)) {
console.warn(`We could not find the dinosaur Icon with the name ${iconName}, did you add it to the Icon registry?`);
}
return this.registry.get(iconName);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RpgAwesomeIconsRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RpgAwesomeIconsRegistry, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RpgAwesomeIconsRegistry, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class RpgAwesomeIconComponent {
set name(iconName) {
if (this.svgIcon) {
this.element.nativeElement.removeChild(this.svgIcon);
}
const svgData = this.iconsRegistry.getIcon(iconName);
if (svgData) {
this.svgIcon = this.svgElementFromString(svgData);
this.element.nativeElement.appendChild(this.svgIcon);
}
}
constructor(element, iconsRegistry, document) {
this.element = element;
this.iconsRegistry = iconsRegistry;
this.document = document;
}
svgElementFromString(svgContent) {
const div = this.document.createElement('DIV');
if (div instanceof HTMLElement) {
div.innerHTML = svgContent;
return div.querySelector('svg') || this.document.createElementNS('http://www.w3.org/2000/svg', 'path');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RpgAwesomeIconComponent, deps: [{ token: i0.ElementRef }, { token: RpgAwesomeIconsRegistry }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: RpgAwesomeIconComponent, isStandalone: true, selector: "rpg-awesome-icon", inputs: { name: "name" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RpgAwesomeIconComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'rpg-awesome-icon',
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: RpgAwesomeIconsRegistry }, { type: Document, decorators: [{
type: Optional
}, {
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { name: [{
type: Input
}] } });
class RpgAwesomeIconsModule {
static forRoot() {
return {
ngModule: RpgAwesomeIconsModule,
providers: [
RpgAwesomeIconsRegistry,
],
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RpgAwesomeIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: RpgAwesomeIconsModule, imports: [RpgAwesomeIconComponent], exports: [RpgAwesomeIconComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RpgAwesomeIconsModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RpgAwesomeIconsModule, decorators: [{
type: NgModule,
args: [{
declarations: [],
imports: [RpgAwesomeIconComponent],
exports: [RpgAwesomeIconComponent]
}]
}] });
/*
* Public API Surface of the icons lib
*/
// export * from './lib/icons'; // exported separately through the build process.
// Otherwise tree-shaking doesn't fully work (as they would be included in the lib's fesm module
// Which is usually what we want, see:
// https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview#heading=h.ve6e6mrugckx
/**
* Generated bundle index. Do not edit.
*/
export { RpgAwesomeIconComponent, RpgAwesomeIconsModule, RpgAwesomeIconsRegistry };
//# sourceMappingURL=triangular-rpg-awesome-icons.mjs.map