Enable accessing svg color property for IE, update readme, bump version

jannicz · Dec 31, 2017 · 00cedb7 · 00cedb7
1 parent 7890869
commit 00cedb7
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -97,7 +97,7 @@ the name of the sprite and `icon` is the filename of the svg icon.
 - `width` *optional* - width of the svg in any length unit, i.e. `32px`, `50%`, `auto` etc., default is `100%`
 - `height` *optional* - the height of the svg in any length unit, if undefined height will equal the width
 - `classes` *optional* - class name for this icon, default is `icon`
-- `viewBox` *optional* - define lengths and coordinates in order to scale to fit the total space available (can be used if `viewBox` is missing)
+- `viewBox` *optional* - define lengths and coordinates in order to scale to fit the total space available (to be used if the viewBox of the SVG is missing)
 - `preserveAspectRatio` *optional* - manipulate the aspect ratio, only in combination with `viewBox` (see SVG standard for details)
 
 ## Styling
@@ -106,6 +106,7 @@ Just add a CSS color property to the host component (the component invoking the
 the `currentColor` value to [pass the ancestor's color](https://css-tricks.com/cascading-svg-fill-color) through to the SVG shapes:
 
 ```css
+/* parent component styles */
 color: red;
 ```
 
@@ -115,12 +116,12 @@ color: red;
 
 If you have another folder structure than above, you can pass both your input and output path using the npm script:
 
-```javascript
+```
 svg-symbols sourcefolder > destination/filename.svg
 ```
 
-You can use any other "svg to symbol" library - the `ng-svg-icon-sprite` module is agnostic regarding the technology
-behind the sprite generation.
+Of course you can use any other "svg to symbol" library - the `ng-svg-icon-sprite` module is agnostic regarding the
+technology behind the sprite generation.
 
 ### Custom Styling
 
@@ -155,29 +156,30 @@ You need to set the `viewBox` property manually to match the size of the exporte
 <svg-icon-sprite [src]="'assets/sprites/sprite.svg#asterix'" [width]="'40px'" [viewBox]="'0 0 80 80'"></svg-icon-sprite>
 ```
 
-Still having trouble with scaling or sizing? [Read this article](https://css-tricks.com/scale-svg/) about SVG scaling.
+Still having trouble with scaling or sizing? Try to clean your SVG icons before processing them into sprites by
+additionally using [svgo](https://www.npmjs.com/package/svgo). And [read this article](https://css-tricks.com/scale-svg/)
+about SVG scaling.
 
 ## Browser Support (tested)
 - Chrome (63)
 - Firefox (57)
 - Safari 11
 - Edge
-- IE 11 (with polyfill)
+- IE 11 (with polyfill, see below)
 
 Check the [demo](https://jannicz.github.io/ng-svg-icon-sprite/) if it meets your requirements before using it.
 
 ### Limitations
 
 Older browsers do not support referencing to (external) SVG symbols. To make it work for IE11 and lower you can add this
-[Polyfill](https://github.com/jonathantneal/svg4everybody) to your `polyfills.ts` file:
+[svg4everybody](https://github.com/jonathantneal/svg4everybody) to your `polyfills.ts` file:
 
 ```javascript
+// Add these lines in polyfills.ts
 import * as svg4everybody from 'svg4everybody/dist/svg4everybody.js';
 svg4everybody();
 ```
 
-To have clean SVG icons before processing them into sprites you can additionally use [svgo](https://www.npmjs.com/package/svgo).
-
 ## Local development vs. npm package
 
 For users that would like to clone/fork this repository: this repo contains all development files for the ng-icon-sprite

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SVG Icon Sprite Development</title><base href="ng-svg-icon-sprite"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.5d376d7361968661fcd5.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.56acb15d48939681a4b1.bundle.js"></script><script type="text/javascript" src="polyfills.1d5f4c55ee6ec254f48c.bundle.js"></script><script type="text/javascript" src="main.862dae64275db188e923.bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SVG Icon Sprite Development</title><base href="ng-svg-icon-sprite"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.5d376d7361968661fcd5.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.4c0d9c335fdf512c4d4f.bundle.js"></script><script type="text/javascript" src="polyfills.1d5f4c55ee6ec254f48c.bundle.js"></script><script type="text/javascript" src="main.e9fe4a6f8b12b50e3341.bundle.js"></script></body></html>
diff --git a/docs/inline.56acb15d48939681a4b1.bundle.js → docs/inline.4c0d9c335fdf512c4d4f.bundle.js b/docs/inline.56acb15d48939681a4b1.bundle.js → docs/inline.4c0d9c335fdf512c4d4f.bundle.js
diff --git a/docs/main.862dae64275db188e923.bundle.js → docs/main.e9fe4a6f8b12b50e3341.bundle.js b/docs/main.862dae64275db188e923.bundle.js → docs/main.e9fe4a6f8b12b50e3341.bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-svg-icon-sprite",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Angular 4+ package for generating and using inline SVG icons in your project",
   "license": "MIT",
   "author": "Jan Suwart",

diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -1,9 +1,9 @@
 div ::ng-deep svg.some-icon-class {
   height: 75px;
   width: 75px;
+  fill: orange; /* IE 11 support by polyfill */
 }
 
 div ::ng-deep svg.some-icon-class use {
-  fill: orange;
+  fill: orange; /* evergreen browser symbol styling */
 }
-
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -31,7 +31,7 @@ <h2>Basic Examples</h2>
     </li>
     <li>
       <svg-icon-sprite [src]="'assets/sprites/sprite.svg#star'" [classes]="'some-icon-class'"></svg-icon-sprite>
-      <span>global styles by <code>::ng-deep</code><br>orange, 75px</span>
+      <span>component styles by <code>::ng-deep</code><br>orange, 75px</span>
     </li>
   </ul>
 

diff --git a/src/app/modules/svg-icon-sprite/svg-icon-sprite.component.css b/src/app/modules/svg-icon-sprite/svg-icon-sprite.component.css
@@ -1,3 +1,4 @@
-:host use {
+:host use,
+:host svg {
   fill: currentColor;
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SVG Icon Sprite Development</title><base href="ng-svg-icon-sprite"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.5d376d7361968661fcd5.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.56acb15d48939681a4b1.bundle.js"></script><script type="text/javascript" src="polyfills.1d5f4c55ee6ec254f48c.bundle.js"></script><script type="text/javascript" src="main.862dae64275db188e923.bundle.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SVG Icon Sprite Development</title><base href="ng-svg-icon-sprite"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.5d376d7361968661fcd5.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="inline.4c0d9c335fdf512c4d4f.bundle.js"></script><script type="text/javascript" src="polyfills.1d5f4c55ee6ec254f48c.bundle.js"></script><script type="text/javascript" src="main.e9fe4a6f8b12b50e3341.bundle.js"></script></body></html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,7 @@ <h2>Basic Examples</h2> @@
         </li>
         <li>
           <svg-icon-sprite [src]="'assets/sprites/sprite.svg#star'" [classes]="'some-icon-class'"></svg-icon-sprite>
-          <span>global styles by <code>::ng-deep</code><br>orange, 75px</span>
+          <span>component styles by <code>::ng-deep</code><br>orange, 75px</span>
         </li>
       </ul>
@@ Expand Down @@