vue3+vite中实现全局的自定义svg效果

前言：

        vue3+vite中实现全局的自定义svg效果。

实现效果：

实现步骤：

1、安装相应的插件

npm i fast-glob   vite-plugin-svg-icons -S

2、vite.config.js中新增下面内容

//新增+++
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
        vue(),
        //新增+++
        createSvgIconsPlugin({
          // 指定需要缓存的图标文件夹
          iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
          // 指定symbolId格式
          symbolId: '[name]',
          /**
           * 自定义插入位置
           * @default: body-last
           */
          // inject?: 'body-last' | 'body-first'

          /**
           * custom dom id
           * @default: __svg__icons__dom__
           */
          // customDomId: '__svg__icons__dom__',
        }),
    ],

svg的层级：

 ​​​​​​​

3、main.js中配置

// 全局icon配置
import 'virtual:svg-icons-register'

4、在全局组件的文件夹中，加入 svg-icon.vue

关于全局组件的配置，点我看相关资料

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
  import { computed } from "vue";
  const props = defineProps({
    iconClass: {type: String,required: true},
    className: {type: String,default: ''}
  })
  const iconName = computed(() => `#${props.iconClass}`);
  const svgClass = computed(() => {
    if (props.className) {
      return 'svg-icon ' + props.className
    } else {
      return 'svg-icon'
    }
  });

</script>

<style scoped>
  .svg-icon {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.3em;
    fill: currentColor;
    overflow: hidden;
  }

</style>

5、在页面上使用：

图片：src/ assets/ icons/ svg/ login-user.svg

<span class="svg-container">
    <svg-icon :iconClass="'login-user'" />
</span>