diff --git a/README.md b/README.md
index 27970af..fc5d5a6 100644
--- a/README.md
+++ b/README.md
@@ -85,10 +85,7 @@ Above markup will render the icon that had the filename `explore.svg` and is now
- `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
- `classes` *optional* - class name(s) separated by spaces
-- `viewBox` *optional* - define lengths and coordinates in order to scale to fit the total space available
-
-__Note:__ Leaving out the path and just passing in the icon name (`src="explore"`) will automatically reference the default
-path which is `assets/sprites/sprite.svg`.
+- `viewBox` *optional* - define lengths and coordinates in order to scale to fit the total space available
## Coloring
@@ -121,6 +118,18 @@ Set the `viewBox` property manually to match the size of the exported shape. A c
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/).
+### Default sprite path
+
+You can set the default sprite path by adding the attribute `data-svg-sprite-path` to any meta tag in your html head:
+
+```html
+
+
+
+```
+
+From now on you just nee to pass the icon name as src attribute (`src="explore"`).
+
## Integration
### Using inside of Angular or React
diff --git a/assets/material/bear.svg b/assets/material/bear.svg
index 8406c76..db7c65f 100644
--- a/assets/material/bear.svg
+++ b/assets/material/bear.svg
@@ -1 +1,26 @@
-
\ No newline at end of file
+
+
diff --git a/assets/material/milk.svg b/assets/material/milk.svg
index d405c9d..1a905a0 100644
--- a/assets/material/milk.svg
+++ b/assets/material/milk.svg
@@ -1 +1,21 @@
-
\ No newline at end of file
+
+
diff --git a/assets/sprites/sprite.svg b/assets/sprites/sprite.svg
index 70c3385..5dfbc14 100644
--- a/assets/sprites/sprite.svg
+++ b/assets/sprites/sprite.svg
@@ -1,13 +1,71 @@
\ No newline at end of file
diff --git a/dist/svg-icon-sprite.js b/dist/svg-icon-sprite.js
index 43ba7f6..c41eb35 100644
--- a/dist/svg-icon-sprite.js
+++ b/dist/svg-icon-sprite.js
@@ -6,4 +6,4 @@
* @author Jan Suwart
* @license MIT
*/
-class r extends HTMLElement{constructor(){super(),this.width="100%",this.height="100%",this.defaultPath="assets/sprites/sprite.svg",this.cssStyle="fill: currentColor;"}static get observedAttributes(){return[i.Src,i.Width,i.Height,i.Classes,i.ViewBox]}connectedCallback(){this.render()}disconnectedCallback(){}adoptedCallback(){}attributeChangedCallback(t,e,s){switch(t){case i.Src:const t=s.includes("#");this.src=t?s:this.defaultPath+"#"+s;break;case i.Width:this.width=s;break;case i.Height:this.height=s;break;case i.Classes:this.classes=s;break;case i.ViewBox:this.viewBox=s}this.svgEl&&this.updateByProperty(t)}updateByProperty(t){switch(t){case i.Src:this.svgEl.querySelector("use").setAttribute("xlink:href",this.src);break;case i.Width:this.svgEl.setAttribute("width",this.width||"100%");break;case i.Height:this.svgEl.setAttribute("height",this.height||"100%");break;case i.Classes:this.svgEl.removeAttribute("class"),this.updateClassNames();break;case i.ViewBox:this.viewBox?this.svgEl.setAttribute("viewBox",this.viewBox):this.svgEl.removeAttribute("viewBox")}}render(){this.innerHTML=`\n \n `,this.svgEl=this.querySelector("svg"),this.viewBox?this.svgEl.setAttribute("viewBox",this.viewBox):this.classes&&this.updateClassNames()}updateClassNames(){this.classes&&this.svgEl&&this.classes.split(" ").forEach(t=>{this.svgEl.classList.add(t)})}}customElements.define("svg-icon",r)}]);
\ No newline at end of file
+class r extends HTMLElement{constructor(){var t,e;super(),this.width="100%",this.height="100%",this.cssStyle="fill: currentColor;",this.metaPathSel="meta[data-svg-sprite-path]",this.metaEl=document.head.querySelector(this.metaPathSel),(null===(e=null===(t=this.metaEl)||void 0===t?void 0:t.dataset)||void 0===e?void 0:e.svgSpritePath)&&(this.defaultPath=this.metaEl.dataset.svgSpritePath)}static get observedAttributes(){return[i.Src,i.Width,i.Height,i.Classes,i.ViewBox]}connectedCallback(){this.render()}disconnectedCallback(){}adoptedCallback(){}attributeChangedCallback(t,e,s){switch(t){case i.Src:!s.includes("#")&&this.defaultPath?this.src=this.defaultPath+"#"+s:s&&(this.src=s);break;case i.Width:this.width=s;break;case i.Height:this.height=s;break;case i.Classes:this.classes=s;break;case i.ViewBox:this.viewBox=s}this.svgEl&&this.updateByProperty(t)}updateByProperty(t){switch(t){case i.Src:this.svgEl.querySelector("use").setAttribute("xlink:href",this.src);break;case i.Width:this.svgEl.setAttribute("width",this.width||"100%");break;case i.Height:this.svgEl.setAttribute("height",this.height||"100%");break;case i.Classes:this.svgEl.removeAttribute("class"),this.updateClassNames();break;case i.ViewBox:this.viewBox?this.svgEl.setAttribute("viewBox",this.viewBox):this.svgEl.removeAttribute("viewBox")}}render(){this.innerHTML=`\n \n `,this.svgEl=this.querySelector("svg"),this.viewBox?this.svgEl.setAttribute("viewBox",this.viewBox):this.classes&&this.updateClassNames()}updateClassNames(){this.classes&&this.svgEl&&this.classes.split(" ").forEach(t=>{this.svgEl.classList.add(t)})}}customElements.define("svg-icon",r)}]);
\ No newline at end of file
diff --git a/examples/demo.css b/examples/demo.css
index 4abd61c..0a8089d 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -109,7 +109,6 @@ small {
.row.end {
justify-content: flex-start;
}
-.col {}
.center {
display: flex;
align-items: center;
@@ -197,3 +196,13 @@ small {
.fill-opacity {
fill-opacity: 0.5;
}
+
+/* Onload Example */
+
+#more-example-list > li {
+ padding-right: 10px;
+}
+
+.onload:hover, .onload:focus {
+ color: #8BEACC;
+}
diff --git a/examples/demo.js b/examples/demo.js
index 7bb47af..ea5ad9b 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -12,6 +12,9 @@ const typeLabel = document.querySelector('[for="type"] span');
const classesLabel = document.querySelector('[for="classes"] span');
const colorLabel = document.querySelector('[for="color"] span');
const icon = document.querySelector('.manipulation svg-icon');
+const svgIconNode = document.querySelector('#svg-icon-node');
+const codePreview = document.querySelector('#code-preview');
+const codePreviewTemplate = document.querySelector('#code-preview').textContent;
let viewBox = '0 0 24 24';
// Polyfill forEach for NodeLists
@@ -45,18 +48,24 @@ typeInput.addEventListener('change', (event) => {
icon.setAttribute('src', newIconSrc);
typeLabel.textContent = newIconSrc;
console.log('Change src to', newIconSrc);
+
+ updateCodePreview();
});
sizeInput.addEventListener('change', (event) => {
let size = event.target.value + 'px';
icon.setAttribute('width', size);
sizeLabel.textContent = size;
console.log('Change width to', size);
+
+ updateCodePreview();
});
colorInput.addEventListener('change', (event) => {
let color = event.target.value;
console.log('Change color to', color);
icon.setAttribute('style', 'color: ' + color + ';');
colorLabel.textContent = color;
+
+ updateCodePreview();
});
classesInput.addEventListener('change', (event) => {
let classNr = event.target.value;
@@ -76,6 +85,8 @@ classesInput.addEventListener('change', (event) => {
}
classesLabel.textContent = className;
console.log('Change icon class to', className);
+
+ updateCodePreview();
});
viewBoxEnableInput.addEventListener('change', (event) => {
const enabled = event.target.checked;
@@ -91,6 +102,8 @@ viewBoxEnableInput.addEventListener('change', (event) => {
element.setAttribute('disabled', 'disabled');
});
}
+
+ updateCodePreview();
});
viewBox1Input.addEventListener('change', () => setViewBox());
viewBox2Input.addEventListener('change', () => setViewBox());
@@ -101,4 +114,23 @@ function setViewBox() {
viewBox = `${viewBox1Input.value} ${viewBox2Input.value} ${viewBox3Input.value} ${viewBox4Input.value}`;
icon.setAttribute('viewBox', viewBox);
console.log('Setting viewBox to', viewBox);
+
+ updateCodePreview();
}
+
+function updateCodePreview() {
+ const el = svgIconNode.querySelector('svg-icon');
+ let attributeString = '';
+
+ for (let i = 0; i < el.attributes.length; i++) {
+ const attrib = el.attributes[i];
+
+ if (attrib.specified) {
+ attributeString += '\n ' + attrib.name + '="' + attrib.value + '"';
+ }
+ }
+
+ codePreview.textContent = codePreviewTemplate.replace('${attributes}', attributeString);
+}
+
+updateCodePreview();
diff --git a/examples/onload.html b/examples/onload.html
index 879a650..89c6595 100644
--- a/examples/onload.html
+++ b/examples/onload.html
@@ -3,6 +3,7 @@
+
@@ -21,6 +22,7 @@