Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support inline svg files

See original GitHub issue

The problem

In my projects, I like to use inline svgs for my icons. I bundle all my svg icons in a single icons.svg file. This file contains a single <svg> declaration, where each svg icon is defined in a <symbol> declaration with a unique id.

Example:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="arrow-down" viewBox="0 0 20 20">
    <path d="M2.668 5.997l.239-.249a1 1 0 0 1 1.44 0L10 11.62l5.653-5.872a1 1 0 0 1 1.44 0l.24.249a1 1 0 0 1 0 1.387l-6.612 6.868a1 1 0 0 1-1.441 0L2.668 7.384a1 1 0 0 1 0-1.387z"/>
  </symbol>

  <symbol id="cancel" viewBox="0 0 15 15">
    <path d="M11.363 14.37l-3.86-3.857-3.865 3.865a2.138 2.138 0 0 1-3.015 0 2.134 2.134 0 0 1 0-3.014L4.49 7.5.623 3.635a2.133 2.133 0 0 1 0-3.013 2.138 2.138 0 0 1 3.015 0l3.866 3.864L11.362.63a2.131 2.131 0 0 1 3.015 3.013L10.518 7.5l3.859 3.857a2.13 2.13 0 1 1-3.014 3.014z"/>
  </symbol>
</svg>

I declare this file at the bottom of my HTML, and use the svg symbols by referencing their ids in <svg> tags throughout my app.

Many of my components use icons, and to properly represent them, I want to add this file to storybook. However, I did not find any proper way to do this using current storybook functionality, and I wanted to use the same approach to make sure the storybook representation of my components is as close to the production usecase as possible.

Desired solution

I’d like the possibility of adding custom HTML content to storybook. Either to each preview area of storybook, or to the main html page. I can use either one right now, since the storybook iframes can access the svg definitions on the parent web page just fine.

Current workaround

I’ve currently added a simple, albeit dirty, workaround in my project using the webpack config. I basically just used fs to read the icons svg file from my assets folder (which I read and compile into the html templates of the various other projects depending on the abstract component package containing storybook) and add it’s content directly to the props returned by HtmlWebpackPlugin in the webpack config’s plugins. I also overwrite the template of HtmlWebpackPlugin with a custom one, which is basically just the same on as used by storybook but with a little <%= inlineSvgIcons %> declaration added where I add the icons.

I’d definitely be interested in helping this functionality, if there is enough need for and a proper solution can be found to fit it into the current storybook architecture without overcomplicating things.