any better loading?

[jjhesk]

can we use require path of the file to load the asset?

[stowball]

Sorry, I'm not sure how you could require and svg file. You wouldn't be able to use a "real" svg file anyway, as it would have to be transformed to remove the outer "cruft" markup.

A build process could take a folder of SVGs, transform them and create the svgs object.

Out of interest, what don't you like about the current method?

[alexhochreiter]

I think OP wants something like this:

// ./icons/Email.js
import React, {Component} from 'react'
import SvgIcon from 'react-native-svg-icon'
import { Path } from 'react-native-svg'

class IconEmail extends Component {
  constructor(props) {
    super(props)
    this.svg = {
      email: {
        svg: <Path fill="#000000" d="M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4M12,11L20,6H4L12,11M4,18H20V8.37L12,13.36L4,8.37V18Z" />,
        viewBox: '0 0 24 24'
      }
    }
  }

  /*
   * https://github.com/stowball/react-native-svg-icon/issues/11
  */
  setNativeProps = (nativeProps) => {
    // do nothing here, and that seems to work
  }

  render = () => {
    return (
      <SvgIcon name={'email'} {...this.props} svgs={this.svg} />
    )
  }
}

export default IconEmail

Usage:

import React, {Component} from 'react'
import { View, Text } from 'react-native'
import IconEmail from './icons/Email'

export default class MyForm {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render = () => {
    return (
      <View>
        <IconEmail fill='#ccc' />
        <Text>I am a form. lol.</Text>
      </View>
    )
  }
}

I guess this way of loading 'assets' is quiet common, but whatever, those are just my 2 centz.