Attributes are stripped off of the svg element

[jeffmagill]

Some attributes are critical for getting the svg to display properly, eg. preserveAspectRatio. All of the attributes are being stripped off of the <svg>. Consequently, I cant get my SVGs to display properly. I set up a demo here:

https://github.com/jeffmagill/gatsby-svg-issue

Reproduction steps are:

• Create boilerplate gatsby site gatsby new .
• Add gatsby-plugin-react-svg to package.json and gatsby-config.js
• Add svg with preserveAspectRatio to /src/images
• Import and add SVG component into index.js

You can see the attributes in the svg are present yet the HTML in the production build for index.js that the <svg> element doesnt have any attributes.

[jeffmagill]

I just found your example project here. I cloned it, added preserveAspectRatio to the svg and the attributes made it to the HTML as expected.

I copied your package.json and gatsby-config.js over to my sample project, and -with a couple other edits to account for the differences in versions- my project is still stripping out the attributes. Not sure what else could be causing the difference.

Here's my sample project with your package.json and gatsby-config.js (on a different branch in my repo).

Similarly, I copied my package.json and gatsby-config.js to your project and it still kept the attributes in.

I'll keep looking.

[jacobmischka]

Hm, weird. Might have something to do with #15, or maybe react-svg-loader is doing it on its own?

[jeffmagill]

I isolated the problem. When rendering the image as <Image/>, it renders properly. When using {Image()}, the attributes are stripped off.

Repo | Live view

I was trying to use the latter syntax because I was trying to pass the image to a component for it to be rendered there, e.g.

import Image from 'image.svg';
import Section from 'section.js';
...
<Section image={Image} />
...
//in section.js
<span class="icon">{image()}</span>

Is this the right way to pass an image to a component? If not, what is the proper way to do so?

[jacobmischka]

Ah. I believe all you need to do is trick react by recapitalizing the variable name, something like

const Image = props.image;
return (
   <span class="icon"><Image /></span>
);

Or, I think something like this might work:

<Section image={<Image />}>

// in Section.js
<span class="icon">{props.image}</span>

https://reactjs.org/docs/composition-vs-inheritance.html

[jeffmagill]

@jacobmischka Tricking with the capitalization did the trick. I'm pretty new to Gatsby and React. Do you know what I could look up to find out more about why the capitalization is so important?

[jacobmischka]

I'd recommend giving the React docs a quick peruse when you find time, they're quite good. Here's the relevant section about capitalization: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

[jeffmagill]

Thanks. I'm still working through the docs. Thanks for providing that link.