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?