1.安装相应的插件
cnpm i fast-glob vite-plugin-svg-icons -S
2.vite.config.js中新增下面内容
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/img/svg')],
// 指定symbolId格式
symbolId: '[name]'
})
],
});
3.main.js中配置全局组件
// 全局icon配置
import 'virtual:svg-icons-register'
// 引入组件
import svgIcon from '@/components/svg.vue'
const app = createApp(App);
app.component('svgIcon', svgIcon)
svg.vue
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
iconClass: { type: String, required: true },
className: { type: String, default: '' }
})
const iconName = computed(() => `#${props.iconClass}`);
const svgClass = computed(() => {
if (props.className) {
return 'svg-icon ' + props.className
} else {
return 'svg-icon'
}
});
</script>
<style scoped>
.svg-icon {
margin-right: 12px;
fill: currentColor;
overflow: hidden;
}
</style>
4.在页面上使用,注意home是svg的名称,注意下载下来的svg文件必须打开删除fill="none"和fill="#xxxxxx",否则无法修改颜色
<svgIcon iconClass="home" className="img1" />
.img1 {
width: 16px;
height: 14px;
color: #165DFF;
}
5.效果
原文作者:匆匆那年_海,博客主页:https://www.jianshu.com/u/910c0667c515
95后前端汉子,爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。