Search code examples
javascriptsvgsvelte

How can I index SVG icons for my project?

I have an Electron/Svelte project where I place index.js files in all my folders for proper structure and indexing. A typical index.js includes code similar to this:

export { default as [FILENAME] } from './FILENAME.svelte'

My main project structure includes to main folders: assets (where the icons are located) and src where I want to load them.

I am trying to export icons from the assets folder using code like this:

export { default as ArrowUp } from './icons/arrow_up.svg'

But when I import the icon in Svelte, I get the following error:

[!] RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript) assets/icons/Arrow_Up.svg (1:0) 1: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ...

I believe I need a different way to export the references from the folder. I tried using a different approach where I export a URL reference like so:

export const arrow = new URL('../../assets/icons/arrow_up.svg', import.meta.url).href

Which seems to work fine. Can someone explain to me why my first approach fails, but the second one works?

Solution

  • The main reason is that an svg is not JavaScript. Your solution is a hacky way of creating a link to the svg which JS recognizes as a string, so it works. I'm pretty sure you'd need index.js to be a jsx file if you're wanting to just import the svg directly. Or what you could do is convert your svg files into jsx components and import them that way like:

    const ArrowIcon = () => (
   <svg></svg>
);

export default ArrowIcon;