vue3 svg 公用组件封装

一、安装插件

1. 安装SVG依赖插件 npm i vite-plugin-svg-icons -D
   npm install fast-glob -D 不安装启动会报错
2. 准备好 svg 图，放在 src —>assets—>icons 文件夹下

二、在 vite.config.ts 配置插件

看 重点 部分代码

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// **重点：引入SVG需要用到的插件**
import{ createSvgIconsPlugin }from 'vite-plugin-svg-icons'
//配置mock
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode })=>{
  //获取各种环境变量
  let env = loadEnv(mode, process.cwd())
  return {
    //设置代理跨域
    server:{
      proxy:{
        [env.VITE_APP_BASE_API]:{
          //获取数据的服务器地址设置
          target: env.VITE_SERVE,
          //是否需要代理跨域
          changeOrigin: true,
          // 路径重写
          rewrite: (path)=>path.replace(/^\/api/,'')
        }
      }
    },
    plugins: [vue(),
      createSvgIconsPlugin({ //**重点：配置SVG**
        iconDirs:[path.resolve(process.cwd(),'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
      viteMockServe({
        localEnabled: command === 'serve', // 保证开发阶段可以使用mock接口
      }),
    ],
    resolve:{
      alias:{
        "@": path.resolve("./src") // 相对路径配置别名，使用@代替src
      }
    },
    //scss全局变量配置
    css:{
      preprocessorOptions:{
        scss:{
          javascriptEnabled:true,
          additionalData:"@import './src/style/variable.scss';"
        }
      }
    }
  }
})

三、组件封装

在 src 下创建 components 文件夹，再在 components 文件夹 下创建 SvgIcon 文件夹，在SvgIcon下创建 index.vue 文件，其代码如下：

<template>
    <!-- svg 外层容器节点，内部需要使用use标签结合使用 -->
    <!-- style设置图标大小 -->
    <svg :style="{width,height}">
      <!-- xlink:href执行行使用哪个图标，属性值务必#icon-图标名字 -->
      <!-- fill属性是设置颜色 -->
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>
<script setup lang="ts">
    defineProps({
        //图标前缀
        prefix:{
            type:String,
            default:"#icon-"
        },
        //图标名称
        name:{
            type:String,
            default:""
        },
        // 图标颜色
        color:{
            type:String,
            default:""
        },
        // 图标宽
        width:{
            type:String,
            default:"16px"
        },
        // 图标高
        height:{
            type:String,
            default:"16px"
        },
    })


</script>

四、全局注册组件

在 components 文件夹下创建 index.ts 文件，其代码如下：

import SvgIcon from "./SvgIcon/index.vue";
import Category from './Category/index.vue'
// 引入element-plus提供的所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const allComponent:any = { SvgIcon, Category }

export default {
    install(app:any){
        Object.keys(allComponent).forEach(key=>{
            //注册全局组件
            app.component(key,allComponent[key])
        })
        //将element-plus提供的图标注册为全局组件
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
          }
    }
}

五、在mian.ts文件中引用

看 重点 部分代码

import { createApp } from 'vue'
import App from './App.vue'

// 引入ElementPlus与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//ElementPlus国际化配置
//ts忽略类型监测
//@ts-ignore
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//暗黑模式样式
import 'element-plus/theme-chalk/dark/css-vars.css'

//获取应用实例对象
const app = createApp(App)
//安装ElementPlus插件
app.use(ElementPlus,{
    locale: zhCn,
})
//**重点：svg需要配置代码**
import 'virtual:svg-icons-register'

//**重点：引入全局组件**
import globalComponents from '@/components/index'
// 安装全局组件
app.use(globalComponents)

//引入全局样式
import '@/style/index.scss'

// 注册路由
import router from './router'
app.use(router)

//引入pinia
import pinia from './store'
app.use(pinia)

//引入路由鉴权
import './permission'

//引入自定义全局指令
import { isHasButton } from './directive/has'
isHasButton(app)
//将应用挂载到挂载点上
app.mount('#app')

//获取环境变量
// console.log(import.meta.env)

六、页面使用

<template>
    <div class="box">
        <SvgIcon :width="50" :height="50" name="phone" color="red"></SvgIcon>
    </div>
  </template>