Improve browser support via polyfills, resolves #4

jannicz · Dec 25, 2019 · 53a5544 · 53a5544
1 parent b740e99
commit 53a5544
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -125,5 +125,21 @@ The SVG-Icon web component matches perfectly with SPA like Angular or React
 See the viewBox [example](https://jannicz.github.io/svg-icon-sprite/examples/scaling.html) for further details.
 Still troubled? Then read [this article](https://css-tricks.com/scale-svg/).
 
+## Polyfills
+
+As Web Components are not supported in all browsers, you might want to install a polyfill
+
+```
+npm i @webcomponents/webcomponentsjs
+```
+
+and include it in the head of your index.html
+
+```html
+<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+```
+
+To learn more, read [this](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs).
+
 ## Author & License
 - Jan Suwart | MIT License
diff --git a/index.html b/index.html
@@ -3,9 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="author" content="Jan Suwart">
+  <title>SVG Icon Sprite Demo</title>
   <link rel="stylesheet" type="text/css" href="examples/demo.css">
   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-  <title>SVG Icon Sprite Demo</title>
+  <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script src="dist/svg-icon-sprite.js"></script>
 </head>
 <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-icon-sprite",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A Web Component for generating and including SVG spites",
   "main": "dist/svg-icon-sprite.js",
   "bugs": {
@@ -18,6 +18,7 @@
   "author": "Jan Suwart",
   "license": "MIT",
   "devDependencies": {
+    "@webcomponents/webcomponentsjs": "^2.4.0",
     "babel-loader": "^8.0.6",
     "babel-preset-es2015": "^6.24.1",
     "ts-loader": "^6.2.1",