CODEWITHSUNDEEP
javascriptreactjssvg-sprite
user7499416
user7499416

Reputation:

React and SVG sprite

I am using React, and I am trying to load a svg icon from a sprite. My sprite is like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol viewBox="0 0 28.3 28.3" id="square">
      <path d="M.3 30.7h27L13.8 3.8zM126.3-51.7c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z" />
      <path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" />
    </symbol>
    <symbol viewBox="0 0 28.3 28.3" id="circle">
      <circle cx="14.2" cy="14.2" r="14.2" />
    </symbol>
  </defs>
</svg>

And I load it with:

<svg viewBox="0 0 28.3 28.3" className="App-icon">
    <use xlinkHref="./sprite#square" />
</svg>

With no results. I made a sandbox as an example: https://codesandbox.io/s/l711v6j7v7

Upvotes: 5

Views: 10520

Answers (2)

Stefan
Stefan

Reputation: 675

If you want to reference it as external resource you need to use the proper URL to the svg file and it needs to be publicly accessible. So in the codesandbox you need to move it to the public folder, so that you can access it in the browser via

https://codesandbox.io/s/l711v6j7v7/sprite.svg

Then you can reference it like this:

<use href="/sprite.svg#square" />

See this fork of your codesandbox.

Upvotes: 4

Marc
Marc

Reputation: 2859

For those where the SVG file is an existing/external svg file. You probably have an existing SVG webpack loader which is not working with the concept of SVG sprites. Why? It generally needs a file reference/url to the sprite file or the SVG (nodes) must exist in the DOM (Solution below)

This works:

  1. Transform the plain SVG to JSX (google html to jsx)
  2. Create a new pure react component and simply return the transformed JSX in render() method
  3. Import and include the created react sprite component
  4. Now use the sprite symbol via <use><svg href="#symbolnameorid"></svg></use> You can use it without the file prefix now

Upvotes: 2

Related Questions