@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
2 lines (1 loc) • 1.23 kB
JavaScript
;const e=require("vue"),c=require("../utils/genSize.js"),l=require("../utils/getCssColor.js"),i=require("../composables/useIcon.js"),d={class:"FIcon"},m=["aria-label","innerHTML"],f=["src","alt"],k=e.defineComponent({__name:"FIcon",props:{name:{default:null},size:{default:"24"},color:{default:""},strokeColor:{default:""},strokeWidth:{default:0},src:{default:""},alt:{default:""},markup:{default:""}},setup(a){const o=a,t=e.computed(()=>o.alt||o.name||""),n=e.computed(()=>({"--ficon--size":c.genSize(o.size),"--ficon--color":l.getCssColor(o.color),"--ficon--stroke-color":l.getCssColor(o.strokeColor),"--ficon--stroke-width":c.genSize(o.strokeWidth)})),{markup:u}=i.useIcon("icons",e.toRef(()=>o.name)),r=e.computed(()=>o.markup||u.value);return(s,p)=>(e.openBlock(),e.createElementBlock("div",d,[e.unref(r)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"FIcon__content",role:"img","aria-label":e.unref(t),style:e.normalizeStyle(e.unref(n)),innerHTML:e.unref(r)},null,12,m)):s.src?(e.openBlock(),e.createElementBlock("div",{key:1,class:"FIcon__content",style:e.normalizeStyle(e.unref(n))},[e.createElementVNode("img",{src:s.src,alt:e.unref(t)},null,8,f)],4)):e.createCommentVNode("",!0)]))}});module.exports=k;