Inline SVG Import plugin with Babel for react-native
inf3cti0n95 opened this issue · 8 comments
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
Hello @inf3cti0n95, I think you are looking for a SVGR Babel macro, you should give a look to https://github.com/evenchange4/svgr.macro
@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
Hmm I don't know how to do it, sorry :x
@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
@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.
@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.
Check this out: https://www.npmjs.com/package/@dr.pogodin/babel-preset-svgr - my solution for the problem:
npm install --save-dev @dr.pogodin/babel-preset-svgr.- Add
@dr.pogodin/babel-preset-svgrto the list of presets in your Babel config. - 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-extensionflags. - Enjoy! :)
Seems solved.