Storybook: Support inline svg files

[sHoskens]

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.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[shilman]

Would anybody like to write a storybook preset for this? I'd be happy to provide guidance. https://storybook.js.org/docs/presets/writing-presets/

[kylesuss]

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.

@Onomanatee is this something you can accomplish using custom head tags?

https://storybook.js.org/docs/configurations/add-custom-head-tags/

As in, could you load your SVG file in one of those files (preview-head.html or manager-head.html) and then reference them the way you want inside of your components? It sounds like what you are after, but maybe I am missing some nuance.

Not sure that solution would require a preset, @shilman -- what do you think?

[shilman]

@kylesuss You're probably right!

TBH I didn't read the full description & just pattern-matched the title. There are a bunch of popular webpack loaders for inlining SVGs and I've seen other requests for those. We should also have a preset for that since it's come up before, but we don't want to modify the base config...

More info: https://wpack.io/tutorials/using-various-svg-loader/

[kylesuss]

Nice. I can snag this preset work, @shilman . I made some progress on it already today & have most of it done, just want to make it more robust. I can finish it up next week.

[devlato]

Any updates on this?

[kylesuss]

@devlato A PR went up (https://github.com/storybookjs/presets/pull/66), though we hit a bit of a roadblock as there doesn't seem to be a good/safe way to override the webpack loader regex coming from Storybook without making too many assumptions.

[losbeekos]

@kylesuss Does your solution also work with packages like ng-inline-svg? I tried all sorts of things to make it work but couldn't find a workaround.

[kylesuss]

@losbeekos that looks slightly different, though I'm not super familiar w/ Angular. The preset I was working on was meant to modify Storybook's webpack loader. It doesn't look like you need to do that w/ ng-inline-svg, is that right?

[drKnoxy]

@kylesuss I don't think your PR actually addressed this issue >_<

This pr is basically requesting dynamic content in the preview-head.html