ng-svg-icon-sprite
Version:
Angular 17+ package for generating and using inline SVG icons in your project
49 lines • 10.8 kB
JavaScript
import { Component, Input } from '@angular/core';
import { IconSpriteService } from './icon-sprite.service';
import * as i0 from "@angular/core";
import * as i1 from "./icon-sprite.service";
import * as i2 from "@angular/common";
import * as i3 from "./icon-sprite.directive";
export class IconSpriteComponent {
iconSpriteService;
src;
classes = 'icon';
width = '100%';
height;
viewBox;
preserveAspectRatio = 'xMinYMax meet';
attribute;
title;
constructor(iconSpriteService) {
this.iconSpriteService = iconSpriteService;
}
ngOnChanges(changes) {
// If the src does not contain a # and a spritePath is set via the service, concatenate them
if (this.src && !this.src.includes('#') && this.iconSpriteService.spritePath) {
this.src = `${this.iconSpriteService.getPath()}#${this.src}`;
}
}
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteComponent, deps: [{ token: i1.IconSpriteService }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: IconSpriteComponent, selector: "svg-icon-sprite", inputs: { src: "src", classes: "classes", width: "width", height: "height", viewBox: "viewBox", preserveAspectRatio: "preserveAspectRatio", attribute: "attribute", title: "title" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!viewBox && !attribute\">\n <svg [attr.class]=\"classes\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\">\n <title *ngIf=\"title && src\" [attr.id]=\"src.split('#')[1] + '-title'\">{{title}}</title>\n <use [attr.xlink:href]=\"src\"></use>\n </svg>\n</ng-container>\n\n<ng-container *ngIf=\"!viewBox && attribute\">\n <svg [attr.class]=\"classes\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n svgIconSpriteAttr [attribute]=\"attribute\">\n <title *ngIf=\"title && src\" [attr.id]=\"src.split('#')[1] + '-title'\">{{title}}</title>\n <use [attr.xlink:href]=\"src\"></use>\n </svg>\n</ng-container>\n\n<ng-container *ngIf=\"viewBox && !attribute\">\n <svg [attr.class]=\"classes\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n [attr.viewBox]=\"viewBox\"\n [attr.preserveAspectRatio]=\"preserveAspectRatio\">\n <title *ngIf=\"title && src\" [attr.id]=\"src.split('#')[1] + '-title'\">{{title}}</title>\n <use [attr.xlink:href]=\"src\"></use>\n </svg>\n</ng-container>\n\n<ng-container *ngIf=\"viewBox && attribute\">\n <svg [attr.class]=\"classes\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n [attr.viewBox]=\"viewBox\"\n [attr.preserveAspectRatio]=\"preserveAspectRatio\"\n svgIconSpriteAttr [attribute]=\"attribute\">\n <title *ngIf=\"title && src\" [attr.id]=\"src.split('#')[1] + '-title'\">{{title}}</title>\n <use [attr.xlink:href]=\"src\"></use>\n </svg>\n</ng-container>\n", styles: [":host use,:host svg{fill:currentColor}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.IconSpriteDirective, selector: "[svgIconSpriteAttr]", inputs: ["attribute"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteComponent, decorators: [{
type: Component,
args: [{ selector: 'svg-icon-sprite', template: "<ng-container *ngIf=\"!viewBox && !attribute\">\n <svg [attr.class]=\"classes\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\">\n <title *ngIf=\"title && src\" [attr.id]=\"src.split('#')[1] + '-title'\">{{title}}</title>\n <use [attr.xlink:href]=\"src\"></use>\n </svg>\n</ng-container>\n\n<ng-container *ngIf=\"!viewBox && attribute\">\n <svg [attr.class]=\"classes\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n svgIconSpriteAttr [attribute]=\"attribute\">\n <title *ngIf=\"title && src\" [attr.id]=\"src.split('#')[1] + '-title'\">{{title}}</title>\n <use [attr.xlink:href]=\"src\"></use>\n </svg>\n</ng-container>\n\n<ng-container *ngIf=\"viewBox && !attribute\">\n <svg [attr.class]=\"classes\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n [attr.viewBox]=\"viewBox\"\n [attr.preserveAspectRatio]=\"preserveAspectRatio\">\n <title *ngIf=\"title && src\" [attr.id]=\"src.split('#')[1] + '-title'\">{{title}}</title>\n <use [attr.xlink:href]=\"src\"></use>\n </svg>\n</ng-container>\n\n<ng-container *ngIf=\"viewBox && attribute\">\n <svg [attr.class]=\"classes\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n [attr.viewBox]=\"viewBox\"\n [attr.preserveAspectRatio]=\"preserveAspectRatio\"\n svgIconSpriteAttr [attribute]=\"attribute\">\n <title *ngIf=\"title && src\" [attr.id]=\"src.split('#')[1] + '-title'\">{{title}}</title>\n <use [attr.xlink:href]=\"src\"></use>\n </svg>\n</ng-container>\n", styles: [":host use,:host svg{fill:currentColor}\n"] }]
}], ctorParameters: () => [{ type: i1.IconSpriteService }], propDecorators: { src: [{
type: Input
}], classes: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}], viewBox: [{
type: Input
}], preserveAspectRatio: [{
type: Input
}], attribute: [{
type: Input
}], title: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1zcHJpdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvaWNvbi1zcHJpdGUvc3JjL2xpYi9pY29uLXNwcml0ZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9pY29uLXNwcml0ZS9zcmMvbGliL2ljb24tc3ByaXRlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzVELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7OztBQU8xRCxNQUFNLE9BQU8sbUJBQW1CO0lBWXBCO0lBVk0sR0FBRyxDQUFTO0lBQ1osT0FBTyxHQUFHLE1BQU0sQ0FBQztJQUNqQixLQUFLLEdBQUcsTUFBTSxDQUFDO0lBQ2YsTUFBTSxDQUFTO0lBQ2YsT0FBTyxDQUFTO0lBQ2hCLG1CQUFtQixHQUFHLGVBQWUsQ0FBQztJQUN0QyxTQUFTLENBQTZDO0lBQ3RELEtBQUssQ0FBUztJQUU5QixZQUNVLGlCQUFvQztRQUFwQyxzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO0lBQzNDLENBQUM7SUFFSixXQUFXLENBQUMsT0FBTztRQUNqQiw0RkFBNEY7UUFDNUYsSUFBSSxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLGlCQUFpQixDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQzdFLElBQUksQ0FBQyxHQUFHLEdBQUcsR0FBSSxJQUFJLENBQUMsaUJBQWlCLENBQUMsT0FBTyxFQUFHLElBQUssSUFBSSxDQUFDLEdBQUksRUFBRSxDQUFDO1FBQ25FLENBQUM7SUFDSCxDQUFDOzBIQXBCVSxtQkFBbUI7OEdBQW5CLG1CQUFtQixrUUNSaEMsZ2pEQXlDQTs7MkZEakNhLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDRSxpQkFBaUI7c0ZBTVgsR0FBRztzQkFBbEIsS0FBSztnQkFDVSxPQUFPO3NCQUF0QixLQUFLO2dCQUNVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsTUFBTTtzQkFBckIsS0FBSztnQkFDVSxPQUFPO3NCQUF0QixLQUFLO2dCQUNVLG1CQUFtQjtzQkFBbEMsS0FBSztnQkFDVSxTQUFTO3NCQUF4QixLQUFLO2dCQUNVLEtBQUs7c0JBQXBCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25TcHJpdGVTZXJ2aWNlIH0gZnJvbSAnLi9pY29uLXNwcml0ZS5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3ZnLWljb24tc3ByaXRlJyxcbiAgc3R5bGVVcmxzOiBbJy4vaWNvbi1zcHJpdGUuY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2ljb24tc3ByaXRlLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBJY29uU3ByaXRlQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcblxuICBASW5wdXQoKSBwdWJsaWMgc3JjOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHB1YmxpYyBjbGFzc2VzID0gJ2ljb24nO1xuICBASW5wdXQoKSBwdWJsaWMgd2lkdGggPSAnMTAwJSc7XG4gIEBJbnB1dCgpIHB1YmxpYyBoZWlnaHQ6IHN0cmluZztcbiAgQElucHV0KCkgcHVibGljIHZpZXdCb3g6IHN0cmluZztcbiAgQElucHV0KCkgcHVibGljIHByZXNlcnZlQXNwZWN0UmF0aW8gPSAneE1pbllNYXggbWVldCc7XG4gIEBJbnB1dCgpIHB1YmxpYyBhdHRyaWJ1dGU6IFtzdHJpbmcsIHN0cmluZ10gfCBBcnJheTxbc3RyaW5nLCBzdHJpbmddPjtcbiAgQElucHV0KCkgcHVibGljIHRpdGxlOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBpY29uU3ByaXRlU2VydmljZTogSWNvblNwcml0ZVNlcnZpY2VcbiAgKSB7fVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXMpIHtcbiAgICAvLyBJZiB0aGUgc3JjIGRvZXMgbm90IGNvbnRhaW4gYSAjIGFuZCBhIHNwcml0ZVBhdGggaXMgc2V0IHZpYSB0aGUgc2VydmljZSwgY29uY2F0ZW5hdGUgdGhlbVxuICAgIGlmICh0aGlzLnNyYyAmJiAhdGhpcy5zcmMuaW5jbHVkZXMoJyMnKSAmJiB0aGlzLmljb25TcHJpdGVTZXJ2aWNlLnNwcml0ZVBhdGgpIHtcbiAgICAgIHRoaXMuc3JjID0gYCR7IHRoaXMuaWNvblNwcml0ZVNlcnZpY2UuZ2V0UGF0aCgpIH0jJHsgdGhpcy5zcmMgfWA7XG4gICAgfVxuICB9XG59XG4iLCI8bmctY29udGFpbmVyICpuZ0lmPVwiIXZpZXdCb3ggJiYgIWF0dHJpYnV0ZVwiPlxuICA8c3ZnIFthdHRyLmNsYXNzXT1cImNsYXNzZXNcIlxuICAgICAgIFthdHRyLndpZHRoXT1cIndpZHRoXCJcbiAgICAgICBbYXR0ci5oZWlnaHRdPVwiaGVpZ2h0IHx8IHdpZHRoXCI+XG4gICAgPHRpdGxlICpuZ0lmPVwidGl0bGUgJiYgc3JjXCIgW2F0dHIuaWRdPVwic3JjLnNwbGl0KCcjJylbMV0gKyAnLXRpdGxlJ1wiPnt7dGl0bGV9fTwvdGl0bGU+XG4gICAgPHVzZSBbYXR0ci54bGluazpocmVmXT1cInNyY1wiPjwvdXNlPlxuICA8L3N2Zz5cbjwvbmctY29udGFpbmVyPlxuXG48bmctY29udGFpbmVyICpuZ0lmPVwiIXZpZXdCb3ggJiYgYXR0cmlidXRlXCI+XG4gIDxzdmcgW2F0dHIuY2xhc3NdPVwiY2xhc3Nlc1wiXG4gICAgICAgW2F0dHIud2lkdGhdPVwid2lkdGhcIlxuICAgICAgIFthdHRyLmhlaWdodF09XCJoZWlnaHQgfHwgd2lkdGhcIlxuICAgICAgIHN2Z0ljb25TcHJpdGVBdHRyIFthdHRyaWJ1dGVdPVwiYXR0cmlidXRlXCI+XG4gICAgPHRpdGxlICpuZ0lmPVwidGl0bGUgJiYgc3JjXCIgW2F0dHIuaWRdPVwic3JjLnNwbGl0KCcjJylbMV0gKyAnLXRpdGxlJ1wiPnt7dGl0bGV9fTwvdGl0bGU+XG4gICAgPHVzZSBbYXR0ci54bGluazpocmVmXT1cInNyY1wiPjwvdXNlPlxuICA8L3N2Zz5cbjwvbmctY29udGFpbmVyPlxuXG48bmctY29udGFpbmVyICpuZ0lmPVwidmlld0JveCAmJiAhYXR0cmlidXRlXCI+XG4gIDxzdmcgW2F0dHIuY2xhc3NdPVwiY2xhc3Nlc1wiXG4gICAgICAgW2F0dHIud2lkdGhdPVwid2lkdGhcIlxuICAgICAgIFthdHRyLmhlaWdodF09XCJoZWlnaHQgfHwgd2lkdGhcIlxuICAgICAgIFthdHRyLnZpZXdCb3hdPVwidmlld0JveFwiXG4gICAgICAgW2F0dHIucHJlc2VydmVBc3BlY3RSYXRpb109XCJwcmVzZXJ2ZUFzcGVjdFJhdGlvXCI+XG4gICAgPHRpdGxlICpuZ0lmPVwidGl0bGUgJiYgc3JjXCIgW2F0dHIuaWRdPVwic3JjLnNwbGl0KCcjJylbMV0gKyAnLXRpdGxlJ1wiPnt7dGl0bGV9fTwvdGl0bGU+XG4gICAgPHVzZSBbYXR0ci54bGluazpocmVmXT1cInNyY1wiPjwvdXNlPlxuICA8L3N2Zz5cbjwvbmctY29udGFpbmVyPlxuXG48bmctY29udGFpbmVyICpuZ0lmPVwidmlld0JveCAmJiBhdHRyaWJ1dGVcIj5cbiAgPHN2ZyBbYXR0ci5jbGFzc109XCJjbGFzc2VzXCJcbiAgICAgICBbYXR0ci53aWR0aF09XCJ3aWR0aFwiXG4gICAgICAgW2F0dHIuaGVpZ2h0XT1cImhlaWdodCB8fCB3aWR0aFwiXG4gICAgICAgW2F0dHIudmlld0JveF09XCJ2aWV3Qm94XCJcbiAgICAgICBbYXR0ci5wcmVzZXJ2ZUFzcGVjdFJhdGlvXT1cInByZXNlcnZlQXNwZWN0UmF0aW9cIlxuICAgICAgIHN2Z0ljb25TcHJpdGVBdHRyIFthdHRyaWJ1dGVdPVwiYXR0cmlidXRlXCI+XG4gICAgPHRpdGxlICpuZ0lmPVwidGl0bGUgJiYgc3JjXCIgW2F0dHIuaWRdPVwic3JjLnNwbGl0KCcjJylbMV0gKyAnLXRpdGxlJ1wiPnt7dGl0bGV9fTwvdGl0bGU+XG4gICAgPHVzZSBbYXR0ci54bGluazpocmVmXT1cInNyY1wiPjwvdXNlPlxuICA8L3N2Zz5cbjwvbmctY29udGFpbmVyPlxuIl19