Vue2+3中使用Svg和注册components文件夹内部全部为全局组件

Vue2+Js中使用（vue只注册了Svg）

1. 安装插件

npm install -S svg-sprite-loader

2. 封装Svg组件

<template>
    <div>
      <svg :style="{ width: width, height: height }">
        <use :xlink:href="prefix + name" :fill="color"></use>
      </svg>
    </div>
</template>

<script>
export default {
  name: "SvgIcon",
  props:{
    prefix: {type: String, default: '#icon-'},
    name: String,
    color: {type: String, default: ''},
    width: {type: String, default: '16px'},
    height: {type: String, default: '16px'
    }
  }
}
</script>

<style scoped>

</style>

3. 在assets/icons文件夹下创建index.js

import Vue from 'vue'
import SvgIcon from '../../components/SvgIcon'// svg component

// register globally
Vue.component('SvgIcon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

4. vue.config.js

const path = require('path');

module.exports = {
    publicPath: '',
    transpileDependencies: true,
    lintOnSave: false,
    devServer: {
        // 此处开启 https
        https: false,
    },

    chainWebpack: (config) => {
        // 添加 SVG 相关配置
        config.module
            .rule('svg')
             // !!!!!!!!!!!!!!!!!!!!!!!注意这里的路径设置
            .exclude.add(path.resolve('./src/assets/icons'))
            .end();

        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(path.resolve('./src/assets/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end();
    }
};

5. main.js中引入

import './assets/icons/index';

Vue3+Ts中使用（一次性将components下的所有组件都注册了）

 1.安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D
或
npm install vite-plugin-svg-icons -D

2. 封装SvgIcon

<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    type: String,
    default: ""
  },
  //svg宽度
  width: {
    type: String,
    default: '16px'
  },
  //svg高度
  height: {
    type: String,
    default: '16px'
  }

})
</script>
<style scoped></style>

3. 在src/components文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！！！

index.ts

// 引入项目中全部的全局组件 一个一个引入，然后加载全局对象中
// 这里的./SvgIcon/index.vue就是封装好的scgicon组件
import SvgIcon from './SvgIcon/index.vue'   
import type { App, Component } from 'vue';

// 全局对象
const components: { [name: string]: Component } = { SvgIcon };
export default {
    install(app: App) {
        // 注册项目全部的全局组件
        Object.keys(components).forEach((key: string) => {
            app.component(key, components[key]);
        })
    }
}

4. 在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

//svg插件需要配置代码
import 'virtual:svg-icons-register'
// 引入自定义插件对象
import globalComponent from './components/index';
app.use(globalComponent)

5. 在`vite.config.ts`中配置插件

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  createSvgIconsPlugin({
     // 注意这里要填存放svg图标的文件夹地址
    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
    symbolId: 'icon-[dir]-[name]',
  }),],
  resolve: {
    alias: {
      "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
    }
  }
})