feat: svg 图标组件

package.json

@@ -85,6 +85,7 @@
     "unplugin-auto-import": "^0.17.6",
     "unplugin-vue-components": "^0.27.0",
     "vite": "^5.2.12",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^2.0.19"
   },

src/components/MIcon/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg v-bind="$attrs" aria-hidden="true" class="m-icon">
+    <use :xlink:href="symbolId" :fill="color" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+  defineOptions({
+    name: 'MIcon',
+  })
+
+  const props = withDefaults(
+    defineProps<{
+      prefix: string
+      name: string
+      color: string
+      size: number | string
+    }>(),
+    {
+      prefix: 'icon',
+      name: '',
+      color: '#333',
+      size: 24,
+    }
+  )
+
+  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
+  const sizeStyle = computed(() => `${props.size}px`)
+</script>
+
+<style scoped lang="scss">
+  .m-icon {
+    width: v-bind(sizeStyle);
+    height: v-bind(sizeStyle);
+  }
+</style>

src/main.ts

@@ -2,13 +2,15 @@
  * @Author: wjc
  * @Date: 2024-05-27 11:49:45
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-12 11:20:09
+ * @LastEditTime: 2024-07-01 10:13:20
  * @Description:
  */
 import { createSSRApp } from 'vue'
 import * as Pinia from 'pinia'
 import uviewPlus from 'uview-plus'
 import 'virtual:uno.css'
+import 'virtual:svg-icons-register'
+
 import { setupStores } from '@/stores'
 import { setupInterceptor } from '@/utils/request'
 import '@/static/styles/vars.scss'

vite.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-05-27 10:17:11
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-26 15:13:07
+ * @LastEditTime: 2024-07-01 10:07:07
  * @Description:
  */
 import path from 'node:path'
@@ -11,6 +11,7 @@ import UnoCSS from 'unocss/vite'
 import uni from '@dcloudio/vite-plugin-uni'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
 import UniLayouts from '@uni-helper/vite-plugin-uni-layouts'
 // import UniPages from '@uni-helper/vite-plugin-uni-pages'
@@ -44,6 +45,11 @@ export default defineConfig(({ mode }) => {
       UniLayouts(),
       // UniPages(),
       UnoCSS(),
+      createSvgIconsPlugin({
+        iconDirs: [pathResolve('src/static/icons')],
+        symbolId: 'icon-[dir]-[name]',
+        svgoOptions: true,
+      }),
       Components({
         // 按需导入组件，相关组件声明放置于 components.d.ts
         dts: './types/components.d.ts',