@ngaox/icons
Version:
Inline SVG icons from (src | files | your favorite icons library | ...)!
73 lines • 10.4 kB
JavaScript
import { Component, DestroyRef, HostBinding, effect, inject, input, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { DomSanitizer } from '@angular/platform-browser';
import { IconsService } from './icons.service';
import * as i0 from "@angular/core";
import * as i1 from "./icons.service";
import * as i2 from "@angular/platform-browser";
export class NgaoxIconComponent {
get _width() {
return this.width();
}
get _height() {
return this.height();
}
get _svgContent() {
return this.svgContent();
}
constructor(service, sanitizer) {
this.service = service;
this.sanitizer = sanitizer;
this.name = input.required();
this.url = input();
this.width = input();
this.height = input();
this.destroyRef = inject(DestroyRef);
this.svgContent = signal(this.sanitizer.bypassSecurityTrustHtml(this.service.getFallbackIcon()));
effect(() => {
const name = this.name();
const url = this.url();
let icon;
if (url) {
icon = this.service.add(name, {
url,
lazy: true
});
}
else {
icon = this.service.get(name);
}
icon.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
next: svg => {
const outerHTML = svg?.outerHTML;
if (!outerHTML) {
throw new Error(`Icon '${name}' not found or has incorrect content.`);
}
this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(outerHTML));
},
error: () => {
this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(this.service.getFallbackIcon()));
throw new Error(`Icon '${name}' not found or has incorrect content.`);
}
});
}, {
allowSignalWrites: true
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgaoxIconComponent, deps: [{ token: i1.IconsService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: NgaoxIconComponent, isStandalone: true, selector: "ngaox-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "this._width", "style.height": "this._height", "innerHTML": "this._svgContent" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{display:inline-block;vertical-align:middle}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgaoxIconComponent, decorators: [{
type: Component,
args: [{ selector: 'ngaox-icon', template: ``, standalone: true, styles: [":host{display:inline-block;vertical-align:middle}\n"] }]
}], ctorParameters: () => [{ type: i1.IconsService }, { type: i2.DomSanitizer }], propDecorators: { _width: [{
type: HostBinding,
args: ['style.width']
}], _height: [{
type: HostBinding,
args: ['style.height']
}], _svgContent: [{
type: HostBinding,
args: ['innerHTML']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9pY29ucy9zcmMvbGliL2ljb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxNQUFNLEVBQ04sTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEVBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDaEUsT0FBTyxFQUFFLFlBQVksRUFBWSxNQUFNLDJCQUEyQixDQUFDO0FBRW5FLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7OztBQWEvQyxNQUFNLE9BQU8sa0JBQWtCO0lBVzdCLElBQWdDLE1BQU07UUFDcEMsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUNELElBQWlDLE9BQU87UUFDdEMsT0FBTyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVELElBQThCLFdBQVc7UUFDdkMsT0FBTyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVELFlBQ1UsT0FBcUIsRUFDckIsU0FBdUI7UUFEdkIsWUFBTyxHQUFQLE9BQU8sQ0FBYztRQUNyQixjQUFTLEdBQVQsU0FBUyxDQUFjO1FBdkJ4QixTQUFJLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBQ2hDLFFBQUcsR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUN0QixVQUFLLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDeEIsV0FBTSxHQUFHLEtBQUssRUFBVSxDQUFDO1FBQ2pCLGVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFFeEMsZUFBVSxHQUFHLE1BQU0sQ0FDMUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLGVBQWUsRUFBRSxDQUFDLENBQ3ZFLENBQUM7UUFpQkEsTUFBTSxDQUNKLEdBQUcsRUFBRTtZQUNILE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUN6QixNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDdkIsSUFBSSxJQUF3QyxDQUFDO1lBQzdDLElBQUksR0FBRyxFQUFFLENBQUM7Z0JBQ1IsSUFBSSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksRUFBRTtvQkFDNUIsR0FBRztvQkFDSCxJQUFJLEVBQUUsSUFBSTtpQkFDWCxDQUFDLENBQUM7WUFDTCxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2hDLENBQUM7WUFDRCxJQUFJLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQztnQkFDdkQsSUFBSSxFQUFFLEdBQUcsQ0FBQyxFQUFFO29CQUNWLE1BQU0sU0FBUyxHQUFHLEdBQUcsRUFBRSxTQUFTLENBQUM7b0JBQ2pDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQzt3QkFDZixNQUFNLElBQUksS0FBSyxDQUNiLFNBQVMsSUFBSSx1Q0FBdUMsQ0FDckQsQ0FBQztvQkFDSixDQUFDO29CQUNELElBQUksQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUNqQixJQUFJLENBQUMsU0FBUyxDQUFDLHVCQUF1QixDQUFDLFNBQVMsQ0FBQyxDQUNsRCxDQUFDO2dCQUNKLENBQUM7Z0JBQ0QsS0FBSyxFQUFFLEdBQUcsRUFBRTtvQkFDVixJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FDakIsSUFBSSxDQUFDLFNBQVMsQ0FBQyx1QkFBdUIsQ0FDcEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxlQUFlLEVBQUUsQ0FDL0IsQ0FDRixDQUFDO29CQUNGLE1BQU0sSUFBSSxLQUFLLENBQ2IsU0FBUyxJQUFJLHVDQUF1QyxDQUNyRCxDQUFDO2dCQUNKLENBQUM7YUFDRixDQUFDLENBQUM7UUFDTCxDQUFDLEVBQ0Q7WUFDRSxpQkFBaUIsRUFBRSxJQUFJO1NBQ3hCLENBQ0YsQ0FBQztJQUNKLENBQUM7OEdBbkVVLGtCQUFrQjtrR0FBbEIsa0JBQWtCLG9xQkFUbkIsRUFBRTs7MkZBU0Qsa0JBQWtCO2tCQVg5QixTQUFTOytCQUNFLFlBQVksWUFDWixFQUFFLGNBQ0EsSUFBSTs0R0FtQmdCLE1BQU07c0JBQXJDLFdBQVc7dUJBQUMsYUFBYTtnQkFHTyxPQUFPO3NCQUF2QyxXQUFXO3VCQUFDLGNBQWM7Z0JBSUcsV0FBVztzQkFBeEMsV0FBVzt1QkFBQyxXQUFXIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgRGVzdHJveVJlZixcclxuICBIb3N0QmluZGluZyxcclxuICBlZmZlY3QsXHJcbiAgaW5qZWN0LFxyXG4gIGlucHV0LFxyXG4gIHNpZ25hbFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XHJcbmltcG9ydCB7IERvbVNhbml0aXplciwgU2FmZUh0bWwgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcclxuaW1wb3J0IHsgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBJY29uc1NlcnZpY2UgfSBmcm9tICcuL2ljb25zLnNlcnZpY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ2FveC1pY29uJyxcclxuICB0ZW1wbGF0ZTogYGAsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBzdHlsZXM6IGBcclxuICAgIDpob3N0IHtcclxuICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xyXG4gICAgICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xyXG4gICAgfVxyXG4gIGBcclxufSlcclxuZXhwb3J0IGNsYXNzIE5nYW94SWNvbkNvbXBvbmVudCB7XHJcbiAgcmVhZG9ubHkgbmFtZSA9IGlucHV0LnJlcXVpcmVkPHN0cmluZz4oKTtcclxuICByZWFkb25seSB1cmwgPSBpbnB1dDxzdHJpbmc+KCk7XHJcbiAgcmVhZG9ubHkgd2lkdGggPSBpbnB1dDxzdHJpbmc+KCk7XHJcbiAgcmVhZG9ubHkgaGVpZ2h0ID0gaW5wdXQ8c3RyaW5nPigpO1xyXG4gIHByaXZhdGUgcmVhZG9ubHkgZGVzdHJveVJlZiA9IGluamVjdChEZXN0cm95UmVmKTtcclxuXHJcbiAgcmVhZG9ubHkgc3ZnQ29udGVudCA9IHNpZ25hbDxTYWZlSHRtbD4oXHJcbiAgICB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0SHRtbCh0aGlzLnNlcnZpY2UuZ2V0RmFsbGJhY2tJY29uKCkpXHJcbiAgKTtcclxuXHJcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aCcpIGdldCBfd2lkdGgoKSB7XHJcbiAgICByZXR1cm4gdGhpcy53aWR0aCgpO1xyXG4gIH1cclxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmhlaWdodCcpIGdldCBfaGVpZ2h0KCkge1xyXG4gICAgcmV0dXJuIHRoaXMuaGVpZ2h0KCk7XHJcbiAgfVxyXG5cclxuICBASG9zdEJpbmRpbmcoJ2lubmVySFRNTCcpIGdldCBfc3ZnQ29udGVudCgpIHtcclxuICAgIHJldHVybiB0aGlzLnN2Z0NvbnRlbnQoKTtcclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBzZXJ2aWNlOiBJY29uc1NlcnZpY2UsXHJcbiAgICBwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyXHJcbiAgKSB7XHJcbiAgICBlZmZlY3QoXHJcbiAgICAgICgpID0+IHtcclxuICAgICAgICBjb25zdCBuYW1lID0gdGhpcy5uYW1lKCk7XHJcbiAgICAgICAgY29uc3QgdXJsID0gdGhpcy51cmwoKTtcclxuICAgICAgICBsZXQgaWNvbjogT2JzZXJ2YWJsZTxTVkdFbGVtZW50IHwgdW5kZWZpbmVkPjtcclxuICAgICAgICBpZiAodXJsKSB7XHJcbiAgICAgICAgICBpY29uID0gdGhpcy5zZXJ2aWNlLmFkZChuYW1lLCB7XHJcbiAgICAgICAgICAgIHVybCxcclxuICAgICAgICAgICAgbGF6eTogdHJ1ZVxyXG4gICAgICAgICAgfSk7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgIGljb24gPSB0aGlzLnNlcnZpY2UuZ2V0KG5hbWUpO1xyXG4gICAgICAgIH1cclxuICAgICAgICBpY29uLnBpcGUodGFrZVVudGlsRGVzdHJveWVkKHRoaXMuZGVzdHJveVJlZikpLnN1YnNjcmliZSh7XHJcbiAgICAgICAgICBuZXh0OiBzdmcgPT4ge1xyXG4gICAgICAgICAgICBjb25zdCBvdXRlckhUTUwgPSBzdmc/Lm91dGVySFRNTDtcclxuICAgICAgICAgICAgaWYgKCFvdXRlckhUTUwpIHtcclxuICAgICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXHJcbiAgICAgICAgICAgICAgICBgSWNvbiAnJHtuYW1lfScgbm90IGZvdW5kIG9yIGhhcyBpbmNvcnJlY3QgY29udGVudC5gXHJcbiAgICAgICAgICAgICAgKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICB0aGlzLnN2Z0NvbnRlbnQuc2V0KFxyXG4gICAgICAgICAgICAgIHRoaXMuc2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RIdG1sKG91dGVySFRNTClcclxuICAgICAgICAgICAgKTtcclxuICAgICAgICAgIH0sXHJcbiAgICAgICAgICBlcnJvcjogKCkgPT4ge1xyXG4gICAgICAgICAgICB0aGlzLnN2Z0NvbnRlbnQuc2V0KFxyXG4gICAgICAgICAgICAgIHRoaXMuc2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RIdG1sKFxyXG4gICAgICAgICAgICAgICAgdGhpcy5zZXJ2aWNlLmdldEZhbGxiYWNrSWNvbigpXHJcbiAgICAgICAgICAgICAgKVxyXG4gICAgICAgICAgICApO1xyXG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXHJcbiAgICAgICAgICAgICAgYEljb24gJyR7bmFtZX0nIG5vdCBmb3VuZCBvciBoYXMgaW5jb3JyZWN0IGNvbnRlbnQuYFxyXG4gICAgICAgICAgICApO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgIH0pO1xyXG4gICAgICB9LFxyXG4gICAgICB7XHJcbiAgICAgICAgYWxsb3dTaWduYWxXcml0ZXM6IHRydWVcclxuICAgICAgfVxyXG4gICAgKTtcclxuICB9XHJcbn1cclxuIl19