打包svg地图和封装svg组件

打包打包svg地图

安装插件
yarn add vite-plugin-svg-icons -D
npm i vite-plugin-svg-icons -D
pnpm install vite-plugin-svg-icons -D
使用插件

vite.config.ts

import { VantResolver } from 'unplugin-vue-components/resolvers'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import path from 'path'
export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: false,
      resolvers: [VantResolver({ importStyle: false })]
    }),
+    createSvgIconsPlugin({
+      // 指定图标文件夹，绝对路径（NODE代码）
+      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
+    })
  ],

导入main.ts

import 'virtual:svg-icons-register'

使用精灵地图

    <svg aria-hidden="true">
      <!-- #icon-文件夹名称-图片名称 -->
      <use href="#icon-login-eye-off" />
    </svg>

封装svg组件

组件 components/CpIcon.vue

<script setup lang="ts">
// 提供name属性即可
defineProps<{
  name: string
}>()
</script>

<template>
  <svg aria-hidden="true" class="cp-icon">
    <use :href="`#icon-${name}`" />
  </svg>
</template>

<style lang="scss" scoped>
.cp-icon {
  // 和字体一样大
  width: 1em;
  height: 1em;
}
</style>

types/components.d.ts

import CpIcon from '@/components/CpIcon.vue'
declare module 'vue' {
  interface GlobalComponents {
    CpIcon: typeof CpIcon
  }
}