vue3项目中svg图标的封装与使用

我们首先下载依赖包

pnpm instal1 vite-plugin-svg-icons -D

然后我们在vite.config.ts里面配置相关代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path"
// https://vitejs.dev/config/
//引入svg需要用到插件
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
export default defineConfig({

 必须在plugin里面添加
  plugins: [
    vue(),
    createSvgIconsplugin({
      // Specify the icon folder to be cached
    iconDirs: [path.resolve(process.cwd(),'src/assets/icons')],
    // Specify symbolId format
    symbolId:'icon-[dir]-[name]',
    }),
  ],

});

配置main.ts

//svg插件需要配置代码
import 'virtual:svg-icons-register';

然后我们在src/assets下创建一个icons文件下,把所有的图标放在里面

然后在页面写svg标签

里面写一个use标签,然后use标签的属性是xlink:href="#icon-phone"

这个属性值必须是#icon开头,后面-图标名称

<div>
    <svg>
      <use xlink:href="#icon-kobe"></use>
    </svg>
</div>

封装的过程

先创建一个子组件

俩面写一下代码

<template>
      <div>
      这里必须别忘了绑定数据,要不然是没用的
    <svg :style="{width,height}">
      <use :xlink:href="prefix+name" :fill="color"></use>
    </svg>
  </div>
</template>
<script lang="ts" setup>
// 我们可以利用defineprops来获取这个属性
defineProps({
    //  这里是xlink:href的前缀
      prefix:{
        type:String,
        default:"#icon-",
          
      },
    //svg的名字
    name:String,
    // 颜色
    color:{
        type:String,
        default:"" 
    },
    width:{
        type:String,
        default:"16px" 
    },
    height:{
        type:String,
        default:"16px" 
    },

 
})
</script>

<style  scoped>
</style>

在父子组件里面写一下代码

<script setup lang="ts">
import Index from './components/index.vue';
</script>

<template>
  <div>
    <Index name="cancel" color="red" width="100px" height="100px"></Index>
  </div>
 
</template>
<style scoped>
</style>

components里面创建一个index.ts文件,里面写一下代码

import  Index from "./page/index.vue"
import Page from "./page/Page.vue";
const allGlobalComponent = {Index,Page}
export default{

    //无比叫做install方法
     install(app){
     
          Object.keys(allGlobalComponent).forEach(key=>{
            //    注册为全局组件
            app.component(key,allGlobalComponent[key])
          })
         
     }
}

就可以实现svg的封装,我们可以换那个name,就可以切换其他的svg图标非常好用,谢谢大家