vue-inline-svg/dist/vue-inline-svg.js

Replace SVG images with inline SVG element

(function(s,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(s=typeof globalThis<"u"?globalThis:s||self,s.VueInlineSvg=d(s.Vue))})(this,function(s){"use strict";const d={};function y(n){return n.getIsPending!==void 0}function T(n){if(y(n))return n;let o=!0,r=n.then(t=>(o=!1,t),t=>{throw o=!1,t});return r.getIsPending=function(){return o},r}function _(n){let o={};const r=n.attributes;if(!r)return o;for(let t=r.length-1;t>=0;t--)o[r[t].name]=r[t].value;return o}function b(n){return Object.keys(n).reduce((o,r)=>(n[r]!==!1&&n[r]!==null&&n[r]!==void 0&&(o[r]=n[r]),o),{})}function A(n,o){const{class:r,style:t,...p}=_(n),{class:S,style:l,...m}=b(o);return{class:[r,S],style:[t,l],...p,...m}}return s.defineComponent({inheritAttrs:!1,__name:"InlineSvg",props:{src:{},title:{default:void 0},transformSource:{type:Function,default:n=>n},keepDuringLoading:{type:Boolean,default:!0},uniqueIds:{type:[Boolean,String],default:!1},uniqueIdsBase:{default:""}},emits:["loaded","unloaded","error"],setup(n,{expose:o,emit:r}){const t=n,p=r,S=s.useAttrs(),l=s.ref(),m=s.ref(),x=s.ref(),B=Math.random().toString(36).substring(2);o({svgElSource:l,request:x}),s.watch(()=>t.src,e=>{I(e)}),I(t.src);function P(e){if(e=e.cloneNode(!0),t.uniqueIds){const i=typeof t.uniqueIds=="string"?t.uniqueIds:B;e=q(e,i,t.uniqueIdsBase)}return e=t.transformSource(e),t.title&&E(e,t.title),e.innerHTML}function I(e){d[e]||(d[e]=k(e)),l.value&&d[e].getIsPending()&&!t.keepDuringLoading&&(l.value=null,p("unloaded")),d[e].then(i=>{l.value=i,s.nextTick(()=>{p("loaded",m.value)})}).catch(i=>{l.value&&(l.value=void 0,p("unloaded")),delete d[e],p("error",i)})}function k(e){return T(new Promise((i,a)=>{const u=new XMLHttpRequest;u.open("GET",e,!0),x.value=u,u.onload=()=>{if(u.status>=200&&u.status<400)try{let c=new DOMParser().parseFromString(u.responseText,"text/xml").getElementsByTagName("svg")[0];c?i(c):a(new Error('Loaded file is not valid SVG"'))}catch(v){a(v)}else a(new Error("Error loading SVG"))},u.onerror=a,u.send()}))}const C=()=>l.value?s.h("svg",{...A(l.value,S),innerHTML:P(l.value),ref:m}):null;function E(e,i){const a=e.getElementsByTagName("title");if(a.length)a[0].textContent=i;else{const u=document.createElementNS("http://www.w3.org/2000/svg","title");u.textContent=i,e.insertBefore(u,e.firstChild)}}function q(e,i,a=""){const u=["id","href","xlink:href","xlink:role","xlink:arcrole"],v=["href","xlink:href"],w=(c,h)=>v.includes(c)&&(h?!h.includes("#"):!1);return[...e.children].forEach(c=>{var h;if((h=c.attributes)!=null&&h.length){const L=Object.values(c.attributes).map(g=>{const f=/url\((.*?)\)/.exec(g.value);return f!=null&&f[1]&&(g.value=g.value.replace(f[0],`url(${a}${f[1]}_${i})`)),g});u.forEach(g=>{const f=L.find(M=>M.name===g);f&&!w(g,f.value)&&(f.value=`${f.value}_${i}`)})}return c.children.length?q(c,i,a):c}),e}return(e,i)=>(s.openBlock(),s.createBlock(C))}})});