init

pc/components/icon/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <ElIcon v-bind="props" v-if="name.includes(EL_ICON_PREFIX)">
+        <component :is="name" />
+    </ElIcon>
+    <span v-if="name.includes(LOCAL_ICON_PREFIX)" class="local-icon">
+        <SvgIcon v-bind="props" />
+    </span>
+</template>
+
+<script lang="ts" setup>
+import { ElIcon } from 'element-plus'
+import { EL_ICON_PREFIX, LOCAL_ICON_PREFIX } from '~~/plugins/icons'
+import SvgIcon from './svg-icon.vue'
+const props = defineProps({
+    name: {
+        type: String,
+        default: ''
+    },
+    size: {
+        type: [String, Number],
+        default: '14px'
+    },
+    color: {
+        type: String,
+        default: 'inherit'
+    }
+})
+</script>

pc/components/icon/svg-icon.vue

@@ -0,0 +1,38 @@
+<template>
+    <svg aria-hidden="true" :style="styles">
+        <use :xlink:href="symbolId" fill="currentColor" />
+    </svg>
+</template>
+
+<script lang="ts">
+import { addUnit } from '@/utils/util'
+import type { CSSProperties } from 'vue'
+
+export default defineComponent({
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        size: {
+            type: [Number, String],
+            default: 16
+        },
+        color: {
+            type: String,
+            default: 'inherit'
+        }
+    },
+    setup(props) {
+        const symbolId = computed(() => `#${props.name}`)
+        const styles = computed<CSSProperties>(() => {
+            return {
+                width: addUnit(props.size),
+                height: addUnit(props.size),
+                color: props.color
+            }
+        })
+        return { symbolId, styles }
+    }
+})
+</script>