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

DOM load example

+