push

lib/component/icon/icon.vue

@@ -0,0 +1,58 @@
+<template>
+  <svg
+    :class="['ns-icon', $attrs.class, spin && 'ns-icon-spin']"
+    :style="getStyle"
+    aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+
+  export default defineComponent({
+    name: 'NsIcon',
+    props: {
+      prefix: {
+        type: String,
+        default: 'icon',
+      },
+      name: {
+        type: String,
+        required: true,
+      },
+      size: {
+        type: [Number, String],
+        default: 14,
+      },
+      fill: {
+        type: String,
+        // required: true,
+      },
+      spin: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+
+      const getStyle = computed(() => {
+        const { size, fill } = props;
+        let s = `${size}`;
+        s = `${s.replace('px', '')}px`;
+        return {
+          width: s,
+          height: s,
+          fill: fill,
+        };
+      });
+      return { symbolId, getStyle };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .ns-icon-spin {
+    animation: loadingCircle 1s infinite linear;
+  }
+</style>