PART A: A mix task that will traverse /assets/ (or anywhere else you point it) for SVG images of any size and complexity, and merge them together into a sprite sheet in /priv/static/assets/.

The sprite sheet contains all of the processed SVGs, each stored as a <symbol /> addressable by an ID derived from the processed SVG's filename. bird.svg and rain.svg become:

PART B: A Phoenix component, <.sprite />, that will render the specified SVG sprite in your HEEX template, the same way you might render a Heroicon with Core Component's <.icon />.

The four example sprites at the top of this page are rendered with this code:

CSS classes are applied to the examples to allow for specific colour styling. However, an SVG's internal fill, stroke, and other colour values will be preserved, and you can also use currentColor to colour your sprites dynamically through the text colour of a parent element.

Default Tailwind size classes are applied automatically, but you can apply arbitrary classes and other attributes as well.