Solution 1
import { SvgXml } from 'react-native-svg'; const svgFile = '<svg width="199" height="55" ...><rect .../>...</svg>' <SvgXml xml={svgFile} width={w} height={h} />
Solution 2
Install dependencies
yarn add react-native-svg
yarn add react-native-svg-transformer --dev
Configure metro to transform svg file to jsx
- Create metro.config.js
const { getDefaultConfig } = require("metro-config"); module.exports = (async () => { const { resolver: { sourceExts, assetExts } } = await getDefaultConfig(); return { transformer: { babelTransformerPath: require.resolve("react-native-svg-transformer") }, resolver: { assetExts: assetExts.filter(ext => ext !== "svg"), sourceExts: [...sourceExts, "svg"] } }; })();
Usage
import TestSvg from 'assets/image.svg'; <TestSvg width={'100%'} height={'100%'} />
Fill color for svg file (optional)
Foe example, you want to change filled color from “#000” to a custom color
- Make sure your svg file has fill=”#000″
If not open your svg file, replace “white” to “#000”
- Create .svgrrc.js
module.exports = { "replaceAttrValues": { "#000": "{props.fill}" } }
- Usage
<TestSvg width={'100%'} height={'100%'} fill={'red'} />
Leave a Reply