https://www.smooth-code.com/open-source/svgr/playground/
此网站用于svg转换react组件或者react-native组件
如下是转换为react组件的实例

QQ图片20191010153506.png

如下是转换为react native组件的实例
QQ图片20191010154200.png

import React from 'react'
import Svg, { Defs, Path } from 'react-native-svg'
/* SVGR has dropped some elements not supported by react-native-svg: style */

export const NotificationIcon = props => (
  <Svg
    {...props}
    className="prefix__icon"
    viewBox="0 0 1024 1024"
    width={28}
    height={28}
    // fill 设置颜色
    fill="#4775f2"
  >
    <Defs></Defs>
    <Path d="M874.667 620.146V383.872c0-192.071-160.327-348.316-350.749-348.316h-20.451c-190.407 0-339.911 156.245-339.911 348.316v234.965c-63.147 1.906-113.778 53.547-113.778 117.149v7.11A117.333 117.333 0 00167.11 860.43h181.504c1.707 89.956 20.04 128 131.129 128h56.889c105.941 0 148.523-31.644 152.718-128H856.89a117.333 117.333 0 00117.333-117.333v-7.111c0-58.738-43.207-107.25-99.555-115.84zm-371.2-527.702h20.451c159.047 0 293.86 130.731 293.86 291.428v234.795H220.444V383.872c0-160.697 123.961-291.428 283.023-291.428zm33.166 839.112h-56.889c-69.191 0-74.04-5.05-74.368-71.112h227.157c-2.617 61.91-22.286 71.112-95.9 71.112zm380.7-188.445a60.43 60.43 0 01-60.444 60.445H167.11a60.43 60.43 0 01-60.444-60.445V736a60.43 60.43 0 0160.444-60.444H856.89A60.43 60.43 0 01917.333 736v7.111z" />
    <Path d="M589.568 187.534a252.885 252.885 0 01151.68 231.723 14.222 14.222 0 1028.43 0 281.287 281.287 0 00-168.732-257.778 14.222 14.222 0 00-11.378 26.055zm-101.049-20.992c8.021 0 16.043.37 23.837 1.11a14.18 14.18 0 0015.473-12.829 14.222 14.222 0 00-12.814-15.502 286.037 286.037 0 00-26.496-1.223 14.222 14.222 0 100 28.444z" />
  </Svg>
)

可以作为一个正常的组件被使用。

Last modification：October 18th, 2019 at 08:35 am
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏