Inline SVG Import plugin with Babel for react-native

[inf3cti0n95]

I have had a hard time, using SVG files in React native. And I want to change that. SVGR has a rich ecosystem. Which I think I can build upon a babel plugin to import svg files inline in react native project.

I need some support as general instruction and basic steps. As there is very little documentation on the core code of the SVGR packages.

I am building something like https://github.com/airbnb/babel-plugin-inline-react-svg .
Which is actually needed for react-native

[gregberge]

Hello @inf3cti0n95, I think you are looking for a SVGR Babel macro, you should give a look to https://github.com/evenchange4/svgr.macro

[inf3cti0n95]

@neoziro I saw that! But, I want to import SVG files directly into tsx. And babel would transpile svg code to react-native-svg code

[gregberge]

Hmm I don't know how to do it, sorry :x

[kristerkari]

@inf3cti0n95 I'm not sure what your requirements are exactly, but you can try out my project that allows you to do import myimage from "./my-image.svg";. It uses React Native's Metro packager to do everything at bundle time. https://github.com/kristerkari/react-native-svg-transformer

[inf3cti0n95]

@kristerkari This is exactly what I was aiming for, but at babel transformation time. But, your package seems equally good. I'll try it. Thanks.

[inf3cti0n95]

@kristerkari Your solution works just as I expected! Kudos! I dont' think we would need a babel plugin since the metro transformer works just fine for my use case.

[birdofpreyru]

Check this out: https://www.npmjs.com/package/@dr.pogodin/babel-preset-svgr - my solution for the problem:

1. npm install --save-dev @dr.pogodin/babel-preset-svgr.
2. Add @dr.pogodin/babel-preset-svgr to the list of presets in your Babel config.
3. Instruct babel to process SVG files. In case you use Babel CLI to compile entire directories, do SVG compilation as a separate pass with --extensions '.svg' --keep-file-extension flags.
4. Enjoy! :)

[gregberge]

Seems solved.