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

1.安装

npm install vite-plugin-svg-icons -D

2.在vite.config.ts中配置

       **所有的svg图标都必须放在assets/icons

// 引入svg
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'export default defineConfig({plugins: [vue(),createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]',}),],、
})

3.在入口文件引入

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

4.使用

在阿里巴巴图标生成的svg图标放在assets/icons下

<!-- svg:图标外层容器节点，内部需要use标签结合使用 -->
<svg><!-- xlink：href 执行哪一个图标，属性值必须 #icon-图标名字 --><!-- use标签使用fill属性设置图标颜色 --><use xlink:href="#icon-phone" fill="yellow"></use></svg>

封装一个svg组件

一：局部组件

<template><svg :style="{ width, height }"><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template>
<script setup lang="ts">defineProps({// xlink:href属性前缀prefix: {type: String,default: '#icon-',},// 图标名字name: String,// 图标颜色color: {type: String,default: '',},// 图标宽度width: {type: String,default: '16px',},// 图标高度height: {type: String,default: '16px',},
})
</script>
<script scoped lang="scss"></script>

引用

import SvgIcon from "@/components/SvgIcon/index.vue"
<svg-icon name="expand" color="pink" height="20px" width="20px"></svg-icon>

二、全局组件

1.在components文件夹下新建一个index.ts，将在所有的svg图标组件引入在index.ts中，这个文件载全体暴露出来。

// 引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue'// 全局对象
const allGloablComponent = { SvgIcon }
// 暴露插件对象
export default {install(app) {Object.keys(allGloablComponent).forEach((key) => {app.component(key, allGloablComponent[key])})},
}

2.在main.ts中设置全局组件

// 引入自定义插件对象，注册整个项目全局组件
import gloablComponent from '@/components'
// 安装自定义插件
app.use(gloablComponent)

进行以上操作之后，在项目的中可以直接使用组件就可以了，不需要引入