将 svg 转换为 react-native-svg [英] Convert svg to react-native-svg

问题描述

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

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!

推荐答案

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

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

选项 1(几个文件)

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

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

在以下代码中使用该输出(将 SvgComponent 替换为生成的内容):

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;

选项 2(许多文件)

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

Instead of converting them, you can embed them directly in your code with 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 文件中的每个对象设置动画.

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.

这篇关于将 svg 转换为 react-native-svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！