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>