Vue3+Vite+Ts实现封装svg图标组件，并通过font-size和color改变图标大小和颜色

1.第一步：安装插件

npm install vite-plugin-svg-icons -D

npm install fast-glob -D

2.第二步：配置插件 vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// 引入svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的svg图标文件夹，这里我把所有的svg图片都放在了src/assets/icons文件目录下
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
})

3.第三步：在 src/main.ts内引入注册脚本

import 'virtual:svg-icons-register'

第四步：创建全局svg-icon组件

这里我把组件创建在了src/components 文件夹目录里

<template>
  <span class="svg-content" role="img">
    <svg aria-hidden="true" class="svg-icon">
      <use :xlink:href="prefix + name" rel="external nofollow" />
    </svg>
  </span>
</template>

<script setup>
defineProps({
  prefix: {
    type: String,
    default: '#icon-',
  },
  name: {
    type: String,
    Required: true,
  },
});
</script>
<style scope>
.svg-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.svg-icon {
/* 将宽高设置成1em后，svg图片就会根据父级的font-size属性来改变大小 */ 
  width: 1em;
  height: 1em;
/* 将svg 的fill 属性设置成currentColor后，就会根据父级的color属性来改变颜色*/
  fill: currentColor;
}
</style>

第五步：删除svg文件中所有的fill、fill-opacity、fill-rule属性

如果不删除svg中的这些属性那么svg图片无法通过color属性控制颜色！！！

第六步：全局注册SvgIcon.vue组件

方法1

这里我单独在plugin/index.ts文件中将components文件中所有的组件都注册成了全局的

plugin/index.js

//引入项目中的全局组件
import SvgIcon from '@/components/SvgIcon.vue';

//全局对象
const allGlobalComponents = { SvgIcon };

//对外暴露插件对象
export default {
  install(app) {
    //注册项目的全部组件
    Object.keys(allGlobalComponents).forEach((key) => {
      //注册为全局组件
      app.component(key, allGlobalComponents[key]);
    });
  },
};

然后在main.ts中引入plugin/index.ts

main.ts

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import router from './router/index';
import './styles/index.css';
import '@icon-park/vue-next/styles/index.css';
import App from './App.vue';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import 'virtual:svg-icons-register';  //引入注册脚本
//引入plugin/index.ts文件
import plugin from '@/plugin';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

createApp(App)
  .use(pinia)
  .use(router)
  .use(plugin)  //使用plugin/index.ts文件
  .mount('#app');

方法2

直接在main.ts中引用并注册成全局组件

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
 
import 'virtual:svg-icons-register'  //引入注册脚本
 
import SvgIcon from './components/SvgIcon.vue'
 
 
createApp(App).component('SvgIcon', SvgIcon).mount('#app')

TS类型项目注册组件注意事项

如果我们的项目是TS类型的需要全局声明，否则使用全局<SvgIcon />组件时会被识别为unknown类型。

需要在和src文件夹同级的目录, 创建一个components.d.ts, 用来声明该组件。这里我再外面包了一层type文件夹。

components.d.ts

import SvgIcon from '@/components/SvgIcon/index.vue';
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    SvgIcon: typeof SvgIcon;
  }
}

第七步：直接在需要svg的组件中引用

这里我们直接设置父级元素的颜色font-size以及color属性即可控制svg图片的大小和颜色