From 9007258ede64dcda93c8fd1473612ea73ea090b9 Mon Sep 17 00:00:00 2001 From: "Suwart, Jan" Date: Fri, 19 Jul 2019 12:51:59 +0200 Subject: [PATCH] Fix dynamic icon path bug (in combination with fixed forRoot sprite path), resolves #25 --- LICENSE | 4 ++-- README.md | 2 +- docs/main.js | 11 +++++++---- docs/main.js.map | 2 +- package.json | 3 ++- projects/icon-sprite/LICENSE | 4 ++-- projects/icon-sprite/README.md | 2 +- projects/icon-sprite/package.json | 3 ++- .../icon-sprite/src/lib/icon-sprite.component.spec.ts | 4 ++++ projects/icon-sprite/src/lib/icon-sprite.component.ts | 8 ++++---- src/app/app.component.html | 3 ++- src/app/app.component.ts | 1 + 12 files changed, 29 insertions(+), 18 deletions(-) diff --git a/LICENSE b/LICENSE index dd983a2..410284e 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017 Janek +Copyright (c) 2017 Jan Suwart Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md index a428257..df6a086 100644 --- a/README.md +++ b/README.md @@ -189,7 +189,7 @@ Doing so you will still be able override the default path by using the full synt - Edge - IE 11 (with polyfill, see below) -### Polyfill for IE11 (and comparable) +### Polyfill for IE11 Older browsers do not support referencing to (external) SVG symbols. To make it work for IE11 and lower you can add [svg4everybody](https://github.com/jonathantneal/svg4everybody) to your `polyfills.ts` file: diff --git a/docs/main.js b/docs/main.js index 9cbaf88..f0b44be 100644 --- a/docs/main.js +++ b/docs/main.js @@ -87,13 +87,15 @@ var IconSpriteComponent = /** @class */ (function () { this.preserveAspectRatio = 'xMinYMax meet'; } /** + * @param {?} changes * @return {?} */ - IconSpriteComponent.prototype.ngOnInit = /** + IconSpriteComponent.prototype.ngOnChanges = /** + * @param {?} changes * @return {?} */ - function () { - // If the src does not contain a # and a spritePath is set, concatenate it + function (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; } @@ -259,7 +261,7 @@ webpackEmptyAsyncContext.id = "./src/$$_lazy_route_resource lazy recursive"; /*! no static exports found */ /***/ (function(module, exports) { -module.exports = "
\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

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

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 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 \n

\n\n

Manipulation (using dynamic icon path)

\n\n \n \n \n \n \n\n \n\n

Accessible example (meaningful icon pattern)

\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 = "
\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

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

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 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 \n

\n\n

Manipulation (using dynamic icon path)

\n\n \n \n \n \n \n\n \n\n

Accessible example (meaningful icon pattern)

\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" /***/ }), @@ -304,6 +306,7 @@ var AppComponent = /** @class */ (function () { AppComponent.prototype.ngOnInit = function () { }; AppComponent.prototype.changeIconPath = function (src) { this.icon = src.split('#')[1] === 'delete_70x70' ? 'star_100x100_viewbox' : 'delete_70x70'; + console.log('changed path', this.icon); }; AppComponent.prototype.changeIconSizePlus = function (width) { this.width = Number(width.replace('px', '')) + 15 + 'px'; diff --git a/docs/main.js.map b/docs/main.js.map index 391b5f7..af8a273 100644 --- a/docs/main.js.map +++ b/docs/main.js.map @@ -1 +1 @@ -{"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 \\n {{title}}\\n \\n \\n\\n\\n\\n \\n {{title}}\\n \\n \\n\\n\\n\\n \\n {{title}}\\n \\n \\n\\n\\n\\n \\n {{title}}\\n \\n \\n\\n\",\n styles: [\":host svg,:host use{fill:currentColor}\"]\n }] }\n ];\n /** @nocollapse */\n IconSpriteComponent.ctorParameters = function () { return [\n { type: IconSpriteService }\n ]; };\n IconSpriteComponent.propDecorators = {\n src: [{ type: Input }],\n classes: [{ type: Input }],\n width: [{ type: Input }],\n height: [{ type: Input }],\n viewBox: [{ type: Input }],\n preserveAspectRatio: [{ type: Input }],\n attribute: [{ type: Input }],\n title: [{ type: Input }]\n };\n return IconSpriteComponent;\n}());\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n/**\n * Set your own attribute key/value pairs on the generated SVG element, i.e. focusable=\"false\"\n */\nvar IconSpriteDirective = /** @class */ (function () {\n function IconSpriteDirective(renderer, el) {\n this.renderer = renderer;\n this.el = el;\n }\n /**\n * @return {?}\n */\n IconSpriteDirective.prototype.ngOnInit = /**\n * @return {?}\n */\n function () {\n var _this = this;\n if (Array.isArray(this.attribute[0])) {\n /** @type {?} */\n var attributeArr = (/** @type {?} */ (this.attribute));\n attributeArr.forEach(function (obj) {\n _this.renderer.setAttribute(_this.el.nativeElement, obj[0], obj[1] ? obj[1] : '');\n });\n }\n else {\n /** @type {?} */\n var attribute = (/** @type {?} */ (this.attribute));\n if (attribute[0]) {\n this.renderer.setAttribute(this.el.nativeElement, attribute[0], attribute[1] ? attribute[1] : '');\n }\n }\n };\n IconSpriteDirective.decorators = [\n { type: Directive, args: [{\n selector: '[svgIconSpriteAttr]'\n },] }\n ];\n /** @nocollapse */\n IconSpriteDirective.ctorParameters = function () { return [\n { type: Renderer2 },\n { type: ElementRef }\n ]; };\n IconSpriteDirective.propDecorators = {\n attribute: [{ type: Input }]\n };\n return IconSpriteDirective;\n}());\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n/**\n * Using forRoot({ path: 'filepath' }), this module can be provided as a\n * singleton for the global application (including lazy loaded submodules).\n */\nvar IconSpriteModule = /** @class */ (function () {\n function IconSpriteModule() {\n }\n /**\n * @param {?} config\n * @return {?}\n */\n IconSpriteModule.forRoot = /**\n * @param {?} config\n * @return {?}\n */\n function (config) {\n return {\n ngModule: IconSpriteModule,\n providers: [\n { provide: IconSpriteConfig, useValue: config }\n ]\n };\n };\n IconSpriteModule.decorators = [\n { type: NgModule, args: [{\n imports: [CommonModule],\n declarations: [\n IconSpriteComponent,\n IconSpriteDirective\n ],\n exports: [IconSpriteComponent]\n },] }\n ];\n return IconSpriteModule;\n}());\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n\nexport { IconSpriteService, IconSpriteComponent, IconSpriteModule, IconSpriteConfig as ɵa, IconSpriteDirective as ɵb };\n\n//# sourceMappingURL=ng-svg-icon-sprite.js.map","function webpackEmptyAsyncContext(req) {\n\t// Here Promise.resolve().then() is used instead of new Promise() to prevent\n\t// uncaught exception popping up in devtools\n\treturn Promise.resolve().then(function() {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t});\n}\nwebpackEmptyAsyncContext.keys = function() { return []; };\nwebpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;\nmodule.exports = webpackEmptyAsyncContext;\nwebpackEmptyAsyncContext.id = \"./src/$$_lazy_route_resource lazy recursive\";","module.exports = \"
\\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

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

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 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 \\n

\\n\\n

Manipulation (using dynamic icon path)

\\n\\n \\n \\n \\n \\n \\n\\n \\n\\n

Accessible example (meaningful icon pattern)

\\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 +{"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 * @param {?} changes\n * @return {?}\n */\n IconSpriteComponent.prototype.ngOnChanges = /**\n * @param {?} changes\n * @return {?}\n */\n function (changes) {\n // If the src does not contain a # and a spritePath is set via the service, concatenate them\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 \\n {{title}}\\n \\n \\n\\n\\n\\n \\n {{title}}\\n \\n \\n\\n\\n\\n \\n {{title}}\\n \\n \\n\\n\\n\\n \\n {{title}}\\n \\n \\n\\n\",\n styles: [\":host svg,:host use{fill:currentColor}\"]\n }] }\n ];\n /** @nocollapse */\n IconSpriteComponent.ctorParameters = function () { return [\n { type: IconSpriteService }\n ]; };\n IconSpriteComponent.propDecorators = {\n src: [{ type: Input }],\n classes: [{ type: Input }],\n width: [{ type: Input }],\n height: [{ type: Input }],\n viewBox: [{ type: Input }],\n preserveAspectRatio: [{ type: Input }],\n attribute: [{ type: Input }],\n title: [{ type: Input }]\n };\n return IconSpriteComponent;\n}());\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n/**\n * Set your own attribute key/value pairs on the generated SVG element, i.e. focusable=\"false\"\n */\nvar IconSpriteDirective = /** @class */ (function () {\n function IconSpriteDirective(renderer, el) {\n this.renderer = renderer;\n this.el = el;\n }\n /**\n * @return {?}\n */\n IconSpriteDirective.prototype.ngOnInit = /**\n * @return {?}\n */\n function () {\n var _this = this;\n if (Array.isArray(this.attribute[0])) {\n /** @type {?} */\n var attributeArr = (/** @type {?} */ (this.attribute));\n attributeArr.forEach(function (obj) {\n _this.renderer.setAttribute(_this.el.nativeElement, obj[0], obj[1] ? obj[1] : '');\n });\n }\n else {\n /** @type {?} */\n var attribute = (/** @type {?} */ (this.attribute));\n if (attribute[0]) {\n this.renderer.setAttribute(this.el.nativeElement, attribute[0], attribute[1] ? attribute[1] : '');\n }\n }\n };\n IconSpriteDirective.decorators = [\n { type: Directive, args: [{\n selector: '[svgIconSpriteAttr]'\n },] }\n ];\n /** @nocollapse */\n IconSpriteDirective.ctorParameters = function () { return [\n { type: Renderer2 },\n { type: ElementRef }\n ]; };\n IconSpriteDirective.propDecorators = {\n attribute: [{ type: Input }]\n };\n return IconSpriteDirective;\n}());\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n/**\n * Using forRoot({ path: 'filepath' }), this module can be provided as a\n * singleton for the global application (including lazy loaded submodules).\n */\nvar IconSpriteModule = /** @class */ (function () {\n function IconSpriteModule() {\n }\n /**\n * @param {?} config\n * @return {?}\n */\n IconSpriteModule.forRoot = /**\n * @param {?} config\n * @return {?}\n */\n function (config) {\n return {\n ngModule: IconSpriteModule,\n providers: [\n { provide: IconSpriteConfig, useValue: config }\n ]\n };\n };\n IconSpriteModule.decorators = [\n { type: NgModule, args: [{\n imports: [CommonModule],\n declarations: [\n IconSpriteComponent,\n IconSpriteDirective\n ],\n exports: [IconSpriteComponent]\n },] }\n ];\n return IconSpriteModule;\n}());\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n\nexport { IconSpriteService, IconSpriteComponent, IconSpriteModule, IconSpriteConfig as ɵa, IconSpriteDirective as ɵb };\n\n//# sourceMappingURL=ng-svg-icon-sprite.js.map","function webpackEmptyAsyncContext(req) {\n\t// Here Promise.resolve().then() is used instead of new Promise() to prevent\n\t// uncaught exception popping up in devtools\n\treturn Promise.resolve().then(function() {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t});\n}\nwebpackEmptyAsyncContext.keys = function() { return []; };\nwebpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;\nmodule.exports = webpackEmptyAsyncContext;\nwebpackEmptyAsyncContext.id = \"./src/$$_lazy_route_resource lazy recursive\";","module.exports = \"
\\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

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

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 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 \\n

\\n\\n

Manipulation (using dynamic icon path)

\\n\\n \\n \\n \\n \\n \\n\\n \\n\\n

Accessible example (meaningful icon pattern)

\\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 console.log('changed path', this.icon);\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/package.json b/package.json index 792ebb4..2889086 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng-svg-icon-sprite-app", - "version": "1.6.0", + "version": "1.6.1", "license": "MIT", "author": "Jan Suwart", "description": "Angular 7+ package for generating and using inline SVG icons in your project", @@ -73,6 +73,7 @@ }, "keywords": [ "icon", + "icons", "svg", "sprite", "angular" diff --git a/projects/icon-sprite/LICENSE b/projects/icon-sprite/LICENSE index dd983a2..410284e 100644 --- a/projects/icon-sprite/LICENSE +++ b/projects/icon-sprite/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017 Janek +Copyright (c) 2017 Jan Suwart Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/projects/icon-sprite/README.md b/projects/icon-sprite/README.md index a428257..df6a086 100644 --- a/projects/icon-sprite/README.md +++ b/projects/icon-sprite/README.md @@ -189,7 +189,7 @@ Doing so you will still be able override the default path by using the full synt - Edge - IE 11 (with polyfill, see below) -### Polyfill for IE11 (and comparable) +### Polyfill for IE11 Older browsers do not support referencing to (external) SVG symbols. To make it work for IE11 and lower you can add [svg4everybody](https://github.com/jonathantneal/svg4everybody) to your `polyfills.ts` file: diff --git a/projects/icon-sprite/package.json b/projects/icon-sprite/package.json index e8a2e04..dabe230 100644 --- a/projects/icon-sprite/package.json +++ b/projects/icon-sprite/package.json @@ -1,6 +1,6 @@ { "name": "ng-svg-icon-sprite", - "version": "1.6.0", + "version": "1.6.1", "license": "MIT", "author": "Jan Suwart", "description": "Angular 7 package for generating and using inline SVG icons in your project", @@ -17,6 +17,7 @@ }, "keywords": [ "icon", + "icons", "svg", "sprite", "angular" diff --git a/projects/icon-sprite/src/lib/icon-sprite.component.spec.ts b/projects/icon-sprite/src/lib/icon-sprite.component.spec.ts index 48a62fd..bcaf71e 100644 --- a/projects/icon-sprite/src/lib/icon-sprite.component.spec.ts +++ b/projects/icon-sprite/src/lib/icon-sprite.component.spec.ts @@ -150,6 +150,10 @@ describe('IconSpriteComponent using Service', () => { component = fixture.componentInstance; component.src = 'star'; component.title = 'A title text'; + + // Simulate simple input change + // See https://medium.com/@christophkrautz/testing-ngonchanges-in-angular-components-bbb3b4650ee8 + component.ngOnChanges({}); fixture.detectChanges(); const nativeElement: HTMLElement = fixture.nativeElement; diff --git a/projects/icon-sprite/src/lib/icon-sprite.component.ts b/projects/icon-sprite/src/lib/icon-sprite.component.ts index 1a1b7dd..8eb891e 100644 --- a/projects/icon-sprite/src/lib/icon-sprite.component.ts +++ b/projects/icon-sprite/src/lib/icon-sprite.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnChanges } from '@angular/core'; import { IconSpriteService } from './icon-sprite.service'; @Component({ @@ -6,7 +6,7 @@ import { IconSpriteService } from './icon-sprite.service'; styleUrls: ['./icon-sprite.component.scss'], templateUrl: './icon-sprite.component.html' }) -export class IconSpriteComponent implements OnInit { +export class IconSpriteComponent implements OnChanges { @Input() public src: string; @Input() public classes = 'icon'; @@ -21,8 +21,8 @@ export class IconSpriteComponent implements OnInit { private iconSpriteService: IconSpriteService ) {} - ngOnInit() { - // If the src does not contain a # and a spritePath is set, concatenate it + 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 }`; } diff --git a/src/app/app.component.html b/src/app/app.component.html index e7a764e..76469f0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -141,7 +141,8 @@

Manipulation (using dynamic icon path)