GitHub代码地址:GitHub - seapack-hub/seapack-template: seapack-template框架
一,前置工作
(一)安装依赖 vite-plugin-svg-icons
vite-plugin-svg-icons 的优点
预加载 : 在项目运行时就生成所有图标,只需操作一次 dom
高性能: 内置缓存,仅当文件被修改时才会重新生成
typescript
npm install vite-plugin-svg-icons -D
(二)配置
在vite.config.ts中进行配置
typescript
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
return {
plugins: [
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
}),
],
}
}
在main.ts文件中引入
typescript
// 本地SVG图标
import 'virtual:svg-icons-register'
二,使用
(一)封装组件
创建一个SPIcon组件,封装svg。避免重复编码
vue
<template>
<svg aria-hidden="true" class="svg-icon" :style="{height:size,width:size}">
<use :xlink:href="symbolId" :fill="color"></use>
</svg>
</template>
<script setup lang="ts">
import {computed} from 'vue'
const props = defineProps({
//图标大小
size:{
type:[Number,String],
default: '16px'
},
//图标颜色
color:{
type:String,
default:"#606266"
},
//图标前缀,默认icon
prefix:{
type:String,
default:'icon'
},
//图标名称
name:{
type:String,
default:""
}
});
const symbolId = computed(()=>`#${props.prefix}-${props.name}`);
</script>
<style scoped lang="scss">
</style>
注意: symbolId 的值需要与 vite.config.ts中配置的保持一致。
最终symbolId的值格式为#icon-svgName
。
(二)组件内使用
使用封装好的组件
(三)对应svg文件
svg图标名称