appstore/dist/lib/ui/base/icon.js

6 lines
1.2 KiB
JavaScript
Raw Permalink Normal View History

2023-12-19 15:30:29 +08:00
import{css as o,svg as t,html as r,Component as a,classMap as n}from"wkit";import l from"./svg-path.js";let e=l;window.EXT_SVG_DICT&&Object.assign(e,EXT_SVG_DICT);var p={extend(s={}){Object.assign(e,s)}};class c extends a{static props={name:{type:String,default:null,observer(i){i===""&&(this.name=null)}}};static styles=o`:host{display:inline-flex;width:var(--wc-icon-size, 32px);height:var(--wc-icon-size, 32px)}:host(:not([name])){display:none}.svg{display:block;width:100%;height:100%;color:inherit;fill:currentColor}.svg circle{stroke:currentColor;animation:circle 1.5s ease-in-out infinite}:host([name=loading]) svg{animation:load 1.5s linear infinite}:host([size=small]){width:24px;height:24px}@keyframes circle{0%{stroke-dasharray:0,3812px;stroke-dashoffset:0}50%{stroke-dasharray:1906px,3812px;stroke-dashoffset:-287px}100%{stroke-dasharray:1906px,3812px;stroke-dashoffset:-2393px}}@keyframes load{to{transform:rotate(360deg)}}`;render(){return r`
<svg class=${n({svg:!0})} viewBox="0 0 1024 1024">
${this.name==="loading"?t`<circle cx="512" cy="512" r="384" fill="none" stroke-width="80" />`:t`<path d="${e[this.name]}" />`}
</svg>
`}}c.reg("icon");export{p as default};