Icon
The icon can be provided in different ways to help you fine-tune its appearance.
1
type Icon =
2
| string
3
| {
4
light: string;
5
dark: string;
6
}
7
| {
8
monochrome: string;
9
};
Copied!
Slapdash supports loading icons over http:// , https://, using Data URLs or providing the raw icon content inline.
1
// Emoji can be provided inline. All Unicode Emoticons are supported.
2
icon: "πŸ§›β€β™‚οΈ"
3
​
4
// Icons accessible over HTTP/HTTPS can be provided as an absolute URL.
5
icon: "https://slapdash.com/favicon.ico"
6
​
7
// SVGs can be provided inline.
8
icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" stroke="#000" stroke-width="2" ><circle cx="12" cy="12" r="10"/></svg>'
9
​
10
// Icons can be encoded as Data URLs and provided inline. The following
11
// formats are supported: image/png, image/jpeg, image/gif, image/svg+xml.
12
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKBJREFUeNpiYBjpgBFd4P///wJAaj0QO9DEQiAg5ID9tLIcmwMYsDgABhqoaTHMUHRxpsGYBv5TGqTIZsDkYWLo6gc8BEYdMOqAUQeMOoAqDgAWcgZAfB9EU63SIAGALH8PZb+H8v+jVz64KiOK6wIg+ADEArj4hOoCajiAqMpqtDIadcCoA0YdQIoDDtCqQ4KtBY3NAYG0csQowAYAAgwAgSqbls5coPEAAAAASUVORK5CYII="
Copied!

Customize

By default, Slapdash will display icons "as is" but you can choose to render different icons depending on the selected theme:
1
icon: {
2
light: "🌞",
3
dark: "πŸŒ”"
4
}
Copied!
Or, you can tell Slapdash to automatically adjust the icon color based on the current theme:
1
icon: {
2
monochrome: "https://example.com/icon.svg"
3
}
Copied!
In this case, Slapdash will replace all non-transparent pixels of the icon with the appropriate color from the selected theme.
Last modified 1mo ago
Copy link
Contents
Customize