使用vite-plugin-svg-icons
1、安装vite-plugin-svg-icons
npm install vite-plugin-svg-icons
或者
yarn add vite-plugin-svg-icons
2、在vite.config.js中进行配置
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default ({ mode }) => {
const base = '/'
return defineConfig({
base,
plugins: [
vue(),
createSvgIconsPlugin({
// 指定要缓存的图标文件夹(将所有svg都放在一个文件夹下)
iconDirs: [path.resolve(process.cwd(), 'public/icons')],
// 执行icon name的格式(dir代表文件夹名称,name代表icon名称)
symbolId: 'icon-[dir]-[name]'
})
]
})
}
3、组件封装(支持渐变色)
在src/components文件夹下新建SvgIcon文件夹,然后在SvgIcon文件夹下新建index.vue文件
<template>
<svg :class="svgClass" aria-hidden="true">
<defs>
<linearGradient :id="`gradient-${randomNum}`" v-bind="direction">
<stop :stop-color="props.color" />
<stop offset="1" :stop-color="props.gradientColor" />
</linearGradient>
</defs>
<use :xlink:href="iconName" :fill="svgFill" />
</svg>
</template>
<script setup>
import { computed } from 'vue'
let randomNum = Math.random();
const props = defineProps({
// 图标名称
name: {
type: String,
required: true
},
// 单一颜色
color: {
type: String,
default: ''
},
// 渐变色
gradientColor: {
type: String,
default: ''
},
// 渐变色角度
gradientAngle: {
type: String,
default: '1'
}
})
// svg的外层div的class
const svgClass = computed(() => {
if (props.name) {
return `svg-icon icon-${props.name}`
} else {
return 'svg-icon'
}
})
// svg图标的名称
const iconName = computed(() => {
return `#icon-${props.name}`
})
// svg填充颜色,如果gradientColor值存在,就是渐变色,否则是单一颜色
const svgFill = computed(() => {
if (props.gradientColor) {
return `url(#gradient-${randomNum})`
}
return props.color
})
// 渐变色方向
const direction = computed(() => {
switch (props.gradientAngle) {
case '1':
return { x1: '0%', x2: '100%', y1: '0%', y2: '0%' }
case '2':
return { x1: '0%', x2: '100%', y1: '100%', y2: '0%' }
case '3':
return { x1: '0%', x2: '0%', y1: '100%', y2: '0%' }
case '4':
return { x1: '100%', x2: '0%', y1: '100%', y2: '0%' }
case '5':
return { x1: '100%', x2: '0%', y1: '0%', y2: '0%' }
case '6':
return { x1: '0%', x2: '100%', y1: '0%', y2: '100%' }
case '7':
return { x1: '0%', x2: '0%', y1: '0%', y2: '100%' }
case '8':
return { x1: '100%', x2: '0%', y1: '0%', y2: '100%' }
default:
return { x1: '0%', x2: '100%', y1: '0%', y2: '0%' }
}
})
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: middle;
}
</style>
4、在main.js中注册
// 引入注册脚本
import 'virtual:svg-icons-register'
// 引入组件
import SvgIcon from '@/components/SvgIcon/index.vue'
// 全局组件挂载
app.component('SvgIcon', SvgIcon)
5、使用
<template>
<svg-icon name="icon-home" color="#f00"/>
<svg-icon name="icon-back" color="#f00" gradientColor="#0f0" gradientAngle="8" />
</template>