@progress/kendo-angular-icons
Version:
Kendo UI Angular component starter template
123 lines (122 loc) • 5.38 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ElementRef, Input, Renderer2, HostBinding, isDevMode, ChangeDetectionStrategy } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";
import { isDocumentAvailable } from '@progress/kendo-angular-common';
import { IconBaseDirective } from '../common/icon-base';
import * as i0 from "@angular/core";
import * as i1_1 from "@angular/platform-browser";
const areSame = (i1, i2) => i1?.name === i2?.name && i1.content === i2.content && i1.viewBox === i2.viewBox;
/**
* Represents the [Kendo UI SVG Icon component for Angular](slug:overview_svgicon).
* Used to display icons from the [Kendo UI SVG Icons](slug:svgicon_list) collection.
*
* @example
* ```ts
* import { KENDO_ICONS } from "@progress/kendo-angular-icons";
* import { paperclipIcon } from "@progress/kendo-svg-icons";
*
* @Component({
* selector: "my-app",
* imports: [KENDO_ICONS],
* template: `
* <kendo-svg-icon [icon]="paperclipIcon"></kendo-svg-icon>
* `,
* providers: [],
* })
* export class AppComponent {
* public paperclipIcon = paperclipIcon;
* }
* ```
*/
export class SVGIconComponent extends IconBaseDirective {
domSanitizer;
element;
renderer;
hostClass = true;
hostAriaHidden = true;
/**
* Sets the `SVGIcon` to render. Supports all [Kendo UI SVG Icons](slug:svgicon_list).
*/
set icon(icon) {
const element = this.element.nativeElement;
const hasDocument = isDocumentAvailable();
const newName = icon?.name && icon.name !== this._icon?.name;
if (this._icon && this._icon.name && newName && hasDocument) {
this.renderer.removeClass(element, `k-svg-i-${this._icon.name}`);
}
if (!areSame(icon, this._icon)) {
this._icon = icon;
}
if (hasDocument && newName) {
this.renderer.addClass(element, `k-svg-i-${this._icon.name}`);
}
}
get icon() {
return this._icon;
}
get content() {
return this.domSanitizer.bypassSecurityTrustHtml(this.icon.content);
}
get visible() {
return this.icon && isDocumentAvailable();
}
_icon;
constructor(domSanitizer, element, renderer) {
super(element, renderer);
this.domSanitizer = domSanitizer;
this.element = element;
this.renderer = renderer;
}
ngOnInit() {
this.verifyIconProperty();
}
verifyIconProperty() {
if (!isDevMode()) {
return;
}
if (!this._icon) {
throw new Error(`
Invalid configuration.
The input [icon] is required for the Kendo UI SVG Icon component for Angular.
See https://www.telerik.com/kendo-angular-ui/components/icons/svg-icon
`);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SVGIconComponent, deps: [{ token: i1_1.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SVGIconComponent, isStandalone: true, selector: "kendo-svg-icon, kendo-svgicon", inputs: { icon: "icon" }, host: { properties: { "class.k-svg-icon": "this.hostClass", "class.k-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoSVGIcon"], usesInheritance: true, ngImport: i0, template: `
(visible) {
<svg [style.pointerEvents]="'none'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
[attr.viewBox]="icon.viewBox" [innerHTML]="content">
</svg>
}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SVGIconComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoSVGIcon',
selector: 'kendo-svg-icon, kendo-svgicon',
template: `
(visible) {
<svg [style.pointerEvents]="'none'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
[attr.viewBox]="icon.viewBox" [innerHTML]="content">
</svg>
}`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: []
}]
}], ctorParameters: () => [{ type: i1_1.DomSanitizer }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-svg-icon']
}, {
type: HostBinding,
args: ['class.k-icon']
}], hostAriaHidden: [{
type: HostBinding,
args: ['attr.aria-hidden']
}], icon: [{
type: Input
}] } });