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?