Sections
Spot illustrations
Spot illustrations are the slightly grown up version of icons with a little more detail. They’re most often used in empty states and new product announcements. They’re built externally on the Icons repository.
Using the spots helpers
Section titled Using the spots helpersJust like icons, spot illustrations are delivered as a Razor helper in Stack Overflow’s production environment, a custom liquid tag in our documentation’s Eleventy site generator, and a JavaScript helper for use in prototypes.
Helpers should be used for all spot illustrations in lieu of SVG sprite sheets or static raster image assets. This ensures a single source of truth for all spot illustrations.
Basic
Section titled Basic<!-- Razor -->
@Svg.Spot.Wave
<!-- Liquid -->
{% spot "Wave" %}
<!-- JavaScript Helper -->
<svg data-spot="Wave"></svg>Arbitrary classes
Section titled Arbitrary classesSpot illustrations can be colored on the fly with support for arbitrary classes.
<!-- Razor -->
@Svg.Spot.Wave.With("fc-orange-400 float-right js-dropdown-target")
<!-- Liquid -->
{% spot "Wave", "fc-orange-400 float-right js-dropdown-target" %}
<!-- JavaScript Helper -->
<svg data-spot="Wave" class="fc-orange float-right js-dropdown-target"></svg>