Storybook - LitHtml svg rendering doesn't seem to work with symbol files

Question

I am currently setting up a storybook project. One aspect of it, is showing the various icons we have as a part of the style guide. I am using svg-sprite to create a JSON file of all the svg's we have (along with the svg symbols sprite) so that I can show all the svg's.

For the life of me, I can't figure out why I can't render the svg's without a terrible hack.

This is the code:

<div class="c-styleguide-icons o-grid-template o-grid-template--small-cells o-grid-gap">
              
              ${ Object.entries(IconSvgs.allSvgs).map(([key, value]) => value.id === "empty" ? html``: html `
              <div class="c-card-icon" title="${value.id}">
              <div class="o-ratio">
                  <div class="o-ratio__content c-card-icon__wrapper">
                      <!-- ${value.id} -->
                      <svg class="c-card-icon__svg svg-${value.id}-dims">
                          <use xlink:href="svg/svg-symbols.svg#${value.id}"></use>
                      </svg>
                  </div>
              </div>
              <div class="c-card-icon__body">${value.id}</div>
          </div>
              `)} 
            </div>

The problem lies in my tag within my svg. When I set the id using my JSON file, it doesn't work. When I set it hardcoded, it does. It isn't a faulty naming issue either.

The bizarre thing is, I have tried a lot of things, and I saw that simply repasting the HTML back into my browser, got it to work. Thats why I have this very ugly piece of hacky code within the template now:

  <script>
    const main = document.querySelector("main");
    const innerHtml = main.innerHTML;
    main.innerHTML = "";
    main.innerHTML = innerHtml;
  </script>

And this solves the issue... but I'd rather not have this in there. It just seems that during initial rendering, my svg-symbols file is not being downloaded. I don't see it appearing in the networks tab. When repasting the HTML, only then do I see it appear. Whats causing this, anyone an idea? A timing issue or something? But I can't understand why... is the ${value.id} being inserted at a later time than the actual html? I would imagine its being constructed at the same time?

Any tips are welcome.

Looks like you're creating things in the wrong namespace. That problem doesn't seem to be in the code you've included so far though. — Robert Longson, Oct 31 '22 at 15:58

score 0 · Answer 1 · edited Aug 08 '23 at 22:33

We solved it by generating for each icon a function that returns a svg tag inside svg-sprite and past it in storybook so we could call that function inside a story with lit-html ${getIcon("Add")}.

That way the path is already hardcoded so it will render without any problems.

A code snippet of the generated JS file by svg-sprite:

export const getIcon = (icon) => {

switch (icon) {
        case 'Access': {
            return html`<svg aria-hidden="true">
                <use xlink:href="assets/svg/svg-symbols.svg#Access"></use>
            </svg>`;
            break;
        }
        case 'Add': {
            return html`<svg aria-hidden="true">
                <use xlink:href="assets/s...

Storybook - LitHtml svg rendering doesn't seem to work with symbol files

1 Answers1