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

csdn推荐

第一步：新建svg目录

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

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

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

代码实现：

	
	


	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: {}
	};

第三步：注册全局文件

在main.js文件下

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

第四步：页面使用

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

文章来源:https://blog.csdn.net/2302_79245293/article/details/139599700