svg 组建

src/components/SvgIcon/index.tsx

@@ -1,121 +0,0 @@
-import { defineComponent } from "vue";
-import styles from "./index.module.less";
-import { isExternal } from '/src/utils/validate'
-export default defineComponent({
-  name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    isExternal () {
-      return isExternal(this.iconClass)
-    },
-    iconName () {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass () {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    },
-    styleExternalIcon () {
-      return {
-        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
-      }
-    }
-  },
-  render() {
-    return (
-      <div>
-        <div v-if="isExternal"
-          style={this.styleExternalIcon}
-          class={[styles.svgExternalIcon, styles.svgIcon]}
-          v-on="$listeners" />
-        <svg v-else
-            class={styles.svgClass}
-            aria-hidden="true"
-            v-on="$listeners">
-          <use xlinkHref={this.iconName} />
-        </svg>
-      </div>
-    );
-  }
-})
-
-{/* <template>
-  <div v-if="isExternal"
-       :style="styleExternalIcon"
-       class="svg-external-icon svg-icon"
-       v-on="$listeners" />
-  <svg v-else
-       :class="svgClass"
-       aria-hidden="true"
-       v-on="$listeners">
-    <use :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script>
-import { isExternal } from '@/utils/validate'
-
-export default {
-  name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    isExternal () {
-      return isExternal(this.iconClass)
-    },
-    iconName () {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass () {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    },
-    styleExternalIcon () {
-      return {
-        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
-.svg-external-icon {
-  background-color: currentColor;
-  mask-size: cover !important;
-  display: inline-block;
-}
-</style> */}

src/components/svg-icon/index.tsx

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SvgIcon',
+  props: {
+    prefix: {
+      type: String,
+      default: 'icon',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: '#333',
+    },
+  },
+  render () {
+    const {name, prefix, color,} = this
+    const symbolId = `#${prefix}-${name}`
+
+    return (
+      <svg {...this.$attrs} aria-hidden="true">
+        <use href={symbolId} fill={color} />
+      </svg>
+    )
+  }
+})