第一步:新建svg目录
在static目录下新建svg目录,后将所有svg图标都放到此文件夹
第二步:封装注册全局组件
(注意:在根目录下新建components文件夹)
代码实现:
html
<template>
<!-- svg图标 -->
<image :style="{ height: hCom, width: wCom }" :src="svgCom" />
</template>
<script>
export default {
name: 'SvgIcon',
// 接收参数
props: {
// svg图标地址
src: {
default: ''
},
// 宽
w: {
default: '24'
},
// 高
h: {
default: '24'
}
},
// 计算属性拼接
computed: {
svgCom() {
return `/static/svg/${this.src}.svg`;
},
wCom() {
return `${this.w}px`;
},
hCom() {
return `${this.h}px`;
}
},
data() {
return {};
},
onLoad() {},
onShow() {},
methods: {}
};
</script>
<style lang="scss" scoped></style>
第三步:注册全局文件
在main.js文件下
javascript
// svg全局组件
import SvgIcon from "@/components/SvgIcon"
Vue.component('svg-icon', SvgIcon)
第四步:页面使用
注意:已注册为全局组件,可直接在页面中引用(注意,宽高有默认值可以不传参数,xin是文件名)
html
<svg-icon :src="'xin'" ></svg-icon>