将 svg 转换为 react-native-svg

Question

What is the easiest way to do this? I found plenty of svg to JSX converters, which is what I want, but that doesn't work in react-native. I need to convert the svg code to something I can display in my app using react-native-svg. Thanks!

Answer 1

I can think of the following options. The one you use will depend on the amount of files you have to convert.

Option 1 (few files)

Copy-paste your svg code on this site and check the React Native checkbox. This will give you the code which you can then use with react-native-svg

Use that output within the following code (replace the SvgComponent with what was generated):

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;

Option 2 (many files)

Instead of converting them, you can embed them directly in your code with react-native-remote-svg .

For instance you can do this:

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
                      }}/>
    );
  }
}

Option 3 (coolest option)

It isn't free like the two other options, but it isn't expensive either. PaintCode is one of those tools that I just love. Version 3+ now supports java-script. So you could load your svg files in it, and it will spit out code that you can use in your app. The advantage here that the interface is friendlier than the first option above, and you can then animate each object inside the svg file from your code.

Answer 2

I'm using expo for building react native app and I had the same inquiry but I found some solution here react-native-svg . I use the XML Option which was as below.

STEP 1- first I used this link convert SVG to JSX for React to convert the SVG to JSX (Some times you don't need to convert it, it depends on icon itself).

STEP 2- open new file component and import react and import { SvgXml } from 'react-native-svg' , then create a normal functional component inside.

STEP 3- wrap the converted SVG icon tag with Quotation mark to be like this "<svg>some icon code inside</svg>" then store it in a variable var, const, let..etc.

STEP 4- return <SvgXml xml={the variable goes here} /> .

STEP 5- export the component as usual.

here is an example code

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

You can simply try this tool that will do the conversion for you: https://github.com/MoOx/react-from-svg

It can convert SVG to React Native files, but also to Reason/ReScript React Native files, and even React DOM files with some option to remove fill or strokes attributes.