any better loading?

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

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?

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.