将SVG转换为react-native-svg

Question

最简单的方法是什么？我发现很多svg到JSX转换器，这是我想要的，但是在react-native中不起作用。我需要将svg代码转换为可以使用react-native-svg在我的应用程序中显示的内容。谢谢！

Answer 1

我可以想到以下两个选项。您使用的文件将取决于您要转换的文件数量。

选项A

在此站点上复制并粘贴您的svg代码，然后选中React Native复选框。这将为您提供代码，然后您可以将其与react-native-svg一起使用

在以下代码中使用该输出（将SvgComponent替换为生成的内容）：

import React, { Component } from 'react';
import { View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';

const SvgComponent = props => (
  <Svg viewBox="0 0 48 1" style={props.style}>
    <Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
  </Svg>
);

class MySVGIcon extends Component {
  render() {
    const { style } = this.props;
    const component = SvgComponent(style);

    return <View style={style}>{component}</View>;
  }
}

export default MySVGIcon;

选项B（如果您有很多文件。）

无需转换它们，您可以使用react-native-remote-svg将它们直接嵌入代码中。

例如，您可以执行以下操作：

import React, { Component } from 'react';
import { View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';

const SvgComponent = props => (
  <Svg viewBox="0 0 48 1" style={props.style}>
    <Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
  </Svg>
);

class MySVGIcon extends Component {
  render() {
    const { style } = this.props;
    const component = SvgComponent(style);

    return <View style={style}>{component}</View>;
  }
}

export default MySVGIcon;