Load a local svg file using react-native-svg

Is there a way to load an existing svg asset from local files? Something like this:-

<Svg fillAll="#c6ccd8" width="60" height="60" source={require('../../icons/account.svg')}/>

[jackphuongvu]

Docs have been updated: https://github.com/react-native-community/react-native-svg#use-with-svg-files With react-native-svg-transformer you can now do this:

import Logo from "./logo.svg";
const myApp = () => <Logo width={120} height={40} />
export default myApp

How about the fill props in this way? I’m working on this thing for now as well.

[msand]

It uses SVGR under the hood, and it produces components looking like this:

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

const SvgComponent = props => (
  <Svg width={48} height={1} {...props}>
    <Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
  </Svg>
)

export default SvgComponent

So, if you have elements where you haven’t defined fill or stroke, then they’ll inherit from their ancestors, and if you give a value to the SvgComponent, it’ll give it to the Svg root and thus inherit from there. There is also the color property you can use in addition to stroke and fill, and it can be referenced using the currentColor value: https://github.com/react-native-community/react-native-svg#svg