0

I have an SVG file: check.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.3 28.3"><path d="M25.2 3.638l-1.6 1.6c-4.3 4.3-8.9 9.2-13.2 13.6l-5.9-4.9-1.7-1.4-2.8 3.3 1.7 1.4 7.5 6.2 1.6 1.3 1.4-1.4c4.8-4.8 9.9-10.4 14.6-15l1.6-1.6-3.2-3.1z"/></svg>

I want a React component from it; but I don't want any wrapper tag, just 

<svg>
    <path […]/>
</svg>

I know I can do something like

const renderSvg = svg => React.createElement('svg', {
  dangerouslySetInnerHTML: { __html: svg }
});

or even easier

const RenderSvg = (svg) => <svg dangerouslySetInnerHTML={{ __html: svg }} />;

But I would end up with:

<svg>
  <svg>
    <path […]/>
  </svg>
</svg>

Does anyone know how to achieve this without using an external library?

Yevhen Horbunkov
  • 14,965
  • 3
  • 20
  • 42
Emille C.
  • 562
  • 1
  • 7
  • 23
  • If you need to wrap something, but don't want any extra element in the DOM, you might want to look at [Fragements](https://reactjs.org/docs/fragments.html). – DBS Feb 28 '20 at 16:24
  • just have as a function component it will work normally, e.g https://codesandbox.io/s/vibrant-hopper-7k8q3 – ROOT Feb 28 '20 at 16:25
  • @Ma'mounothman no, what you are writing is jsx, not HTML, so is already a react component. My svg is HTML – Emille C. Feb 28 '20 at 16:30
  • @DBS, because of the same reason fragments wont help – Emille C. Feb 28 '20 at 16:35
  • not sure what you want but you can just pass only the `path` tag to your function if you don't want to have duplicate `svg` tag. – ROOT Feb 28 '20 at 16:38
  • Does this answer your question? [How to display svg icons(.svg files) in UI using React Component?](https://stackoverflow.com/questions/42296499/how-to-display-svg-icons-svg-files-in-ui-using-react-component) – DBS Feb 28 '20 at 17:14
  • Thanks @DBS; not, as I want the svg, not an image with svg as source – Emille C. Feb 28 '20 at 18:20
  • @Nikita : did you have a chance to try out [my answer](https://stackoverflow.com/a/60455995/11299053)? Did it work for you? – Yevhen Horbunkov Feb 28 '20 at 21:12
  • @YevgenGorbunkov Yes,I'm testing variants of it. Overall it works, but is tricky to find the correct svg loader for webpack – Emille C. Feb 28 '20 at 22:35

1 Answers1

2

Have your SVG in a separate file, than import that as a component, like this:

import {ReactComponent as Circle} from "./circle.svg"

Following is a demo sandbox

Yevhen Horbunkov
  • 14,965
  • 3
  • 20
  • 42
  • this is absolutely right, but… how do you use this syntax with webpack? – Emille C. Feb 28 '20 at 22:36
  • @Nikita : I don't quite get your concern. Isn't webpack used to deliver content of the app within the sandbox I was referring to? – Yevhen Horbunkov Feb 28 '20 at 22:41
  • Yes, and it works on it; but finding a proper loader for webpack is pretty difficult – Emille C. Feb 28 '20 at 22:46
  • Anyway, this is a different issue, I will check this as the correct answer and if you have further advise it will be welcome – Emille C. Feb 28 '20 at 22:47
  • Thanks for accepting the answer. As for your further concerns, I guess [the one](https://github.com/gregberge/svgr) used by create-react-app or [this one](https://www.npmjs.com/package/react-svg-loader) (right off the top of my head) might perfectly solve the issue. – Yevhen Horbunkov Feb 28 '20 at 22:52
  • Thanks: tried with the first, but not with the second yet. Anyway, should be easy. Thanks! – Emille C. Feb 28 '20 at 22:58