ng-svg-icon-sprite/fesm2022/ng-svg-icon-sprite.mjs

Angular 17+ package for generating and using inline SVG icons in your project

import * as i0 from '@angular/core';
import { Injectable, Optional, Directive, Input, Component, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';

class IconSpriteConfig {
    path;
}

/**
 * To access a global sprite path
 */
class IconSpriteService {
    spritePath;
    constructor(config) {
        if (config) {
            this.setPath(config.path);
        }
    }
    setPath(path) {
        this.spritePath = path;
    }
    getPath() {
        return this.spritePath;
    }
    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteService, deps: [{ token: IconSpriteConfig, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: IconSpriteConfig, decorators: [{
                    type: Optional
                }] }] });

/**
 * Set your own attribute key/value pairs on the generated SVG element, i.e. focusable="false"
 */
class IconSpriteDirective {
    renderer;
    el;
    attribute;
    constructor(renderer, el) {
        this.renderer = renderer;
        this.el = el;
    }
    ngOnInit() {
        if (Array.isArray(this.attribute[0])) {
            const attributeArr = this.attribute;
            attributeArr.forEach((obj) => {
                this.renderer.setAttribute(this.el.nativeElement, obj[0], obj[1] ? obj[1] : '');
            });
        }
        else {
            const attribute = this.attribute;
            if (attribute[0]) {
                this.renderer.setAttribute(this.el.nativeElement, attribute[0], attribute[1] ? attribute[1] : '');
            }
        }
    }
    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: IconSpriteDirective, selector: "[svgIconSpriteAttr]", inputs: { attribute: "attribute" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[svgIconSpriteAttr]'
                }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { attribute: [{
                type: Input
            }] } });

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: 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: 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: 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
            }] } });

/**
 * Using forRoot({ path: 'filepath' }), this module can be provided as a
 * singleton for the global application (including lazy loaded submodules).
 */
class IconSpriteModule {
    static forRoot(config) {
        return {
            ngModule: IconSpriteModule,
            providers: [
                { provide: IconSpriteConfig, useValue: config }
            ]
        };
    }
    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteModule, declarations: [IconSpriteComponent,
            IconSpriteDirective], imports: [CommonModule], exports: [IconSpriteComponent] });
    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconSpriteModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule],
                    declarations: [
                        IconSpriteComponent,
                        IconSpriteDirective
                    ],
                    exports: [IconSpriteComponent]
                }]
        }] });

/*
 * Public API Surface of icon-sprite
 */

/**
 * Generated bundle index. Do not edit.
 */

export { IconSpriteComponent, IconSpriteConfig, IconSpriteModule, IconSpriteService };
//# sourceMappingURL=ng-svg-icon-sprite.mjs.map