简单封装一个自定义图标

1. 创建组件 my-icon

<template>
	<view class="svg_box">
		<image :src="url" class="svg_icon"></image>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
export interface Props {
	size?: string | number,
	type?: string,
}
const props = withDefaults(defineProps<Props>(), {
	size: '24',
	type: 'cart',
})

const icons = {
	order: 'http://multiple.cdn.cn-once.cn/web/icons_order.svg',
	wait: 'http://multiple.cdn.cn-once.cn/web/icons_wait.svg',
	copy: 'http://multiple.cdn.cn-once.cn/web/icons_copy.svg',
	history: 'http://multiple.cdn.cn-once.cn/web/icons_history.png',
	address: 'http://multiple.cdn.cn-once.cn/web/icons_address.png',
	......
}

const format = computed(() => {
	return props.size + 'px';
})

const url = computed(() => {
	return icons[props.type];
})
</script>

<style lang="scss" scoped>
.svg_box {
	display: flex;
	align-items: center;
	justify-content: center;
}
.svg_icon {
	width: v-bind('format');
	height: v-bind('format');
}
</style>

2.页面中直接使用

<template>
	<my-icon type="order" size="20" ></my-icon>
</template>