1

My team is working on a React component library and we are using an SVG sprite for our icons. We have an <Icon> component that looks like this:

import Sprite from './sprite.svg';

const Icon = ({ icon }) => {
  return (
    <svg>
      <use href={`${Sprite}#${icon}`} />
    </svg>
  );
}

This works fine locally and we can see all of our icons. For example:

<Icon icon="person" />

We're using parcel build to build the library. When we build and use the node package in our application, however, the href URL points to file:///sprite.cca210e1.svg#person a local file, which cannot be read, so the <svg> is just blank.

What should the href URL be to allow us to use the sprite in our node package? Or is there a better way of going about this?

Michael Lynch
  • 2,682
  • 3
  • 31
  • 59

0 Answers0