因为之前很多时候都是通过iconfont 来管理格式的图标,但是未免也有不稳定的时候,通过vue3 svg-sprite-loader 来管理svg 同样也很方便
需求:
将ui发送的svg文件应用到页面上,vue 如何解析svg文件
使用步骤:
1、安装插件
npm install svg-sprite-loader --save-dev
2、新建存放svg目录地址
方便后面演示内容,在此处固定一个目录地址,可以根据自己的习惯进行调整,并对后面代码进行修改
3、创建Svgicon.vue:
<template>
<!-- v2 需要使用$listeners,$attrs是v3 的写法 -->
<!-- 将父组件的事件传递到自己身上 并传递给子组件 -->
<svg :class="svgClass" aria-hidden="true" v-on="$attrs">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: "SvgIcon",
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ""
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return "svg-icon " + this.className;
} else {
return "svg-icon";
}
}
}
};
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4、在同级目录下创建index.js
写法为V3 写法,v2 不适用,修改即可
const requireAll = requireContext => requireContext.keys().map(requireContext)
import Svgicon from './Svgicon.vue'
// 如果不需要深层查找则修改为false即可
const req = require.context('./svg', true, /\.svg$/)
export default {
install(app) {
requireAll(req);
app.component('svg-icon', Svgicon) // 挂载在全局
}
}
5、配置 vue.config.js:
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack: config => {
config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/icons')) //处理svg目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
})
6、在main.js 中引入刚才创建的index.js
import svg from './icons/index'
// ......
createApp(App).use(store).use(svg)//.......
7、使用
<!-- 名字为目录中svg文件的名字, class-name自己起的类名方便调整 -->
<svg-icon icon-class="add" class-name="ybp-style"></svg-icon>