Adds sprite width/height output options + `rem` units

[13twelve]

• also adds option to include dimensions with data/fragment
• adds CSS unit selection between rem and px with rem default
• adds tests
• adds warnings for mismatches
• adds info about new features to options.md

---

A common use case for us at AREA 17 is needing to insert icons into pages at the original authored size of the icon - because we often manually hint icons and especially logos to sit perfectly on the pixel grid, to render at their best, per size. So, lets say we have an "arrow" icon we want to display at 24px and at 32px. We might have separate icons rather than scaling one up and down - so we can have different weights, different hinting, better on pixel grid spacing etc.

Its useful for us to be able to:

<svg aria-hidden="true" class="sprite-arrow--24">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sprite-arrow--24"></use>
</svg>

And it display a 24x24 SVG in the page without having to add additional classes manually such as:

<svg aria-hidden="true" class="w-24 h-24">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sprite-arrow--24"></use>
</svg>

So, this PR adds a styles.format option of dimensions, which, if you have selected a CSS file as your output, will output something like:

.sprite-arrow { width: 0.6875rem; height: 1.25rem; }
.sprite-calendar { width: 1.25rem; height: 1.3125rem; }

If you want to keep using the background image based setup, there is an option includeDimensions: true,, which would output:

.sprite-arrow { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' d='m.7.7 9.4 9.3-9.4 9.3'/%3e%3c/svg%3e"); width: 0.6875rem; height: 1.25rem; }
.sprite-calendar { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cg%3e%3cpath fill='white' d='M17 21H3c-1.654 0-3-1.346-3-3V5c0-1.654 1.346-3 3-3h14c1.654 0 3 1.346 3 3v13c0 1.654-1.346 3-3 3zM3 4c-.551 0-1 .448-1 1v13c0 .552.449 1 1 1h14c.551 0 1-.448 1-1V5c0-.552-.449-1-1-1H3z'/%3e%3c/g%3e%3cg%3e%3cpath fill='white' d='M4 0h2v6H4z'/%3e%3c/g%3e%3cg%3e%3cpath fill='white' d='M14 0h2v6h-2z'/%3e%3c/g%3e%3c/g%3e%3cpath fill='white' d='M0 2h20v7H0z'/%3e%3c/svg%3e"); width: 1.25rem; height: 1.3125rem; }

or, using fragment:

.sprite-arrow { background-image: url("/sprite.svg#sprite-arrow"); width: 0.6875rem; height: 1.25rem; }
.sprite-calendar { background-image: url("/sprite.svg#sprite-calendar"); width: 1.25rem; height: 1.3125rem; }

---

I've also added a unit selection option and changed the default output units to rem, with px being an option, for both CSS and SCSS formats so that any sprite usages can scale with user font scaling preferences.

[cascornelissen]

Apologies for taking a while to respond to this, I have quite a few things going on at the moment but wanted to let you know that I'll look into this as soon as I find some time ❤️

[13twelve]

I'll refactor and re-submit soon

[cascornelissen]

Closing this due to inactivity