IATI / design-system

A design system for IATI products.
https://iati.github.io/design-system/
0 stars 1 forks source link

Inline icons #27

Open tillywoodfield opened 1 week ago

tillywoodfield commented 1 week ago

Note: This should be merged after https://github.com/IATI/design-system/pull/23

The changes in https://github.com/IATI/design-system/pull/23 use vite to inline SVGs into the compiled CSS, so that consuming apps don't have to serve the SVGs separately. However, this doesn't work for the Sphinx theme because it depends on the .scss files directly. It does this because it uses Sass to extend the design system classes to apply to the ones which Sphinx generates automatically. For example, applying the .iati-callout class styles to the Sphinx .admonition class.

This PR does two things to make that work:

  1. Publish the SVG assets with the .scss code so that they are available when installing via NPM
  2. Use vite resolve aliases to allow consumers to set the location of the assets