vue3项目中, 使用vite-plugin-svg-icons这个插件自动加载svg图标的最全的流程

1------首先安装这个插件

npm install --save-dev vite-plugin-svg-icons

要是用了typescript, 应该是还要安装这个插件类型

npm install --save-dev @types/vite-plugin-svg-icons

2-----在vite.config.ts (我是用的这个), 或者vite.config.js导入

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

还要导入这个path (用来指定路径)

import path from 'path'

我是在src里面新建了一个icons文件夹,然后把svg图标直接放到这里面

module.exports = {
  // ...其他配置
  plugins: [
    // 将SVG图标转换为React/Vue组件
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    })
  ]
};

3-----在main.ts 或 .js 里面导入这个插件, 不导入还是显示不了

import 'virtual:svg-icons-register'

4-----创建一个组件 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: 40px;
  height: 40px;
}
</style>

5----在父组件中使用,我是用的vant4 的tabbar的自定义图标, 那个route要加上, 这个 :name后面就是拼接的要使用的svg图标的名字,每次点击的时候把active传进去, 凭借成字符串传给 子组件的href属性 ,结果就是#icon-home-active 就能显示了   ,

如果icons文件夹里面还有文件夹, 那这个name后面的拼接就是  : 从icons里面开始   文件夹名-svg名字, 一直嵌套

<van-tabbar v-model="active" route>
        <van-tabbar-item to="/home">
            <template #icon="{ active }">
                <cp-icon :name="`home-${active ? 'active' : 'default'}`" />
            </template>
        </van-tabbar-item>
</van-tabbar>

6----效果  这里我用ai把png转成svg, png是灰色的, 转出来后,有的能显示有的不能显示, 带颜色的都能显示, 蓝湖下载的svg格式的灰色图标都不能显示, 不知道是不是图标本身的不规则问题