react-native-web support
See original GitHub issueHi @kristerkari,
Thank you for your plugin it is working great for React native projects,
We are trying to share our codebase across react-native and web(using react-native-web), our codebase is originally developed for React native CLI project, now we would like to add web support and using CRA with CRA-rewired but we are facing a problem:
According to CRA docs if you want to import SVG as react component you should use:
import { ReactComponent as Logo } from './logo.svg';
but SVGR is making only export default SvgComponent
so we cannot use this approach, to fix this we could add a small fix here which should not break anything:
var jsCode = svgr.sync(src, svgrConfig) + '\nexport const ReactComponent = SvgComponent;';
which gives us needed support to work in react-native and web projects(also definitions.d.ts should be updated accordingly).
Maybe we could make a PR for this, or what do you think?
Here is a quick fix for postinstall
npm/yarn script:
"postinstall": "sed -e \"s:var jsCode = svgr.sync(src, svgrConfig);:var jsCode = svgr.sync(src, svgrConfig) + 'export const ReactComponent = SvgComponent;';:g\" -i.bak ./node_modules/react-native-svg-transformer/index.js"
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:12 (6 by maintainers)
@vitalyiegorov You can set a custom template for SVGR.
@kristerkari Maybe it will be useful, so let’s add it to the README file.
Since SVGR v6.0.0, switching to named exports is just a matter of adding
exportType: 'named'
to your svgrrc file