oh-vue-2-icons/dist/index.mjs

Include inline SVG icons from different popular icon packs in Vue 2.

import n from"vue";let r=0;var o=n=>n+r++;const t={},e=n=>{const{name:r,paths:o=[],d:e,polygons:i=[],points:v}=n;e&&o.push({d:e}),v&&i.push({points:v}),t[r]=Object.assign({},n,{paths:o,polygons:i}),t[r].minX||(t[r].minX=0),t[r].minY||(t[r].minY=0)},i=(...n)=>{for(const r of n)e(r)},v=n.component("OhVueIcon",{name:"OhVueIcon",props:{name:{type:String,validator:function(n){return!n||n in t}},title:String,fill:String,scale:{type:[Number,String],default:1},animation:{validator:n=>["spin","spin-pulse","wrench","ring","pulse","flash","float"].includes(n)},hover:Boolean,flip:{validator:n=>["horizontal","vertical","both"].includes(n)},speed:{validator:n=>"fast"===n||"slow"===n},label:String,inverse:Boolean},data:()=>({children:[],outerScale:1.2,x:null,y:null}),computed:{normalizedScale(){const n=Number(this.scale);return isNaN(n)||n<=0?this.outerScale:n*this.outerScale},icon(){return t[this.name]},box(){const n=this.icon;return n?`${n.minX} ${n.minY} ${n.width} ${n.height}`:`0 0 ${this.width} ${this.height}`},raw(){if(!this.icon||!this.icon.raw)return null;const n={};let r=this.icon.raw;return r=r.replace(/\s(?:xml:)?id=(["']?)([^"')\s]+)\1/g,((r,t,e)=>{const i=o("vat-");return n[e]=i,` id="${i}"`})),r=r.replace(/#(?:([^'")\s]+)|xpointer\(id\((['"]?)([^')]+)\2\)\))/g,((r,o,t,e)=>{const i=o||e;return i&&n[i]?`#${n[i]}`:r})),r},ratio(){const n=this.icon;return n?Math.max(n.width,n.height)/16:1},width(){return this.icon?this.icon.width/this.ratio*this.normalizedScale:0},height(){return this.icon?this.icon.height/this.ratio*this.normalizedScale:0},style(){return 1===this.normalizedScale?{}:{fontSize:this.normalizedScale+"em"}},klass(){return{"ov-icon":!0,"ov-inverse":this.inverse,"ov-flip-horizontal":"horizontal"===this.flip,"ov-flip-vertical":"vertical"===this.flip,"ov-flip-both":"both"===this.flip,"ov-spin":"spin"===this.animation,"ov-spin-pulse":"spin-pulse"===this.animation,"ov-wrench":"wrench"===this.animation,"ov-ring":"ring"===this.animation,"ov-pulse":"pulse"===this.animation,"ov-flash":"flash"===this.animation,"ov-float":"float"===this.animation,"ov-hover":this.hover,"ov-fast":"fast"===this.speed,"ov-slow":"slow"===this.speed}},attribs(){return this.icon&&this.icon.attr?this.icon.attr:{}}},methods:{updateStack(){if(!this.name&&null!==this.name&&0===this.children.length)return;if(this.icon)return;let n=0,r=0;this.children.forEach((o=>{o.outerScale=this.normalizedScale,n=Math.max(n,o.width),r=Math.max(r,o.height)})),this.children.forEach((o=>{o.x=(n-o.width)/2,o.y=(r-o.height)/2}))}},mounted(){this.updateStack()},updated(){this.updateStack()},render(){const n=Object.assign({role:this.$attrs.role||(this.label||this.title?"img":null),"aria-label":this.label||null,"aria-hidden":!(this.label||this.title),width:this.width,height:this.height,viewBox:this.box},this.attribs);this.attribs.stroke?n.stroke=this.fill?this.fill:"currentColor":n.fill=this.fill?this.fill:"currentColor",this.x&&(n.x=this.x.toString()),this.y&&(n.y=this.y.toString());let r={class:this.klass,style:this.style,attrs:n};if(this.raw){const n=this.title?`<title>${this.escapeHTML(this.title)}</title>${this.raw}`:this.raw;r.domProps={innerHTML:n}}const o=this.title?[this.$createElement("title",this.title)]:[],t=(n,r,o)=>this.$createElement(n,{attrs:r,key:`${n}-${o}`});return this.$createElement("svg",r,this.raw?void 0:o.concat(this.$slots.default||(this.icon?[...this.icon.paths.map(((n,r)=>t("path",n,r))),...this.icon.polygons.map(((n,r)=>t("polygon",n,r)))]:[])))}});function s(n,r){void 0===r&&(r={});var o=r.insertAt;if(n&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===o&&t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e),e.styleSheet?e.styleSheet.cssText=n:e.appendChild(document.createTextNode(n))}}s(".ov-icon {\r\n  display: inline-block;\r\n  overflow: visible;\r\n  vertical-align: -0.2em;\r\n}\r\n");s("/* ---------------- spin ---------------- */\r\n.ov-spin:not(.ov-hover),\r\n.ov-spin.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin {\r\n  animation: ov-spin 1s linear infinite;\r\n}\r\n\r\n.ov-spin:not(.ov-hover).ov-fast,\r\n.ov-spin.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin.ov-fast {\r\n  animation: ov-spin 0.7s linear infinite;\r\n}\r\n\r\n.ov-spin:not(.ov-hover).ov-slow,\r\n.ov-spin.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin.ov-slow {\r\n  animation: ov-spin 2s linear infinite;\r\n}\r\n\r\n/* ---------------- spin-pulse ---------------- */\r\n\r\n.ov-spin-pulse:not(.ov-hover),\r\n.ov-spin-pulse.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin-pulse {\r\n  animation: ov-spin 1s infinite steps(8);\r\n}\r\n\r\n.ov-spin-pulse:not(.ov-hover).ov-fast,\r\n.ov-spin-pulse.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin-pulse.ov-fast {\r\n  animation: ov-spin 0.7s infinite steps(8);\r\n}\r\n\r\n.ov-spin-pulse:not(.ov-hover).ov-slow,\r\n.ov-spin-pulse.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-spin-pulse.ov-slow {\r\n  animation: ov-spin 2s infinite steps(8);\r\n}\r\n\r\n@keyframes ov-spin {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n/* ---------------- wrench ---------------- */\r\n.ov-wrench:not(.ov-hover),\r\n.ov-wrench.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-wrench {\r\n  animation: ov-wrench 2.5s ease infinite;\r\n}\r\n\r\n.ov-wrench:not(.ov-hover).ov-fast,\r\n.ov-wrench.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-wrench.ov-fast {\r\n  animation: ov-wrench 1.2s ease infinite;\r\n}\r\n\r\n.ov-wrench:not(.ov-hover).ov-slow,\r\n.ov-wrench.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-wrench.ov-slow {\r\n  animation: ov-wrench 3.7s ease infinite;\r\n}\r\n\r\n@keyframes ov-wrench {\r\n  0% {\r\n    transform: rotate(-12deg);\r\n  }\r\n\r\n  8% {\r\n    transform: rotate(12deg);\r\n  }\r\n\r\n  10%, 28%, 30%, 48%, 50%, 68% {\r\n    transform: rotate(24deg);\r\n  }\r\n\r\n  18%, 20%, 38%, 40%, 58%, 60% {\r\n    transform: rotate(-24deg);\r\n  }\r\n\r\n  75%, 100% {\r\n    transform: rotate(0deg);\r\n  }\r\n}\r\n\r\n/* ---------------- ring ---------------- */\r\n.ov-ring:not(.ov-hover),\r\n.ov-ring.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-ring {\r\n  animation: ov-ring 2s ease infinite;\r\n}\r\n\r\n.ov-ring:not(.ov-hover).ov-fast,\r\n.ov-ring.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-ring.ov-fast {\r\n  animation: ov-ring 1s ease infinite;\r\n}\r\n\r\n.ov-ring:not(.ov-hover).ov-slow,\r\n.ov-ring.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-ring.ov-slow {\r\n  animation: ov-ring 3s ease infinite;\r\n}\r\n\r\n@keyframes ov-ring {\r\n  0% {\r\n    transform: rotate(-15deg);\r\n  }\r\n\r\n  2% {\r\n    transform: rotate(15deg);\r\n  }\r\n\r\n  4%, 12% {\r\n    transform: rotate(-18deg);\r\n  }\r\n\r\n  6% {\r\n    transform: rotate(18deg);\r\n  }\r\n\r\n  8% {\r\n    transform: rotate(-22deg);\r\n  }\r\n\r\n  10% {\r\n    transform: rotate(22deg);\r\n  }\r\n\r\n  12% {\r\n    transform: rotate(-18deg);\r\n  }\r\n\r\n  14% {\r\n    transform: rotate(18deg);\r\n  }\r\n\r\n  16% {\r\n    transform: rotate(-12deg);\r\n  }\r\n\r\n  18% {\r\n    transform: rotate(12deg);\r\n  }\r\n\r\n  20%, 100% {\r\n    transform: rotate(0deg);\r\n  }\r\n}\r\n\r\n/* ---------------- pulse ---------------- */\r\n.ov-pulse:not(.ov-hover),\r\n.ov-pulse.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-pulse {\r\n  animation: ov-pulse 2s linear infinite;\r\n}\r\n\r\n.ov-pulse:not(.ov-hover).ov-fast,\r\n.ov-pulse.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-pulse.ov-fast {\r\n  animation: ov-pulse 1s linear infinite;\r\n}\r\n\r\n.ov-pulse:not(.ov-hover).ov-slow,\r\n.ov-pulse.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-pulse.ov-slow {\r\n  animation: ov-pulse 3s linear infinite;\r\n}\r\n\r\n@keyframes ov-pulse {\r\n  0% {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  50% {\r\n    transform: scale(0.8);\r\n  }\r\n\r\n  100% {\r\n    transform: scale(1.1);\r\n  }\r\n}\r\n\r\n/* ---------------- flash ---------------- */\r\n.ov-flash:not(.ov-hover),\r\n.ov-flash.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-flash {\r\n  animation: ov-flash 2s ease infinite;\r\n}\r\n\r\n.ov-flash:not(.ov-hover).ov-fast,\r\n.ov-flash.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-flash.ov-fast {\r\n  animation: ov-flash 1s ease infinite;\r\n}\r\n\r\n.ov-flash:not(.ov-hover).ov-slow,\r\n.ov-flash.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-flash.ov-slow {\r\n  animation: ov-flash 3s ease infinite;\r\n}\r\n\r\n@keyframes ov-flash {\r\n  0%, 100%, 50%{\r\n    opacity: 1;\r\n  }\r\n  25%, 75%{\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n/* ---------------- float ---------------- */\r\n.ov-float:not(.ov-hover),\r\n.ov-float.ov-hover:hover,\r\n.ov-parent.ov-hover:hover > .ov-float {\r\n  animation: ov-float 2s linear infinite;\r\n}\r\n\r\n.ov-float:not(.ov-hover).ov-fast,\r\n.ov-float.ov-hover.ov-fast:hover,\r\n.ov-parent.ov-hover:hover > .ov-float.ov-fast {\r\n  animation: ov-float 1s linear infinite;\r\n}\r\n\r\n.ov-float:not(.ov-hover).ov-slow,\r\n.ov-float.ov-hover.ov-slow:hover,\r\n.ov-parent.ov-hover:hover > .ov-float.ov-slow {\r\n  animation: ov-float 3s linear infinite;\r\n}\r\n\r\n@keyframes ov-float {\r\n  0%, 100% {\r\n    transform: translateY(-3px);\r\n  }\r\n  50% {\r\n    transform: translateY(3px);\r\n  }\r\n}\r\n");s(".ov-flip-horizontal {\r\n  transform: scale(-1, 1);\r\n}\r\n\r\n.ov-flip-vertical {\r\n  transform: scale(1, -1);\r\n}\r\n\r\n.ov-flip-both {\r\n  transform: scale(-1, -1);\r\n}\r\n\r\n.ov-inverse {\r\n  color: #fff;\r\n}\r\n");export{v as OhVueIcon,i as addIcons};
//# sourceMappingURL=index.mjs.map