我们首先下载依赖包
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图标非常好用,谢谢大家