将 svg 转换为 react-native-svg

Question

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

Answer 1

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

选项 1 （几个文件）

在此站点上复制粘贴您的 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;

选项 2 （许多文件）

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

例如你可以这样做：

import Image from 'react-native-remote-svg';

class MyImageClass extends Component {

  render () {
    // Embed code or read a SVG file...
    const mySVGImage = '<svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect></svg>';

    return (
        <Image source={{
                          uri: "data:image/svg+xml;utf8," + mySVGImage
                      }}/>
    );
  }
}

选项 3 （最酷的选项）

它不像其他两种选择那样免费，但也不贵。 PaintCode是我非常喜欢的工具之一。 版本 3+ 现在支持 java-script。 所以你可以在其中加载你的 svg 文件，它会吐出你可以在你的应用程序中使用的代码。 这里的优点是界面比上面的第一个选项更友好，然后您可以从代码中为 svg 文件中的每个对象设置动画。

Answer 2

我正在使用 expo 来构建 react native 应用程序，我也有同样的疑问，但我在这里找到了一些解决方案react-native-svg 。 我使用如下的 XML 选项。

第 1步- 首先我使用这个链接convert SVG to JSX for React将 SVG 转换为 JSX（有时您不需要转换它，这取决于图标本身）。

STEP 2- 打开新的文件组件并 import react 和import { SvgXml } from 'react-native-svg' ，然后在里面创建一个普通的功能组件。

STEP 3- 用引号将转换后的 SVG 图标标签包装成"<svg>some icon code inside</svg>"然后将其存储在变量 var、const、let..etc 中。

步骤 4- 返回<SvgXml xml={the variable goes here} /> 。

第 5 步 - 像往常一样导出组件。

这是一个示例代码

import React from 'react'
import { SvgXml } from 'react-native-svg';

function FastRunningIcon(props) {
    const xml = `<svg
    xmlns="http://www.w3.org/2000/svg"
    width="${props.width}"
    height="${props.height}"
    viewBox="0 0 21.244 20"
>
    <path
        fill="#595959"
        d="M7.379 20a1.21 1.21 0 01-.783-.291.235.235 0 01-.04-.041 1.258 1.258 0 01-.293-1.036 2.179 2.179 0 01.544-1.049c.387-.459 1.089-1.209 2.085-2.231H6.874a1.426 1.426 0 01-1.062-.412 1.263 1.263 0 01-.332-.863 1.166 1.166 0 01.345-.85 1.7 1.7 0 011.01-.425c.454-.05 1.532-.07 2.575-.09h.187c.4-.008.649-.009.869-.01h.506L8.4 8.925 8.38 8.9a2.075 2.075 0 01-.2-1.877 3.3 3.3 0 011.165-1.272l.013-.013L12.412 3.6l-1.221-.957-4.011.094h-.04c-.064 0-.116.007-.168.007a2.209 2.209 0 01-.642-.1 1.271 1.271 0 01-.43-.213.755.755 0 01-.279-.478.014.014 0 00-.006-.006s-.006 0-.007-.007A1.132 1.132 0 016.078.9 2.949 2.949 0 017.02.492a.547.547 0 01.067-.013l4.356-.465h.027a1.174 1.174 0 01.2-.014h.052a1.324 1.324 0 01.743.252l.008.005.008.005.019.018.019.013c.6.392 1.155.764 1.575 1.049.373.251.8.54 1.142.784.177.125.3.218.4.293a.7.7 0 01.087.077l.045.041a.251.251 0 00.028.022.364.364 0 01.105.112.038.038 0 00.011.014.111.111 0 01.015.026l.008.012c.171.258.752 1.14 1.041 1.675a1.8 1.8 0 01.226.678.438.438 0 01.08.212l.185 2.005 2.178.12h.013c.062.005.124.007.185.009h.032a2.025 2.025 0 01.66.1.857.857 0 01.451.358 1.063 1.063 0 01.12.625v.013a1.108 1.108 0 01-.6.851 2.419 2.419 0 01-1.022.252h-.027c-.568 0-3.523.171-3.545.173h-.08a1.093 1.093 0 01-.632-.324 1.458 1.458 0 01-.276-.454v-.022l-.006-.014a.384.384 0 01-.04-.093l-.226-1.3-.688.437-.483.307-.029.019-1.138.724.119.184.117.182c.267.414.555.863.88 1.374l.162.256.014.023.02.031.031.048.015.023c.464.732 1.165 1.838 1.365 2.211v.013a1.29 1.29 0 010 1.395 1.568 1.568 0 01-1.3.545h-.969l-.1.1-.026.027c-.005.005-.6.615-1.48 1.49-.9.9-1.878 1.874-2.284 2.231a3.069 3.069 0 01-1.2.757.963.963 0 01-.299.036zm2.7-4.647c-.019.02-1.972 2.024-2.616 2.788a1.347 1.347 0 00-.345.638.333.333 0 00.066.292l.008.007c.061.054.091.081.146.081a.442.442 0 00.113-.021 2.415 2.415 0 00.85-.571c.339-.3 1.428-1.376 2.257-2.2.333-.332.51-.514.682-.689.1-.1.2-.2.314-.32zm-.133-.894a.486.486 0 01.186.043h3.6a.771.771 0 00.611-.2c.062-.082.109-.186-.053-.478v-.014c-.133-.247-.908-1.49-1.58-2.55-.534-.841-1-1.572-1.18-1.847v-.009l-.076-.117-.067-.1-.014-.022a.426.426 0 01.127-.585l3.1-1.98a.424.424 0 01.266-.173l.366-.233.167-.106.473-.3.021-.013.141-.09a.683.683 0 00.319-.346.646.646 0 00-.12-.531c-.2-.365-.66-1.094-1.014-1.641l-.007-.011-.007-.012v.008a.075.075 0 010 .021l-.005-.01-.01-.009a.772.772 0 00-.071-.059l-.031-.023a10.05 10.05 0 00-.341-.256 53.275 53.275 0 00-.807-.553l-.091-.063-.015-.01-.023-.015-.011-.011-.014-.01-.16-.108c-.479-.323-.967-.645-1.289-.858l-.174-.115-.009-.005-.009-.006-.057-.038L12 .97V.965a.16.16 0 01-.022-.021.388.388 0 00-.278-.092.654.654 0 00-.127.012h-.014l-4.316.452a.014.014 0 00-.006.006s0 .006-.007.007a2.253 2.253 0 00-.651.266c-.115.084-.126.112-.119.185a.482.482 0 00.119.053A1.62 1.62 0 007 1.891h.13l4.21-.093a.456.456 0 01.266.093L13.399 3.3a.425.425 0 01-.026.677l-3.52 2.47a2.649 2.649 0 00-.889.93 1.1 1.1 0 00.146 1.076l.014.013a.01.01 0 010 .007.005.005 0 000 .006l3 4.4a.424.424 0 01.024.436.419.419 0 01-.37.229c-.008 0-1.056.005-2.151.027-1.131.022-2.4.059-2.7.093a.867.867 0 00-.517.186.268.268 0 00-.08.238.422.422 0 00.106.279.519.519 0 00.438.146h2.9a.382.382 0 01.12-.04.492.492 0 01.047-.014zm6.6-8.084l-.02.013-.026.012-.053.034-.008.005c-.53.343-.844.544-1.014.652l.281 1.609a.836.836 0 00.119.186.143.143 0 00.1.049h.063c.457-.028 2.77-.168 3.443-.17h.026a1.842 1.842 0 00.651-.146c.124-.066.139-.1.147-.173a.745.745 0 000-.122v-.012a2.468 2.468 0 00-.387-.036h-.041l-.22-.014H19.6l-2.54-.133a.428.428 0 01-.4-.385l-.12-1.368zm-8.41 4.693a.48.48 0 01-.063 0H.42a.43.43 0 01-.08-.851h7.729a.48.48 0 01.063 0 .43.43 0 110 .859zm-1.7-2.125a.539.539 0 01-.063 0H.42a.43.43 0 01-.08-.851h6.029a.539.539 0 01.063 0 .43.43 0 110 .859zm0-2.125a.542.542 0 01-.063 0H.42a.43.43 0 01-.08-.851h6.029a.542.542 0 01.063 0 .43.43 0 110 .859zm2.123-2.124a.51.51 0 01-.065 0H.42a.43.43 0 01-.08-.85h8.154a.51.51 0 01.065 0 .429.429 0 010 .859zm10.347 0a2.337 2.337 0 112.337-2.337 2.34 2.34 0 01-2.337 2.332zm0-3.825a1.472 1.472 0 00-1.488 1.488 1.487 1.487 0 102.974 0A1.471 1.471 0 0018.906.864z"
        data-name="Shape Copy 4"
    ></path>
</svg>`

    return <SvgXml xml={xml} />
}

export default FastRunningIcon;

Answer 3

您可以简单地尝试使用此工具为您进行转换： https : //github.com/MoOx/react-from-svg

它可以将 SVG 转换为 React Native 文件，也可以转换为 Reason/ReScript React Native 文件，甚至是带有一些删除填充或笔触属性的选项的 React DOM 文件。