Create an SVG Sprite Sheet

[pierslawson]

Would it be possible to create a Sprite Sheet as part of your build process? Would allow people to quickly get working with your icons without resorting to img tags or using inline SVG.

[vanillajonathan]

This could be interesting together with SVG fragment identifiers.
Example:

<img src="bootstrap-icons.svg#heart-fill" title="Filled heart" />

https://caniuse.com/#feat=svg-fragment
https://www.w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers

[jake-low]

Just wanted to add that the sprite sheet approach is one of the suggested ways to use the Feather icon set. In particular, they suggest using <use xlink:href>, which for Bootstrap icons might look something like this:

<svg class="bi">
  <use xlink:href="path/to/bootstrap-icons.svg#heart-fill"/>
</svg>

The <use> creates a shadow DOM boundary, so this has some of the same limitations as using an <img> to embed an SVG (e.g. you won't be able to target elements within the SVG using CSS selectors in the parent document). More information on CSS-Tricks.

Despite these trade offs, I've personally found the combination of SVG spritesheets and <use> to be a useful technique. As I believe @pierslawson was alluding to, a sprite sheet has the advantage of not really needing any kind of build system or server-side templating (in contrast to inlining the actual individual SVG icons individually, which you'd probably want to do with a <?php include("path/to/icon.svg") ?> or similar). So I think it would be nice to have Bootstrap icons available as a sprite sheet, if possible.

[vanillajonathan]

Feather Icons use a JavaScript to build a sprite sheet from the SVG icons.
https://github.com/feathericons/feather/blob/master/bin/build-sprite-string.js

[mdo]

Added in #274, coming in alpha 5.