@iconplanet/uicons-vue
Version:
Vue plugin to add all functionality to add thausends perfect icons into your project. This package gives you special vue component to add easier IconPlanet Uicons into your Vue.js web application.
2 lines (1 loc) • 5.5 kB
JavaScript
(function(s,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(s=typeof globalThis<"u"?globalThis:s||self,s["uicons-vue"]=i(s.Vue))})(this,function(s){"use strict";class i{constructor(e,a){this.message=e,this.name=a}}class l{constructor(e){try{let a=l.validate(e);this.name=a[0],this.packageName=a[1],this.viewBox=`0 0 ${a[2]} ${a[3]}`,this.path=a[4]}catch(a){this.name=null,this.packageName=null,this.path=null,console.warn(`[/uicons-vue]: ${a.message}`)}}static validate(e){if(!Array.isArray(e)||e.length!==5||typeof e[0]!="string"||typeof e[1]!="string"||typeof e[2]!="number"||typeof e[3]!="number"||typeof e[4]!="string")throw new i("Icon format is not supported. Icon = "+JSON.stringify(e),"Invalid icon format");return e}}class o{constructor(e){this.name=o.validate(e),this.icons={}}addIcon(e){if(!e instanceof l)throw new i("Icon must be an instance of Icon class","Invalid icon format");this.icons[e.name]=e}removeIcon(e){this.icons.hasOwnProperty(e)&&delete this.icon[e]}getIcon(e){return this.icons.hasOwnProperty(e)?this.icons[e]:null}static validate(e){const a={ar:"awesome-regular",al:"awesome-light",at:"awesome-thin",as:"awesome-solid"},r=["brands","awesome-regular","awesome-light","awesome-thin","awesome-solid","custom"];if(!e||typeof e!="string")throw new i("Package name must be a string. name = "+e,"Invalid package name");if(e=a.hasOwnProperty(e)?a[e]:e,!r.includes(e))throw new i("Package name is not supported. name = "+e,"Invalid package name");return e}}const p={computed:{classes(){var t=this.$IconPlanet.className;return[t]},style(){let t={display:"inline-block",verticalAlign:this.verticalAlign,height:"1em"};if(this.display=="block"&&(t.display="block",t.width="100%",t.height="100%"),this.width&&(t.width=this.width),this.height&&(t.height=this.height),this.translateX||this.translateY||this.rotate||this.scale){let e="";(this.translateX||this.translateY)&&(e=`translate(${this.translateX}, ${this.translateY})`),this.rotate&&(e+=` rotate(${this.rotate})`),this.scale&&(e+=` scale(${this.scale})`),t.transform=e}return this.color&&(t.fill=this.color,t.color=this.color),this.margin&&(t.margin=this.margin),this.marginLeft&&(t.marginLeft=this.marginLeft),this.marginRight&&(t.marginRight=this.marginRight),this.marginTop&&(t.marginTop=this.marginTop),this.marginBottom&&(t.marginBottom=this.marginBottom),t}},props:{display:{type:String,default:"inline-block"},width:{type:String,default:""},height:{type:String,default:""},color:{type:String,default:""},verticalAlign:{type:String,default:"middle"},translateX:{type:String,default:""},translateY:{type:String,default:""},rotate:{type:String,default:""},scale:{type:String,default:""},margin:{type:String,default:""},marginTop:{type:String,default:""},marginLeft:{type:String,default:""},marginRight:{type:String,default:""},marginBottom:{type:String,default:""}}},h=(t,e)=>{const a=t.__vccOpts||t;for(const[r,c]of e)a[r]=c;return a},m={mixins:[p],props:{package:{type:String,required:!0},name:{type:String,required:!0}},computed:{pack(){return o.validate(this.package)}}},d=["data-name","data-package"];function u(t,e,a,r,c,n){return n.pack&&a.name?(s.openBlock(),s.createElementBlock("i",{key:0,class:s.normalizeClass(t.classes),"data-name":a.name,"data-package":n.pack,style:s.normalizeStyle(t.style)},null,14,d)):s.createCommentVNode("",!0)}const g=h(m,[["render",u]]),y={mixins:[p],props:{package:{type:String,required:!0},name:{type:String,required:!0}},computed:{icon(){var t,e;return(e=(t=this.$IconPlanet)==null?void 0:t.library)==null?void 0:e.getIcon(this.name,this.package)}}},f=["data-name","data-package","viewBox"],w=["d"];function k(t,e,a,r,c,n){return n.icon?(s.openBlock(),s.createElementBlock("svg",{key:0,class:s.normalizeClass(t.classes),style:s.normalizeStyle(t.style),"data-name":n.icon.name,"data-package":n.icon.packageName,viewBox:n.icon.viewBox},[s.createElementVNode("path",{d:n.icon.path},null,8,w)],14,f)):s.createCommentVNode("",!0)}const v=h(y,[["render",k]]);class b{constructor(){this.packages={},this.packages.custom=new o("custom")}add(e){e=new l(e),this.packages.hasOwnProperty(e.packageName)||(this.packages[e.packageName]=new o(e.packageName)),this.packages[e.packageName].addIcon(e)}addAll(e){if(typeof e=="array")throw new i("Icons must be an array.","Invalid icons type");e.forEach(a=>this.add(a))}getIcon(e,a){return this.packages.hasOwnProperty(a)?this.packages[a].getIcon(e):this.packages.custom.getIcon("not-found")}}const I=t=>{const e=["webfont","svg"],a="webfont";return t&&typeof t=="object"&&t.hasOwnProperty("previewType")&&typeof t.previewType=="string"&&e.includes(t.previewType)?t.previewType:a},S=t=>{const e="iconplanet-uicon";return t&&typeof t=="object"&&t.hasOwnProperty("componentName")&&typeof t.componentName=="string"?t.componentName:e},N=t=>{const e="ip-uicon";return t&&typeof t=="object"&&t.hasOwnProperty("className")&&typeof t.componentName=="string"?t.className:e},_=t=>{const e=[];return t&&typeof t=="object"&&t.hasOwnProperty("icons")&&Array.isArray(t.icons)?t.icons:e};return{install(t,e){try{const a=I(e),r=S(e),c=N(e);let n={previewType:a,componentName:r,className:c,library:new b};if(a=="webfont")t.component(r,g);else{const P=_(e);n.library.addAll(P),t.component(r,v)}t.config.globalProperties.$IconPlanet=n,console.log("[@iconplanet/uicons-vue]: Installed successfully.")}catch(a){console.warn(`[/uicons-vue]: ${a.message}`)}}}});