svg图标封装--基于vue2适配uniapp全端

第一步：新建svg目录

在static目录下新建svg目录,后将所有svg图标都放到此文件夹

第二步：封装注册全局组件

(注意：在根目录下新建components文件夹)

 

代码实现：

<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文件下

// svg全局组件
import SvgIcon from "@/components/SvgIcon"
Vue.component('svg-icon', SvgIcon)

第四步：页面使用

注意:已注册为全局组件,可直接在页面中引用(注意,宽高有默认值可以不传参数,xin是文件名)

<svg-icon :src="'xin'" ></svg-icon>