在Vue2 vue-cli4.5以下的Vue脚手架中使用svg大家已经很常见了,那么如何在Vue3.x 中使用svg呢
首先安装 svg-sprite-loader
npm i -D svg-sprite-loader
1. 首先 在src文件下创建 svgIcon 文件夹 文件夹下创建svg存放svg文件,创建index.js index.vue
结构如下:
index.js
//下面这个是导入svgIcon/svg下的所有svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /\.svg$/);
/*
第一个参数是:'./svg' => 需要检索的目录,
第二个参数是:false => 是否检索子目录,
第三个参数是: /\.svg$/ => 匹配文件的正则
*/
requireAll(req);
index.vue 使用语法糖格式
<template>
<svg :class="svgClass" v-bind="$attrs" :style="{color: color}">
<use :xlink:href="iconName"/>
</svg>
</template>
<script setup>
import { defineProps, computed } from "vue";
const props = defineProps({
name: {
type: String,
required: true
},
color: {
type: String,
default: ''
}
})
const iconName = computed(()=>`#icon-${props.name}`);
const svgClass = computed(()=> {
console.log(props.name, 'props.name');
if (props.name) {
return `svg-icon icon-${props.name}`
}
return 'svg-icon'
});
</script>
<style lang='scss'>
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: middle;
}
</style>
或者
<template>
<svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
import { computed } from "@vue/runtime-core";
export default {
props: {
name: {
type: String,
required: true,
},
color: {
type: String,
default: "",
},
},
setup(props) {
let iconName = computed(() => `#icon-${props.name}`);
let svgClass = computed(() => {
console.log(props.name, "props.name");
if (props.name) {
return `svg-icon icon-${props.name}`;
} else {
return "svg-icon";
}
});
return { iconName, svgClass };
},
};
</script>
<style lang="scss">
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: middle;
}
</style>
main.js全局引用
import {
createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import "@/svgIcon/index"
import svgIcon from "@/svgIcon/index.vue";
createApp(App).use(store).use(router).use(ElementPlus, {
size: 'small',
zIndex: 3000
}).component('svg-icon',svgIcon).mount('#app')
vue.config.js 中配置chainWebpack
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
chainWebpack: config => {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/svgIcon/svg'))
.end();
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/svgIcon/svg'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
.end()
}
}
在组件中使用
//login_name 是svg目录下的svg文件名
<svg-icon name="login_name" />
现在可以正常使用了,使用效果