完成图标组件的重构

Readme.md

@@ -17,6 +17,7 @@
 ### 开发进度 && 计划
 
 - [x] `wc-card`卡片组件
+- [x] `wc-space`间隔组件
 - [ ] `wc-avatar`头像组件
 - [ ] `wc-badge`徽标组件
 - [ ] `wc-counter`倒计时组件
@@ -30,7 +31,7 @@
 - [ ] `wc-select`表单组件-下拉选择
 - [ ] `wc-cascadar`表单组件-多级联动
 - [ ] `wc-switch`表单组件-开关
-- [ ] `wc-icon`图标组件
+- [x] `wc-icon`图标组件
 - [ ] `wc-layer` 弹层组件
 - [ ] `wc-markd`markdown组件
 - [ ] `wc-meditor`md文本编辑器

package.json

@@ -17,6 +17,6 @@
   "author": "yutent",
   "license": "MIT",
   "devDependencies": {
-    "@bd/wcui-cli": "^1.0.2"
+    "@bd/wcui-cli": "^1.1.0"
   }
 }

src/icon/index.js

@@ -0,0 +1,99 @@
+/**
+ * {图标组件}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/06 15:17:25
+ */
+
+import { css, svg, html, Component } from '@bd/core'
+
+import SVG_DICT from './svg.js'
+
+let dict = SVG_DICT
+if (window.EXT_SVG_DICT) {
+  Object.assign(dict, EXT_SVG_DICT)
+}
+
+class Icon extends Component {
+  static props = {
+    is: ''
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      width: var(--size, 36px);
+      height: var(--size, 36px);
+    }
+    :host(:not([is])) {
+      display: none;
+    }
+    .icon {
+      display: block;
+      width: 100%;
+      height: 100%;
+      color: inherit;
+      fill: currentColor;
+
+      &.loading {
+        animation: load 1.5s linear infinite;
+      }
+
+      circle {
+        stroke: currentColor;
+        animation: circle 1.5s ease-in-out infinite;
+      }
+    }
+    $gaps: (
+      's': 20px,
+      'm': 24px,
+      'l': 32px,
+      'xl': 36px,
+      'xxl': 44px,
+      'xxxl': 52px,
+      'xxxxl': 64px
+    );
+
+    @loop $k, $v in $gaps {
+      :host([size='#{$k}']) {
+        width: $v;
+        height: $v;
+      }
+    }
+
+    @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 html`
+      <svg
+        class="icon ${this.is === 'loading' ? 'loading' : ''}"
+        viewBox="0 0 1024 1024"
+      >
+        ${this.is === 'loading'
+          ? svg`<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
+          : svg`<path d="${dict[this.is]}" />`}
+      </svg>
+    `
+  }
+}
+
+customElements.define('wc-icon', Icon)

src/space/index.js

@@ -1,5 +1,5 @@
 /**
- * {卡片组件}
+ * {间隔组件}
  * @author yutent<yutent.io@gmail.com>
  * @date 2023/03/06 15:17:25
  */
@@ -38,7 +38,7 @@ class Space extends Component {
       'xxxl': 24px,
       'xxxxl': 28px
     );
-    @each $k, $v in $gaps {
+    @loop $k, $v in $gaps {
       :host([gap='#{$k}']) {
         .container {
           gap: $v;