\\n
SVG-Icon-Sprite Demo \\n\\n
\\n Angular package that provides both a solution for generating sprites and a component for including them.\\n
\\n\\n
The Basics (reference, width and styling) \\n\\n
To display the icons in original size match the [width]
and [height]
with the width/height of the equivalent SVG.
\\n\\n
\\n \\n \\n \\n
\\n <svg-icon-sprite [src]=\\\"'assets/sprites/sprite.svg#star_100x100'\\\" [width]=\\\"'100px'\\\"></svg-icon>\\n\\n.icon-example {{ '{' }}\\n color: darkred;\\n{{ '}' }} \\n \\n \\n \\n \\n
\\n <svg-icon-sprite [src]=\\\"'assets/sprites/sprite.svg#delete_70x70'\\\" [width]=\\\"'70px'\\\" [height]=\\\"'65px'\\\"></svg-icon> \\n \\n \\n \\n \\n
\\n <svg-icon-sprite [src]=\\\"'assets/sprites/sprite.svg#star_100x100'\\\" [classes]=\\\"'css-styled-icon'\\\" [width]=\\\"'100px'\\\"></svg-icon>\\n\\n.container ::ng-deep svg.css-styled-icon {{ '{' }}\\n use {{ '{' }}\\n fill: orange;\\n stroke: black;\\n {{ '}' }}\\n{{ '}' }} \\n \\n \\n\\n
\\n\\n
\\n\\n\\n
Scaling (using CSS transform) \\n\\n
Use this pattern if you want to change the size of the original SVG. Apply same rules as above, wrap the SVG into a div and size it using CSS transforms.
\\n\\n
\\n\\n
Scaling (using viewBox) \\n\\n This is an alternative to the CSS scaling method presented above. Scaling via
viewBox
is
less consistent across browsers .\\n The pattern depends on your SVG source file, whether it already contains a
viewBox
or not.\\n The following example SVGs with an original size of
100x100px
are scaled down by 50%.\\n\\n
\\n \\n \\n \\n
\\n \\n<!-- SVG source lacks a viewBox -->\\n<svg-icon-sprite [src]=\\\"'assets/sprites/sprite.svg#star_100x100'\\\" [width]=\\\"'100px'\\\" [viewBox]=\\\"'-50 -50 200 200'\\\"></svg-icon>\\n \\n \\n \\n \\n \\n
\\n \\n<!-- SVG source contains a viewBox -->\\n<svg-icon-sprite [src]=\\\"'assets/sprites/sprite.svg#star_100x100_viewbox'\\\" [width]=\\\"'50px'\\\" [viewBox]=\\\"'0 0 100 100'\\\"></svg-icon>\\n \\n \\n \\n\\n
Default sprite path (using the icon sprite service) \\n\\n Set the sprite path in your
environment.ts
, import and inject the
IconSpriteService
and set the default path. Now you\\n can invoke the component and simply pass the icon name as
[src]
.\\n\\n
\\n \\n \\n \\n
\\n \\n
\\nimport {{ '{' }} IconSpriteService {{ '}' }} from 'ng-svg-icon-sprite';\\nimport {{ '{' }} environment {{ '}' }} from '../environments/environment';\\n\\nexport class AppComponent implements OnInit {{ '{' }}\\n private env = environment;\\n\\n constructor(private iconSpriteService: IconSpriteService) {{ '{' }}}\\n\\n ngOnInit() {{ '{' }}\\n this.iconSpriteService.setPath(this.env.spritePath);\\n {{ '}' }}\\n{{ '}' }}\\n \\n
<svg-icon-sprite [src]=\\\"'star_100x100'\\\" [width]=\\\"width\\\"></svg-icon> \\n
\\n \\n \\n\\n\\n
Manipulation (using HTML properties) \\n\\n
Change Icon Path \\n
Size - \\n
Size + \\n
\\n
Set color \\n\\n
\\n\\n
Adding Custom SVG Attributes \\n\\n
\\n\\n Adding
focusable=\\\"false\\\"
will prevent browser focus on SVG element in IE11.\\n\\n
Accessible example (meaningful icon pattern) \\n\\n
\\n \\n \\n \\n
\\n \\n<svg-icon-sprite\\n [src]=\\\"'assets/sprites/sprite.svg#star_100x100'\\\"\\n [title]=\\\"'Orange star'\\\"\\n [attribute]=\\\"[['aria-labelledby', 'star_100x100-title'], ['role', 'img']]\\\"\\n></svg-icon>\\n \\n \\n \\n\\n Adding
[title]=\\\"'Orange star'\\\"
will render
<title id=\\\"star_100x100-title\\\">Orange star</title>
as the first child of the SVG node and serve as alternative text for screen readers.\\n To improve support, you can additionally reference the title's node via
'aria-labelledby'
using the title's generated id
star_100x100-title
and set the
role
to
img
.\\n\\n
Multicolor Icons \\n\\n If you want to include an multicolor icon, you will have to provide it form a separate sprite file (where the fill and stroke attributes are not stripped).\\n Remember that you will not be able to overwrite styles via CSS.\\n\\n
\\n\\n
\\n Report bugs or feature requests on Github Issues \\n
\\n\\n
\\n\\n
\\n Copyright Jan Suwart, MIT license \\n
\\n
\\n\\n\\n\\n\"","module.exports = \"@-webkit-keyframes mymove {\\n 0% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 50% {\\n -webkit-transform: translateX(2px);\\n transform: translateX(2px); }\\n 75% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 100% {\\n -webkit-transform: translateX(-2px);\\n transform: translateX(-2px); } }\\n\\n@keyframes mymove {\\n 0% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 50% {\\n -webkit-transform: translateX(2px);\\n transform: translateX(2px); }\\n 75% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 100% {\\n -webkit-transform: translateX(-2px);\\n transform: translateX(-2px); } }\\n\\n.icon-examples-1 {\\n color: darkred;\\n transition: -webkit-transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s;\\n -webkit-transform-origin: center center;\\n -ms-transform-origin: center center;\\n transform-origin: center center; }\\n\\n.icon-examples-1:hover, .icon-examples-1:focus {\\n color: red;\\n -webkit-transform: rotate(12deg);\\n -ms-transform: rotate(12deg);\\n transform: rotate(12deg); }\\n\\n.icon-examples-2 {\\n color: darkgreen;\\n transition: color ease-in-out 0.4s; }\\n\\n.icon-examples-2:hover, .icon-examples-2:focus {\\n color: limegreen; }\\n\\n.icon-examples-3 {\\n transition: -webkit-transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s;\\n -webkit-transform-origin: center center;\\n -ms-transform-origin: center center;\\n transform-origin: center center; }\\n\\n.icon-examples-3:hover, .icon-examples-3:focus {\\n -webkit-transform: scale(1.1);\\n -ms-transform: scale(1.1);\\n transform: scale(1.1); }\\n\\n.icon-examples-4 {\\n color: darkred; }\\n\\n.icon-examples-4:hover, .icon-examples-4:focus {\\n color: brown; }\\n\\n.icon-examples-5 {\\n color: darkorange;\\n transition: color ease-in-out 0.1s; }\\n\\n.icon-examples-5:hover, .icon-examples-5:focus {\\n color: darkgoldenrod; }\\n\\n.icon-scale-down {\\n -webkit-transform: scale(0.5);\\n -ms-transform: scale(0.5);\\n transform: scale(0.5); }\\n\\n.icon-scale-up {\\n -webkit-transform: scale(5);\\n -ms-transform: scale(5);\\n transform: scale(5); }\\n\\n.container ::ng-deep svg.css-styled-icon use {\\n fill: orange;\\n /* evergreen browser symbol styling */\\n stroke: black; }\\n\\n.icon-change-size ::ng-deep svg {\\n transition: all linear 0.2s;\\n -webkit-transform-origin: top center;\\n -ms-transform-origin: top center;\\n transform-origin: top center; }\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9qYW4uc3V3YXJ0L1Byb2plY3RzL25nLXN2Zy1pY29uLXNwcml0ZS9zcmMvYXBwL2FwcC5jb21wb25lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sbUNBQTBCO1lBQTFCLDJCQUEwQixFQUFBO0VBQ2pDO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sb0NBQTJCO1lBQTNCLDRCQUEyQixFQUFBLEVBQUE7O0FBSnBDO0VBQ0U7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxtQ0FBMEI7WUFBMUIsMkJBQTBCLEVBQUE7RUFDakM7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxvQ0FBMkI7WUFBM0IsNEJBQTJCLEVBQUEsRUFBQTs7QUFHcEM7RUFFRSxlQUFjO0VBQ2QsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFNaEM7O0FBVkQ7SUFPSSxXQUFVO0lBQ1YsaUNBQXdCO1FBQXhCLDZCQUF3QjtZQUF4Qix5QkFBd0IsRUFDekI7O0FBR0g7RUFDRSxpQkFBZ0I7RUFDaEIsbUNBQWtDLEVBS25DOztBQVBEO0lBS0ksaUJBQWdCLEVBQ2pCOztBQUdIO0VBQ0UsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFLaEM7O0FBUEQ7SUFLSSw4QkFBcUI7UUFBckIsMEJBQXFCO1lBQXJCLHNCQUFxQixFQUN0Qjs7QUFHSDtFQUNFLGVBQWMsRUFLZjs7QUFORDtJQUlJLGFBQVksRUFDYjs7QUFHSDtFQUNFLGtCQUFpQjtFQUNqQixtQ0FBa0MsRUFLbkM7O0FBUEQ7SUFLSSxxQkFBb0IsRUFDckI7O0FBR0g7RUFFRSw4QkFBcUI7TUFBckIsMEJBQXFCO1VBQXJCLHNCQUFxQixFQUN0Qjs7QUFFRDtFQUVFLDRCQUFtQjtNQUFuQix3QkFBbUI7VUFBbkIsb0JBQW1CLEVBQ3BCOztBQUdEO0VBSVEsYUFBWTtFQUFFLHNDQUFzQztFQUNwRCxjQUFhLEVBQ2Q7O0FBS1A7RUFHTSw0QkFBMkI7RUFDM0IscUNBQTRCO01BQTVCLGlDQUE0QjtVQUE1Qiw2QkFBNEIsRUFDN0IiLCJmaWxlIjoic3JjL2FwcC9hcHAuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAa2V5ZnJhbWVzIG15bW92ZSB7XG4gIDAlICAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgNTAlICB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgycHgpOyB9XG4gIDc1JSAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgMTAwJSB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMnB4KTsgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0xIHtcbiAgLy8gVXNlIGNvbG9yIHByb3BlcnR5IGZvciBvdmVycmlkaW5nIGRlZmF1bHQgY29sb3IgYW5kIGhvdmVyIGVmZmVjdFxuICBjb2xvcjogZGFya3JlZDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IHJlZDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxMmRlZyk7XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtMiB7XG4gIGNvbG9yOiBkYXJrZ3JlZW47XG4gIHRyYW5zaXRpb246IGNvbG9yIGVhc2UtaW4tb3V0IDAuNHM7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IGxpbWVncmVlbjtcbiAgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0zIHtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICB9XG59XG5cbi5pY29uLWV4YW1wbGVzLTQge1xuICBjb2xvcjogZGFya3JlZDtcblxuICAmOmhvdmVyLCAmOmZvY3VzIHtcbiAgICBjb2xvcjogYnJvd247XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtNSB7XG4gIGNvbG9yOiBkYXJrb3JhbmdlO1xuICB0cmFuc2l0aW9uOiBjb2xvciBlYXNlLWluLW91dCAwLjFzO1xuXG4gICY6aG92ZXIsICY6Zm9jdXMge1xuICAgIGNvbG9yOiBkYXJrZ29sZGVucm9kO1xuICB9XG59XG5cbi5pY29uLXNjYWxlLWRvd24ge1xuICAvLyBTY2FsZSBkb3duIGJ5IDUwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDAuNSk7XG59XG5cbi5pY29uLXNjYWxlLXVwIHtcbiAgLy8gU2NhbGUgdXAgYnkgNTAwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDUpO1xufVxuXG4vLyBBY2Nlc3MgdGhlIFNWRyB2aWEgOjpuZy1kZWVwIHNlbGVjdG9yLCBkb2VzIG5vdCB3b3JrIGluIEZpcmVmb3hcbi5jb250YWluZXIge1xuICA6Om5nLWRlZXAge1xuICAgIHN2Zy5jc3Mtc3R5bGVkLWljb24ge1xuICAgICAgdXNlIHtcbiAgICAgICAgZmlsbDogb3JhbmdlOyAvKiBldmVyZ3JlZW4gYnJvd3NlciBzeW1ib2wgc3R5bGluZyAqL1xuICAgICAgICBzdHJva2U6IGJsYWNrO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuXG4uaWNvbi1jaGFuZ2Utc2l6ZSB7XG4gIDo6bmctZGVlcCB7XG4gICAgc3ZnIHtcbiAgICAgIHRyYW5zaXRpb246IGFsbCBsaW5lYXIgMC4ycztcbiAgICAgIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBjZW50ZXI7XG4gICAgfVxuICB9XG59XG4iXX0= */\"","import { Component, OnInit } from '@angular/core';\nimport { IconSpriteService } from 'ng-svg-icon-sprite';\nimport { environment } from '../environments/environment';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit {\n\n public icon = 'star_100x100_viewbox';\n public width = '100px';\n public color = 'red';\n private env = environment;\n\n constructor(\n // Optionally inject the icon sprite service to set the filename path globally\n private iconSpriteService: IconSpriteService\n ) {}\n\n ngOnInit() {\n this.iconSpriteService.setPath(this.env.spritePath);\n }\n\n changeIconPath(src) {\n this.icon = src.split('#')[1] === 'delete_70x70' ? 'star_100x100_viewbox' : 'delete_70x70';\n }\n\n changeIconSizePlus(width) {\n this.width = Number(width.replace('px', '')) + 15 + 'px';\n }\n\n changeIconSizeMinus(width) {\n this.width = Number(width.replace('px', '')) - 15 + 'px';\n }\n\n changeIconColor(color) {\n this.color = color;\n }\n}\n","import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { IconSpriteModule } from 'ng-svg-icon-sprite';\n\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n IconSpriteModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n","// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n production: false,\n spritePath: 'assets/sprites/sprite.svg'\n};\n\n/*\n * In development mode, for easier debugging, you can ignore zone related error\n * stack frames such as `zone.run`/`zoneDelegate.invokeTask` by importing the\n * below file. Don't forget to comment it out in production mode\n * because it will have a performance impact when errors are thrown\n */\n// import 'zone.js/dist/zone-error'; // Included with Angular CLI.\n","import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.log(err));\n"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack:///./dist/ng-svg-icon-sprite/fesm5/ng-svg-icon-sprite.js","webpack:///./src/$_lazy_route_resource lazy namespace object","webpack:///./src/app/app.component.html","webpack:///./src/app/app.component.scss","webpack:///./src/app/app.component.ts","webpack:///./src/app/app.module.ts","webpack:///./src/environments/environment.ts","webpack:///./src/main.ts"],"names":[],"mappings":"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","file":"main.js","sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Injectable, Optional, Directive, ElementRef, Renderer2, Input, Component, defineInjectable, inject, NgModule } from '@angular/core';\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\nvar IconSpriteConfig = /** @class */ (function () {\n function IconSpriteConfig() {\n }\n return IconSpriteConfig;\n}());\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n/**\n * To access a global sprite path\n */\nvar IconSpriteService = /** @class */ (function () {\n function IconSpriteService(config) {\n if (config) {\n this.setPath(config.path);\n }\n }\n /**\n * @param {?} path\n * @return {?}\n */\n IconSpriteService.prototype.setPath = /**\n * @param {?} path\n * @return {?}\n */\n function (path) {\n this.spritePath = path;\n };\n /**\n * @return {?}\n */\n IconSpriteService.prototype.getPath = /**\n * @return {?}\n */\n function () {\n return this.spritePath;\n };\n IconSpriteService.decorators = [\n { type: Injectable, args: [{\n providedIn: 'root'\n },] }\n ];\n /** @nocollapse */\n IconSpriteService.ctorParameters = function () { return [\n { type: IconSpriteConfig, decorators: [{ type: Optional }] }\n ]; };\n /** @nocollapse */ IconSpriteService.ngInjectableDef = defineInjectable({ factory: function IconSpriteService_Factory() { return new IconSpriteService(inject(IconSpriteConfig, 8)); }, token: IconSpriteService, providedIn: \"root\" });\n return IconSpriteService;\n}());\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\nvar IconSpriteComponent = /** @class */ (function () {\n function IconSpriteComponent(iconSpriteService) {\n this.iconSpriteService = iconSpriteService;\n this.classes = 'icon';\n this.width = '100%';\n this.preserveAspectRatio = 'xMinYMax meet';\n }\n /**\n * @return {?}\n */\n IconSpriteComponent.prototype.ngOnInit = /**\n * @return {?}\n */\n function () {\n // If the src does not contain a # and a spritePath is set, concatenate it\n if (this.src && !this.src.includes('#') && this.iconSpriteService.spritePath) {\n this.src = this.iconSpriteService.getPath() + \"#\" + this.src;\n }\n };\n IconSpriteComponent.decorators = [\n { type: Component, args: [{\n selector: 'svg-icon-sprite',\n template: \"\\n
SVG-Icon-Sprite Demo \\n\\n
The Basics (reference, width and styling) \\n\\n
To display the icons in original size match the [width]
and [height]
with the width/height of the equivalent SVG.
\\n\\n
\\n \\n \\n \\n
\\n <svg-icon-sprite [src]=\\\"'assets/sprites/sprite.svg#star_100x100'\\\" [width]=\\\"'100px'\\\"></svg-icon>\\n\\n.icon-example {{ '{' }}\\n color: darkred;\\n{{ '}' }} \\n \\n \\n \\n \\n
\\n <svg-icon-sprite [src]=\\\"'assets/sprites/sprite.svg#delete_70x70'\\\" [width]=\\\"'70px'\\\" [height]=\\\"'65px'\\\"></svg-icon> \\n \\n \\n
To access the inner SVG properties like fill or stroke via CSS use ::ng-deep
\\n
\\n\\n\\n
Scaling (using CSS transform) \\n\\n
Use this pattern if you want to change the size of the original SVG. Apply same rules as above, wrap the SVG into a div and size it using CSS transforms.
\\n\\n
\\n\\n
Scaling (using viewBox) \\n\\n This is an alternative to the CSS scaling method presented above. Scaling via
viewBox
is
less consistent across browsers .\\n The pattern depends on your SVG source file, whether it already contains a
viewBox
or not.\\n The following example SVGs with an original size of
100x100px
are scaled down by 50%.\\n\\n
\\n \\n \\n \\n
\\n \\n<!-- SVG source lacks a viewBox -->\\n<svg-icon-sprite [src]=\\\"'assets/sprites/sprite.svg#star_100x100'\\\" [width]=\\\"'100px'\\\" [viewBox]=\\\"'-50 -50 200 200'\\\"></svg-icon>\\n \\n \\n \\n \\n \\n
\\n \\n<!-- SVG source contains a viewBox -->\\n<svg-icon-sprite [src]=\\\"'assets/sprites/sprite.svg#star_100x100_viewbox'\\\" [width]=\\\"'50px'\\\" [viewBox]=\\\"'0 0 100 100'\\\"></svg-icon>\\n \\n \\n \\n\\n
Default sprite path \\n\\n Set the sprite path in your
environment.ts
and set the default path using
forRoot()
. Now you\\n can invoke the component and simply pass the plain icon name as
[src]
.\\n\\n
\\n \\n \\n \\n
\\n \\n
\\nimport {{ '{' }} IconSpriteModule {{ '}' }} from 'ng-svg-icon-sprite';\\nimport {{ '{' }} environment {{ '}' }} from '../environments/environment';\\n\\n@NgModule({{ '{' }}\\n imports: [\\n IconSpriteModule.forRoot({{ '{' }} path: environment.spritePath {{ '}' }})\\n \\n
<svg-icon-sprite [src]=\\\"'star_100x100'\\\" [width]=\\\"width\\\"></svg-icon> \\n
\\n \\n \\n\\n
\\n Advanced Tip: to change the sprite path during runtime, inject the iconSpriteService
anywhere and execute this.iconSpriteService.setPath('new-path.svg')
\\n Re-render all icon-components afterwards!\\n \\n Change and render \\n
\\n\\n
Manipulation (using dynamic icon path) \\n\\n
Change Icon Path \\n
Size - \\n
Size + \\n
\\n
Set color \\n\\n
\\n\\n
Accessible example (meaningful icon pattern) \\n\\n
\\n \\n \\n \\n
\\n \\n<svg-icon-sprite\\n [src]=\\\"'star_100x100'\\\"\\n [title]=\\\"'Orange star'\\\"\\n [attribute]=\\\"[['aria-labelledby', 'star_100x100-title'], ['role', 'img']]\\\"\\n></svg-icon>\\n \\n \\n \\n\\n Adding
[title]=\\\"'Orange star'\\\"
will render
<title id=\\\"star_100x100-title\\\">Orange star</title>
as the first child of the SVG node and serve as alternative text for screen readers.\\n To improve support, you can additionally reference the title's node via
'aria-labelledby'
using the title's generated id
star_100x100-title
and set the
role
to
img
.\\n\\n
Multicolor Icons (preserving svg properties) \\n\\n If you want to include an multicolor icon, you will have to provide it form a separate sprite file (where the fill and stroke attributes are not stripped).\\n Remember that you will not be able to overwrite styles it's via CSS.\\n\\n
\\n\\n
\\n Report bugs or feature requests on Github Issues \\n
\\n\\n
\\n\\n
\\n Copyright Jan Suwart, MIT license \\n
\\n
\\n\"","module.exports = \"@-webkit-keyframes mymove {\\n 0% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 50% {\\n -webkit-transform: translateX(2px);\\n transform: translateX(2px); }\\n 75% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 100% {\\n -webkit-transform: translateX(-2px);\\n transform: translateX(-2px); } }\\n\\n@keyframes mymove {\\n 0% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 50% {\\n -webkit-transform: translateX(2px);\\n transform: translateX(2px); }\\n 75% {\\n -webkit-transform: translateX(0);\\n transform: translateX(0); }\\n 100% {\\n -webkit-transform: translateX(-2px);\\n transform: translateX(-2px); } }\\n\\n.icon-examples-1 {\\n color: darkred;\\n transition: -webkit-transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s;\\n -webkit-transform-origin: center center;\\n -ms-transform-origin: center center;\\n transform-origin: center center; }\\n\\n.icon-examples-1:hover, .icon-examples-1:focus {\\n color: red;\\n -webkit-transform: rotate(12deg);\\n -ms-transform: rotate(12deg);\\n transform: rotate(12deg); }\\n\\n.icon-examples-2 {\\n color: darkgreen;\\n transition: color ease-in-out 0.4s; }\\n\\n.icon-examples-2:hover, .icon-examples-2:focus {\\n color: limegreen; }\\n\\n.icon-examples-3 {\\n transition: -webkit-transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s;\\n transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s;\\n -webkit-transform-origin: center center;\\n -ms-transform-origin: center center;\\n transform-origin: center center; }\\n\\n.icon-examples-3:hover, .icon-examples-3:focus {\\n -webkit-transform: scale(1.1);\\n -ms-transform: scale(1.1);\\n transform: scale(1.1); }\\n\\n.icon-examples-4 {\\n color: darkred; }\\n\\n.icon-examples-4:hover, .icon-examples-4:focus {\\n color: brown; }\\n\\n.icon-examples-5 {\\n color: darkorange;\\n transition: color ease-in-out 0.1s; }\\n\\n.icon-examples-5:hover, .icon-examples-5:focus {\\n color: darkgoldenrod; }\\n\\n.icon-examples-6 {\\n transition: -webkit-transform ease-in-out 0.1s;\\n transition: transform ease-in-out 0.1s;\\n transition: transform ease-in-out 0.1s, -webkit-transform ease-in-out 0.1s;\\n -webkit-transform-origin: center center;\\n -ms-transform-origin: center center;\\n transform-origin: center center; }\\n\\n.icon-examples-6:hover, .icon-examples-6:focus {\\n -webkit-transform: rotateY(30deg);\\n transform: rotateY(30deg); }\\n\\n.icon-scale-down {\\n -webkit-transform: scale(0.5);\\n -ms-transform: scale(0.5);\\n transform: scale(0.5); }\\n\\n.icon-scale-up {\\n -webkit-transform: scale(5);\\n -ms-transform: scale(5);\\n transform: scale(5); }\\n\\n.container ::ng-deep .styled-icon use {\\n fill: orange;\\n /* evergreen browser symbol styling */\\n stroke: black; }\\n\\n.icon-change-size ::ng-deep svg {\\n transition: all linear 0.2s;\\n -webkit-transform-origin: top center;\\n -ms-transform-origin: top center;\\n transform-origin: top center; }\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9qYW4uc3V3YXJ0L1Byb2plY3RzL25nLXN2Zy1pY29uLXNwcml0ZS9zcmMvYXBwL2FwcC5jb21wb25lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sbUNBQTBCO1lBQTFCLDJCQUEwQixFQUFBO0VBQ2pDO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sb0NBQTJCO1lBQTNCLDRCQUEyQixFQUFBLEVBQUE7O0FBSnBDO0VBQ0U7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxtQ0FBMEI7WUFBMUIsMkJBQTBCLEVBQUE7RUFDakM7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxvQ0FBMkI7WUFBM0IsNEJBQTJCLEVBQUEsRUFBQTs7QUFHcEM7RUFFRSxlQUFjO0VBQ2QsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFNaEM7O0FBVkQ7SUFPSSxXQUFVO0lBQ1YsaUNBQXdCO1FBQXhCLDZCQUF3QjtZQUF4Qix5QkFBd0IsRUFDekI7O0FBR0g7RUFDRSxpQkFBZ0I7RUFDaEIsbUNBQWtDLEVBS25DOztBQVBEO0lBS0ksaUJBQWdCLEVBQ2pCOztBQUdIO0VBQ0UsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFLaEM7O0FBUEQ7SUFLSSw4QkFBcUI7UUFBckIsMEJBQXFCO1lBQXJCLHNCQUFxQixFQUN0Qjs7QUFHSDtFQUNFLGVBQWMsRUFLZjs7QUFORDtJQUlJLGFBQVksRUFDYjs7QUFHSDtFQUNFLGtCQUFpQjtFQUNqQixtQ0FBa0MsRUFLbkM7O0FBUEQ7SUFLSSxxQkFBb0IsRUFDckI7O0FBR0g7RUFDRSwrQ0FBc0M7RUFBdEMsdUNBQXNDO0VBQXRDLDJFQUFzQztFQUN0Qyx3Q0FBK0I7TUFBL0Isb0NBQStCO1VBQS9CLGdDQUErQixFQUtoQzs7QUFQRDtJQUtJLGtDQUF5QjtZQUF6QiwwQkFBeUIsRUFDMUI7O0FBR0g7RUFFRSw4QkFBcUI7TUFBckIsMEJBQXFCO1VBQXJCLHNCQUFxQixFQUN0Qjs7QUFFRDtFQUVFLDRCQUFtQjtNQUFuQix3QkFBbUI7VUFBbkIsb0JBQW1CLEVBQ3BCOztBQUdEO0VBSVEsYUFBWTtFQUFFLHNDQUFzQztFQUNwRCxjQUFhLEVBQ2Q7O0FBS1A7RUFHTSw0QkFBMkI7RUFDM0IscUNBQTRCO01BQTVCLGlDQUE0QjtVQUE1Qiw2QkFBNEIsRUFDN0IiLCJmaWxlIjoic3JjL2FwcC9hcHAuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAa2V5ZnJhbWVzIG15bW92ZSB7XG4gIDAlICAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgNTAlICB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgycHgpOyB9XG4gIDc1JSAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgMTAwJSB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMnB4KTsgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0xIHtcbiAgLy8gVXNlIGNvbG9yIHByb3BlcnR5IGZvciBvdmVycmlkaW5nIGRlZmF1bHQgY29sb3IgYW5kIGhvdmVyIGVmZmVjdFxuICBjb2xvcjogZGFya3JlZDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IHJlZDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxMmRlZyk7XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtMiB7XG4gIGNvbG9yOiBkYXJrZ3JlZW47XG4gIHRyYW5zaXRpb246IGNvbG9yIGVhc2UtaW4tb3V0IDAuNHM7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IGxpbWVncmVlbjtcbiAgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0zIHtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICB9XG59XG5cbi5pY29uLWV4YW1wbGVzLTQge1xuICBjb2xvcjogZGFya3JlZDtcblxuICAmOmhvdmVyLCAmOmZvY3VzIHtcbiAgICBjb2xvcjogYnJvd247XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtNSB7XG4gIGNvbG9yOiBkYXJrb3JhbmdlO1xuICB0cmFuc2l0aW9uOiBjb2xvciBlYXNlLWluLW91dCAwLjFzO1xuXG4gICY6aG92ZXIsICY6Zm9jdXMge1xuICAgIGNvbG9yOiBkYXJrZ29sZGVucm9kO1xuICB9XG59XG5cbi5pY29uLWV4YW1wbGVzLTYge1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gZWFzZS1pbi1vdXQgMC4xcztcbiAgdHJhbnNmb3JtLW9yaWdpbjogY2VudGVyIGNlbnRlcjtcblxuICAmOmhvdmVyLCAmOmZvY3VzIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZVkoMzBkZWcpO1xuICB9XG59XG5cbi5pY29uLXNjYWxlLWRvd24ge1xuICAvLyBTY2FsZSBkb3duIGJ5IDUwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDAuNSk7XG59XG5cbi5pY29uLXNjYWxlLXVwIHtcbiAgLy8gU2NhbGUgdXAgYnkgNTAwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDUpO1xufVxuXG4vLyBBY2Nlc3MgdGhlIFNWRyB2aWEgOjpuZy1kZWVwIHNlbGVjdG9yXG4uY29udGFpbmVyIHtcbiAgOjpuZy1kZWVwIHtcbiAgICAuc3R5bGVkLWljb24ge1xuICAgICAgdXNlIHtcbiAgICAgICAgZmlsbDogb3JhbmdlOyAvKiBldmVyZ3JlZW4gYnJvd3NlciBzeW1ib2wgc3R5bGluZyAqL1xuICAgICAgICBzdHJva2U6IGJsYWNrO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuXG4uaWNvbi1jaGFuZ2Utc2l6ZSB7XG4gIDo6bmctZGVlcCB7XG4gICAgc3ZnIHtcbiAgICAgIHRyYW5zaXRpb246IGFsbCBsaW5lYXIgMC4ycztcbiAgICAgIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBjZW50ZXI7XG4gICAgfVxuICB9XG59XG4iXX0= */\"","import { Component, OnInit } from '@angular/core';\nimport { IconSpriteService } from 'ng-svg-icon-sprite';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit {\n\n public icon = 'star_100x100_viewbox';\n public width = '100px';\n public color = 'red';\n public changed = false;\n public changeDone = false;\n\n constructor(\n // Optionally inject the icon sprite service to set path manually\n private iconSpriteService: IconSpriteService\n ) {}\n\n ngOnInit() {}\n\n changeIconPath(src) {\n this.icon = src.split('#')[1] === 'delete_70x70' ? 'star_100x100_viewbox' : 'delete_70x70';\n }\n\n changeIconSizePlus(width) {\n this.width = Number(width.replace('px', '')) + 15 + 'px';\n }\n\n changeIconSizeMinus(width) {\n this.width = Number(width.replace('px', '')) - 15 + 'px';\n }\n\n changeIconColor(color) {\n this.color = color;\n }\n\n // Optionally, change the default sprite path during runtime\n changeDefaultSpritePath() {\n this.changed = true;\n this.iconSpriteService.setPath('assets/sprites-secondary/sprite.svg');\n console.log('changeDefaultSpritePath', this.iconSpriteService.getPath());\n\n setTimeout(() => {\n // Demo purpose: force change detection to re-render\n this.changed = false;\n }, 0);\n }\n}\n","import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\nimport { IconSpriteModule } from 'ng-svg-icon-sprite';\nimport { environment } from '../environments/environment';\n\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n IconSpriteModule.forRoot({ path: environment.spritePath })\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n","// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n production: false,\n spritePath: 'assets/sprites/sprite.svg'\n};\n\n/*\n * In development mode, for easier debugging, you can ignore zone related error\n * stack frames such as `zone.run`/`zoneDelegate.invokeTask` by importing the\n * below file. Don't forget to comment it out in production mode\n * because it will have a performance impact when errors are thrown\n */\n// import 'zone.js/dist/zone-error'; // Included with Angular CLI.\n","import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.log(err));\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/docs/polyfills.js b/docs/polyfills.js
index e8b4e9e..460b399 100644
--- a/docs/polyfills.js
+++ b/docs/polyfills.js
@@ -500,6 +500,7 @@ module.exports = __webpack_require__(/*! ../modules/_core */ "./node_modules/cor
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(/*! ../modules/es6.regexp.constructor */ "./node_modules/core-js/modules/es6.regexp.constructor.js");
+__webpack_require__(/*! ../modules/es6.regexp.exec */ "./node_modules/core-js/modules/es6.regexp.exec.js");
__webpack_require__(/*! ../modules/es6.regexp.to-string */ "./node_modules/core-js/modules/es6.regexp.to-string.js");
__webpack_require__(/*! ../modules/es6.regexp.flags */ "./node_modules/core-js/modules/es6.regexp.flags.js");
__webpack_require__(/*! ../modules/es6.regexp.match */ "./node_modules/core-js/modules/es6.regexp.match.js");
@@ -662,6 +663,26 @@ module.exports = function (key) {
};
+/***/ }),
+
+/***/ "./node_modules/core-js/modules/_advance-string-index.js":
+/*!***************************************************************!*\
+ !*** ./node_modules/core-js/modules/_advance-string-index.js ***!
+ \***************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var at = __webpack_require__(/*! ./_string-at */ "./node_modules/core-js/modules/_string-at.js")(true);
+
+ // `AdvanceStringIndex` abstract operation
+// https://tc39.github.io/ecma262/#sec-advancestringindex
+module.exports = function (S, index, unicode) {
+ return index + (unicode ? at(S, index).length : 1);
+};
+
+
/***/ }),
/***/ "./node_modules/core-js/modules/_an-instance.js":
@@ -1395,7 +1416,7 @@ module.exports = function (NAME, wrapper, methods, common, IS_MAP, IS_WEAK) {
/*! no static exports found */
/***/ (function(module, exports) {
-var core = module.exports = { version: '2.5.7' };
+var core = module.exports = { version: '2.6.5' };
if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
@@ -1705,22 +1726,90 @@ module.exports = function (exec) {
"use strict";
-var hide = __webpack_require__(/*! ./_hide */ "./node_modules/core-js/modules/_hide.js");
+__webpack_require__(/*! ./es6.regexp.exec */ "./node_modules/core-js/modules/es6.regexp.exec.js");
var redefine = __webpack_require__(/*! ./_redefine */ "./node_modules/core-js/modules/_redefine.js");
+var hide = __webpack_require__(/*! ./_hide */ "./node_modules/core-js/modules/_hide.js");
var fails = __webpack_require__(/*! ./_fails */ "./node_modules/core-js/modules/_fails.js");
var defined = __webpack_require__(/*! ./_defined */ "./node_modules/core-js/modules/_defined.js");
var wks = __webpack_require__(/*! ./_wks */ "./node_modules/core-js/modules/_wks.js");
+var regexpExec = __webpack_require__(/*! ./_regexp-exec */ "./node_modules/core-js/modules/_regexp-exec.js");
+
+var SPECIES = wks('species');
+
+var REPLACE_SUPPORTS_NAMED_GROUPS = !fails(function () {
+ // #replace needs built-in support for named groups.
+ // #match works fine because it just return the exec results, even if it has
+ // a "grops" property.
+ var re = /./;
+ re.exec = function () {
+ var result = [];
+ result.groups = { a: '7' };
+ return result;
+ };
+ return ''.replace(re, '$