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

第一步:新建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>
相关推荐
喧星Aries4 分钟前
进程调度的时机,切换与过程方式(操作系统OS)
java·服务器·前端·操作系统·进程调度
海底火旺6 分钟前
useState:批处理与函数式更新
前端·react.js·面试
亿万托福8 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户40812812003818 分钟前
JWT 和 token 区别
前端
盏茶作酒299 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天10 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪10 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽10 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课11 分钟前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
刘坤1511 分钟前
封装axios二方包
前端·http