Add an SVG inline

[microcipcip]

Is there a way to add an SVG inline? For example the following code breaks the SSR:

import { ReactComponent as Logo } from './logo.svg';

I can create a repo with the issue if needed.

[francisrod01]

This problably is a bug.

Note: this feature is available with [email protected] and higher
https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files

To use SVG inline, please read this by StackOverflow:
https://stackoverflow.com/questions/42289227/unable-to-import-svg-file-into-react

[microcipcip]

@francisrod01 thanks for the reply, I am using [email protected], regarding that solution, I think I'd have to eject CRA, isn't it? Is there any other solution that doesn't require changing webpack config?

[pkev777]

Faced with the same issue. As far as I think we should use correct babel plugin in @babel/register to transform svg imports. But I can't understand which plugin we should use? As I see create-react-app uses @svgr/webpack but it's compatible only with webpack

[microcipcip]

@pkev777 I have investigated this issue and it seems that the only package that doesn't break SSR is https://github.com/airbnb/babel-plugin-inline-react-svg , the reason is that this package converts SVGs files into JS objects.

I haven't fixed it yet though, I don't know how to integrate it with the server.

[pkev777]

@microcipcip but this requires eject(. Or do your find some way how to use it without ejection?

[microcipcip]

@pkev777 That's why I haven't tried it yet, I don't want to eject, so for now I've converted my SVGs in React components ;)

[cereallarceny]

Hey, my apologies for the long wait @microcipcip - I'm looking to ensure this is fixed with version 2.0. If you're interested, I could really use your thoughts for what you'd like to see in the upcoming version. Feel free to comment on the issue here with any suggestions. :)

@francisrod01 @pkev777