微信小程序优雅的利用SVG图标，完美契合，操作简洁

2023-09-30 01:07:21

SVG（可缩放矢量图形）因其灵活、轻便和可伸缩性等优势，近几年得到了广泛的应用。然而，遗憾的是，微信小程序目前还不支持以XML的形式使用SVG，这使得SVG的灵活性大大下降，大多数人选择放弃在微信小程序中使用SVG图标方案。不过，通过本文，你将发现，在微信小程序中使用SVG图标并不是一件难事，只需掌握一些技巧和方法，即可轻松实现。

通过Image.src引入SVG

首先，我们可以通过Image.src属性来引入SVG图标。这种方法非常简单，只需要在Image组件中设置src属性，指向SVG图标的路径即可。需要注意的是，SVG图标必须放在小程序的static目录下，路径相对于小程序根目录。

<image src="../static/icon.svg" style="width: 20px; height: 20px;" />

使用uni-app和Vue3开发SVG组件

如果你使用的是uni-app或Vue3框架，还可以通过开发SVG组件的方式来使用SVG图标。这种方法可以使SVG图标更易于复用和管理。

在uni-app中，你可以创建一个新的组件，并在组件的template中使用Image组件引入SVG图标。

<template>
  <image src="../static/icon.svg" style="width: 20px; height: 20px;" />
</template>

在Vue3中，你可以在组件的setup()函数中定义一个SVG图标组件，并将其注册为组件。

import { defineComponent } from 'vue';

export default defineComponent({
  template: '<image :src="iconSrc" style="width: 20px; height: 20px;" />',
  props: {
    iconSrc: {
      type: String,
      required: true,
    },
  },
});