Warhol

Theme.Icons

By configuring theme icons you enable Warhol to check the use of icons in your production page - with one important caveat: at the moment this feature only works as a whitelist for icon fonts! Icons created with icon fonts probably clash with your pattern library's typography rules. Font icons are, in a sense, typography, but can probably appear in sizes and styles that all other typography cannot. And once you configure your icon font, Warhol understands this and will not subject your icons to typography checks.

In the future this feature will expand to offer more than just a whitelist for icon fonts.

Example configuration

Full example:

{
  "patternLibUrl": "https://warhol.io/components",
  "breakpoints": [800, 1000],
  "theme": {
    "icons": {
      "iconsUrl": "https://warhol.io/components/icons",
      "sources": ".icon",
      "type": "font"
    }
  }
}

Minimal example:

{
  "patternLibUrl": "https://warhol.io/components",
  "breakpoints": [800, 1000],
  "theme": {
    "icons": {
      "sources": ".icon"
    }
  }
}

Field theme.icons.sources (string, required, non-empty)

Selector for elements that contain icon examples. When theme.icons.type is font, Warhol will read the font-family from the icon examples and add them to the typography whitelist. This information is only read from the source elements themselves, not from their children!

Field theme.icons.iconsUrl (optional, string, defaults to the theme URL or the pattern lib URL))

If your icon examples live on a specific URL in your pattern library, you can specify this here. If you omit theme.icons.iconsUrl or set it to null, theme.themeUrl will be used instead. If theme.themeUrl is not defined, the top-level patternLibUrl will be used. If you set none of the URL fields to a valid URL, you will get an error.

Field theme.icons.type ("font", optional, defaults to "font")

Defines if icons are created using an icon font or in some other way (no other way is supported at this moment, so the string "font" is the only valid option).