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).