Include sprite.svg in js and add sprite.svg from js to html

[wakenby]

Description Add ability to add sprite.svg to js file and embed sprite.svg to page from js file

Additional context To work with complex icons, you need to manually insert sprite.svg into the page:

export async function appendSprite () {
  const response = await fetch('/assets/sprite/sprite.svg')
  const svg = await response.text()

  if (response.ok) prepend(svg)
  else console.error('sprite.svg not found :(')

  function prepend (sprite) {
    const hiddenBox = document.createElement('div')

    hiddenBox.style.cssText = 'height: 0; width: 0; position: absolute; pointer-events: none;'
    hiddenBox.insertAdjacentHTML('afterbegin', sprite)

    document.body.prepend(hiddenBox)
  }
}

But with this approach there is no end-user caching.

It would be cool if the plugin would add the svg to the js file by itself and insert it into the page

[cascornelissen]

IMO this is not something the plugin itself should handle. Simply because there's an endless amount of ways to set up the "page" and almost all of them offer some way to add arbitrary code to the page.

If you're using html-webpack-plugin then this example shows how to do so and for more complex usages the webpack-manifest-plugin can be used.

Unless I misunderstood your feature request?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.