taro中如何使用svg图片

在 taro 中使用 SVG 图片，需要先在 Taro.config.js 配置文件中进行注册：

module.exports = {
  ...
  "usingComponents": {
    "svg": "/static/components/svg/svg"
  }
  ...
}

然后创建一个 svg 组件：

import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';

export default class Svg extends Taro.Component {
  static options = {
    addGlobalClass: true
  }

  static defaultProps = {
    width: '100%',
    height: '100%'
  }

  render() {
    const { width, height, src, className } = this.props;

    return (
      <View className={className}>
        <svg
          style={{ width, height }}
          viewBox={`0 0 ${width} ${height}`}
        >
          <use xlinkHref={`/static/svg/${src}.svg#${src}`} />
        </svg>
      </View>
    );
  }
}

然后，在需要使用的页面中引用 svg 组件，传入 src 参数即可：

import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import Svg from 'svg';

export default class Index extends Taro.Component {
  render() {
    return (
      <View>
        <Svg
          src="example"
          width="50px"
          height="50px"
        />
      </View>
    );
  }
}

其中，example.svg 文件需要放置在 static/svg 目录中。