From 9abeb54e9f5c9e5a53d39fbfa04e626d566acad7 Mon Sep 17 00:00:00 2001 From: "Suwart, Jan" Date: Sun, 17 Mar 2019 17:26:46 +0100 Subject: [PATCH] Update and build example pages --- docs/main.js | 4 ++-- docs/main.js.map | 2 +- src/app/app.component.html | 43 ++++++++++++++++++++------------------ src/app/app.component.scss | 4 ++-- 4 files changed, 28 insertions(+), 25 deletions(-) diff --git a/docs/main.js b/docs/main.js index ea6725b..9cbaf88 100644 --- a/docs/main.js +++ b/docs/main.js @@ -259,7 +259,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 To access the inner SVG properties like fill or stroke use ::ng-deep

\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

Default sprite path (using the icon sprite service)

\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 Optional: 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

\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" +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" /***/ }), @@ -270,7 +270,7 @@ module.exports = "
\n

SVG-Icon-S /*! no static exports found */ /***/ (function(module, exports) { -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 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9qYW4uc3V3YXJ0L1Byb2plY3RzL25nLXN2Zy1pY29uLXNwcml0ZS9zcmMvYXBwL2FwcC5jb21wb25lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sbUNBQTBCO1lBQTFCLDJCQUEwQixFQUFBO0VBQ2pDO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sb0NBQTJCO1lBQTNCLDRCQUEyQixFQUFBLEVBQUE7O0FBSnBDO0VBQ0U7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxtQ0FBMEI7WUFBMUIsMkJBQTBCLEVBQUE7RUFDakM7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxvQ0FBMkI7WUFBM0IsNEJBQTJCLEVBQUEsRUFBQTs7QUFHcEM7RUFFRSxlQUFjO0VBQ2QsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFNaEM7O0FBVkQ7SUFPSSxXQUFVO0lBQ1YsaUNBQXdCO1FBQXhCLDZCQUF3QjtZQUF4Qix5QkFBd0IsRUFDekI7O0FBR0g7RUFDRSxpQkFBZ0I7RUFDaEIsbUNBQWtDLEVBS25DOztBQVBEO0lBS0ksaUJBQWdCLEVBQ2pCOztBQUdIO0VBQ0UsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFLaEM7O0FBUEQ7SUFLSSw4QkFBcUI7UUFBckIsMEJBQXFCO1lBQXJCLHNCQUFxQixFQUN0Qjs7QUFHSDtFQUNFLGVBQWMsRUFLZjs7QUFORDtJQUlJLGFBQVksRUFDYjs7QUFHSDtFQUNFLGtCQUFpQjtFQUNqQixtQ0FBa0MsRUFLbkM7O0FBUEQ7SUFLSSxxQkFBb0IsRUFDckI7O0FBR0g7RUFDRSwrQ0FBc0M7RUFBdEMsdUNBQXNDO0VBQXRDLDJFQUFzQztFQUN0Qyx3Q0FBK0I7TUFBL0Isb0NBQStCO1VBQS9CLGdDQUErQixFQUtoQzs7QUFQRDtJQUtJLGtDQUF5QjtZQUF6QiwwQkFBeUIsRUFDMUI7O0FBR0g7RUFFRSw4QkFBcUI7TUFBckIsMEJBQXFCO1VBQXJCLHNCQUFxQixFQUN0Qjs7QUFFRDtFQUVFLDRCQUFtQjtNQUFuQix3QkFBbUI7VUFBbkIsb0JBQW1CLEVBQ3BCOztBQUdEO0VBSVEsYUFBWTtFQUFFLHNDQUFzQztFQUNwRCxjQUFhLEVBQ2Q7O0FBS1A7RUFHTSw0QkFBMkI7RUFDM0IscUNBQTRCO01BQTVCLGlDQUE0QjtVQUE1Qiw2QkFBNEIsRUFDN0IiLCJmaWxlIjoic3JjL2FwcC9hcHAuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAa2V5ZnJhbWVzIG15bW92ZSB7XG4gIDAlICAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgNTAlICB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgycHgpOyB9XG4gIDc1JSAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgMTAwJSB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMnB4KTsgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0xIHtcbiAgLy8gVXNlIGNvbG9yIHByb3BlcnR5IGZvciBvdmVycmlkaW5nIGRlZmF1bHQgY29sb3IgYW5kIGhvdmVyIGVmZmVjdFxuICBjb2xvcjogZGFya3JlZDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IHJlZDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxMmRlZyk7XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtMiB7XG4gIGNvbG9yOiBkYXJrZ3JlZW47XG4gIHRyYW5zaXRpb246IGNvbG9yIGVhc2UtaW4tb3V0IDAuNHM7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IGxpbWVncmVlbjtcbiAgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0zIHtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICB9XG59XG5cbi5pY29uLWV4YW1wbGVzLTQge1xuICBjb2xvcjogZGFya3JlZDtcblxuICAmOmhvdmVyLCAmOmZvY3VzIHtcbiAgICBjb2xvcjogYnJvd247XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtNSB7XG4gIGNvbG9yOiBkYXJrb3JhbmdlO1xuICB0cmFuc2l0aW9uOiBjb2xvciBlYXNlLWluLW91dCAwLjFzO1xuXG4gICY6aG92ZXIsICY6Zm9jdXMge1xuICAgIGNvbG9yOiBkYXJrZ29sZGVucm9kO1xuICB9XG59XG5cbi5pY29uLWV4YW1wbGVzLTYge1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gZWFzZS1pbi1vdXQgMC4xcztcbiAgdHJhbnNmb3JtLW9yaWdpbjogY2VudGVyIGNlbnRlcjtcblxuICAmOmhvdmVyLCAmOmZvY3VzIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZVkoMzBkZWcpO1xuICB9XG59XG5cbi5pY29uLXNjYWxlLWRvd24ge1xuICAvLyBTY2FsZSBkb3duIGJ5IDUwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDAuNSk7XG59XG5cbi5pY29uLXNjYWxlLXVwIHtcbiAgLy8gU2NhbGUgdXAgYnkgNTAwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDUpO1xufVxuXG4vLyBBY2Nlc3MgdGhlIFNWRyB2aWEgOjpuZy1kZWVwIHNlbGVjdG9yLCBkb2VzIG5vdCB3b3JrIGluIEZpcmVmb3hcbi5jb250YWluZXIge1xuICA6Om5nLWRlZXAge1xuICAgIHN2Zy5jc3Mtc3R5bGVkLWljb24ge1xuICAgICAgdXNlIHtcbiAgICAgICAgZmlsbDogb3JhbmdlOyAvKiBldmVyZ3JlZW4gYnJvd3NlciBzeW1ib2wgc3R5bGluZyAqL1xuICAgICAgICBzdHJva2U6IGJsYWNrO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuXG4uaWNvbi1jaGFuZ2Utc2l6ZSB7XG4gIDo6bmctZGVlcCB7XG4gICAgc3ZnIHtcbiAgICAgIHRyYW5zaXRpb246IGFsbCBsaW5lYXIgMC4ycztcbiAgICAgIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBjZW50ZXI7XG4gICAgfVxuICB9XG59XG4iXX0= */" +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= */" /***/ }), diff --git a/docs/main.js.map b/docs/main.js.map index c0649d7..391b5f7 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 To access the inner SVG properties like fill or stroke use ::ng-deep

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

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
    \\n
    \\n \\n
    \\n
    \\n 
    \\n.icon-scale-down {{ '{' }}\\n  // Scale down by 50%\\n  transform: scale(0.5);\\n{{ '}' }}\\n
    \\n
    • \\n
  • \\n
    \\n
    \\n \\n
    \\n
    \\n 
    \\n.icon-scale-up {{ '{' }}\\n  // Scale up by 500%\\n  transform: scale(5);\\n{{ '}' }}\\n
    \\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 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 Optional: 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
    \\n \\n
    \\n 
    <svg-icon-sprite [src]=\\\"icon\\\" [width]=\\\"width\\\" [viewBox]=\\\"'0 0 100 100'\\\"></svg-icon>
    \\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

\\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 \\n
    \\n 
    <svg-icon-sprite [src]=\\\"'assets/sprites/image-sprite.svg#multicolor-image'\\\"></svg-icon>
    \\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 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9qYW4uc3V3YXJ0L1Byb2plY3RzL25nLXN2Zy1pY29uLXNwcml0ZS9zcmMvYXBwL2FwcC5jb21wb25lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sbUNBQTBCO1lBQTFCLDJCQUEwQixFQUFBO0VBQ2pDO0lBQU8saUNBQXdCO1lBQXhCLHlCQUF3QixFQUFBO0VBQy9CO0lBQU8sb0NBQTJCO1lBQTNCLDRCQUEyQixFQUFBLEVBQUE7O0FBSnBDO0VBQ0U7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxtQ0FBMEI7WUFBMUIsMkJBQTBCLEVBQUE7RUFDakM7SUFBTyxpQ0FBd0I7WUFBeEIseUJBQXdCLEVBQUE7RUFDL0I7SUFBTyxvQ0FBMkI7WUFBM0IsNEJBQTJCLEVBQUEsRUFBQTs7QUFHcEM7RUFFRSxlQUFjO0VBQ2QsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFNaEM7O0FBVkQ7SUFPSSxXQUFVO0lBQ1YsaUNBQXdCO1FBQXhCLDZCQUF3QjtZQUF4Qix5QkFBd0IsRUFDekI7O0FBR0g7RUFDRSxpQkFBZ0I7RUFDaEIsbUNBQWtDLEVBS25DOztBQVBEO0lBS0ksaUJBQWdCLEVBQ2pCOztBQUdIO0VBQ0UsK0NBQXNDO0VBQXRDLHVDQUFzQztFQUF0QywyRUFBc0M7RUFDdEMsd0NBQStCO01BQS9CLG9DQUErQjtVQUEvQixnQ0FBK0IsRUFLaEM7O0FBUEQ7SUFLSSw4QkFBcUI7UUFBckIsMEJBQXFCO1lBQXJCLHNCQUFxQixFQUN0Qjs7QUFHSDtFQUNFLGVBQWMsRUFLZjs7QUFORDtJQUlJLGFBQVksRUFDYjs7QUFHSDtFQUNFLGtCQUFpQjtFQUNqQixtQ0FBa0MsRUFLbkM7O0FBUEQ7SUFLSSxxQkFBb0IsRUFDckI7O0FBR0g7RUFDRSwrQ0FBc0M7RUFBdEMsdUNBQXNDO0VBQXRDLDJFQUFzQztFQUN0Qyx3Q0FBK0I7TUFBL0Isb0NBQStCO1VBQS9CLGdDQUErQixFQUtoQzs7QUFQRDtJQUtJLGtDQUF5QjtZQUF6QiwwQkFBeUIsRUFDMUI7O0FBR0g7RUFFRSw4QkFBcUI7TUFBckIsMEJBQXFCO1VBQXJCLHNCQUFxQixFQUN0Qjs7QUFFRDtFQUVFLDRCQUFtQjtNQUFuQix3QkFBbUI7VUFBbkIsb0JBQW1CLEVBQ3BCOztBQUdEO0VBSVEsYUFBWTtFQUFFLHNDQUFzQztFQUNwRCxjQUFhLEVBQ2Q7O0FBS1A7RUFHTSw0QkFBMkI7RUFDM0IscUNBQTRCO01BQTVCLGlDQUE0QjtVQUE1Qiw2QkFBNEIsRUFDN0IiLCJmaWxlIjoic3JjL2FwcC9hcHAuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAa2V5ZnJhbWVzIG15bW92ZSB7XG4gIDAlICAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgNTAlICB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgycHgpOyB9XG4gIDc1JSAgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IH1cbiAgMTAwJSB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMnB4KTsgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0xIHtcbiAgLy8gVXNlIGNvbG9yIHByb3BlcnR5IGZvciBvdmVycmlkaW5nIGRlZmF1bHQgY29sb3IgYW5kIGhvdmVyIGVmZmVjdFxuICBjb2xvcjogZGFya3JlZDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IHJlZDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxMmRlZyk7XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtMiB7XG4gIGNvbG9yOiBkYXJrZ3JlZW47XG4gIHRyYW5zaXRpb246IGNvbG9yIGVhc2UtaW4tb3V0IDAuNHM7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgY29sb3I6IGxpbWVncmVlbjtcbiAgfVxufVxuXG4uaWNvbi1leGFtcGxlcy0zIHtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIGVhc2UtaW4tb3V0IDAuMnM7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7XG5cbiAgJjpob3ZlciwgJjpmb2N1cyB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICB9XG59XG5cbi5pY29uLWV4YW1wbGVzLTQge1xuICBjb2xvcjogZGFya3JlZDtcblxuICAmOmhvdmVyLCAmOmZvY3VzIHtcbiAgICBjb2xvcjogYnJvd247XG4gIH1cbn1cblxuLmljb24tZXhhbXBsZXMtNSB7XG4gIGNvbG9yOiBkYXJrb3JhbmdlO1xuICB0cmFuc2l0aW9uOiBjb2xvciBlYXNlLWluLW91dCAwLjFzO1xuXG4gICY6aG92ZXIsICY6Zm9jdXMge1xuICAgIGNvbG9yOiBkYXJrZ29sZGVucm9kO1xuICB9XG59XG5cbi5pY29uLWV4YW1wbGVzLTYge1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gZWFzZS1pbi1vdXQgMC4xcztcbiAgdHJhbnNmb3JtLW9yaWdpbjogY2VudGVyIGNlbnRlcjtcblxuICAmOmhvdmVyLCAmOmZvY3VzIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZVkoMzBkZWcpO1xuICB9XG59XG5cbi5pY29uLXNjYWxlLWRvd24ge1xuICAvLyBTY2FsZSBkb3duIGJ5IDUwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDAuNSk7XG59XG5cbi5pY29uLXNjYWxlLXVwIHtcbiAgLy8gU2NhbGUgdXAgYnkgNTAwJVxuICB0cmFuc2Zvcm06IHNjYWxlKDUpO1xufVxuXG4vLyBBY2Nlc3MgdGhlIFNWRyB2aWEgOjpuZy1kZWVwIHNlbGVjdG9yLCBkb2VzIG5vdCB3b3JrIGluIEZpcmVmb3hcbi5jb250YWluZXIge1xuICA6Om5nLWRlZXAge1xuICAgIHN2Zy5jc3Mtc3R5bGVkLWljb24ge1xuICAgICAgdXNlIHtcbiAgICAgICAgZmlsbDogb3JhbmdlOyAvKiBldmVyZ3JlZW4gYnJvd3NlciBzeW1ib2wgc3R5bGluZyAqL1xuICAgICAgICBzdHJva2U6IGJsYWNrO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuXG4uaWNvbi1jaGFuZ2Utc2l6ZSB7XG4gIDo6bmctZGVlcCB7XG4gICAgc3ZnIHtcbiAgICAgIHRyYW5zaXRpb246IGFsbCBsaW5lYXIgMC4ycztcbiAgICAgIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBjZW50ZXI7XG4gICAgfVxuICB9XG59XG4iXX0= */\"","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 * @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
  • \\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 \\n
    \\n 
    \\n.container {{ '{' }}\\n  ::ng-deep {{ '{' }}\\n    .styled-icon {{ '{' }}\\n      use {{ '{' }}\\n        fill: orange;\\n        stroke: black;
    \\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
    \\n
    \\n \\n
    \\n
    \\n 
    \\n.icon-scale-down {{ '{' }}\\n  // Scale down by 50%\\n  transform: scale(0.5);\\n{{ '}' }}
    \\n
    • \\n
  • \\n
    \\n
    \\n \\n
    \\n
    \\n 
    \\n.icon-scale-up {{ '{' }}\\n  // Scale up by 500%\\n  transform: scale(5);\\n{{ '}' }}\\n
    \\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 \\n

\\n\\n

Manipulation (using dynamic icon path)

\\n\\n \\n \\n \\n \\n \\n\\n
    \\n
  • \\n
    \\n \\n
    \\n 
    <svg-icon-sprite [src]=\\\"icon\\\" [width]=\\\"width\\\" [viewBox]=\\\"'0 0 100 100'\\\"></svg-icon>
    \\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 \\n
    \\n 
    \\n<svg-icon-sprite\\n  [src]=\\\"'assets/sprites/image-sprite.svg#multicolor-image'\\\">\\n</svg-icon>
    \\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/src/app/app.component.html b/src/app/app.component.html index 219b8fa..e7a764e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,8 +3,7 @@

SVG-Icon-Sprite Demo

The Basics (reference, width and styling)

-

To display the icons in original size match the [width] and [height] with the width/height of the equivalent SVG. - To access the inner SVG properties like fill or stroke use ::ng-deep

+

To display the icons in original size match the [width] and [height] with the width/height of the equivalent SVG.

<svg-icon-sprite [src]="'assets/sprites/sprite.svg#delete_70x70'" [width]="'70px'" [height]="'65px'"></svg-icon>
+ +

To access the inner SVG properties like fill or stroke via CSS use ::ng-deep

+ @@ -54,8 +55,7 @@

Scaling (using CSS transform)

.icon-scale-down {{ '{' }} // Scale down by 50% transform: scale(0.5); -{{ '}' }} - +{{ '}' }}
  • @@ -99,7 +99,7 @@

    Scaling (using viewBox)

    • -

    Default sprite path (using the icon sprite service)

    +

    Default sprite path

    Set the sprite path in your environment.ts and set the default path using forRoot(). Now you can invoke the component and simply pass the plain icon name as [src]. @@ -123,7 +123,7 @@

    Default sprite path (using the icon sprite service)< -

    +

    Advanced Tip: to change the sprite path during runtime, inject the iconSpriteService anywhere and execute this.iconSpriteService.setPath('new-path.svg') Re-render all icon-components afterwards!   @@ -171,17 +171,20 @@

    Accessible example (meaningful icon pattern)

    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. 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. -

    Multicolor Icons

    +

    Multicolor Icons (preserving svg properties)

    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). - Remember that you will not be able to overwrite styles via CSS. + Remember that you will not be able to overwrite styles it's via CSS.
    • -
      +
      - 
      <svg-icon-sprite [src]="'assets/sprites/image-sprite.svg#multicolor-image'"></svg-icon>
      + 
      +<svg-icon-sprite
+  [src]="'assets/sprites/image-sprite.svg#multicolor-image'">
+</svg-icon>
    diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e280a14..ad105b6 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -71,10 +71,10 @@ transform: scale(5); } -// Access the SVG via ::ng-deep selector, does not work in Firefox +// Access the SVG via ::ng-deep selector .container { ::ng-deep { - svg.css-styled-icon { + .styled-icon { use { fill: orange; /* evergreen browser symbol styling */ stroke: black;