Icons
Last updated
Last updated
We are Realmac Software. We make nice things.
At a bare minimum you'll want to include PDF images for light mode icons so they can be used for all views where your Component appears within the RapidWeaver Elements UI.
Important: The PDF graphic for your icon should have a transparent background so it can be composited in app on to the background tile to give a consistent look.
All Elements require an icon.pdf file for light mode. If the dark-mode.pdf file isn't provided, icon.pdf will be used in Dark Mode.
icon.pdf (Required), 1:1 ratio, e.g. 128x128 (Square)
icon-dark.pdf (optional), 1:1 ratio, e.g. 128x128 (Square)
The Palette image should be named paletteIcon.pdf and paletteIcon-dark.pdf for Dark Mode. If the paletteIcon-dark.pdf file isn't provided, paletteIcon.pdf will be used in Dark Mode.
paletteIcon.pdf (Required), 1:2 ratio, e.g. 128x256 (landscape)
paletteIcon-dark.pdf (optional), 1:2 ratio, e.g. 128x256 (landscape)
Your pdf icons should be on a transaparent background.
We've provided an example Sketch document below you can use to get started.
All Icon files should be placed at the root of the Component alongside the info.json file.
⚠️ While this feature works, please do not use it as it may be removed in a future build.
We also offer experimental support for banner style icons, these are great for layout style components. However, this style of icon may not be supported when Elements ships, please use with caution and ensure you also include the standard style of icon.
bannerLayer1.png
bannerLayer1-Dark.png (optional)
Banner icons can be layered, and each layer can represent a different colour in the Theme Studio. For example this icon uses four layers and three of those layers will be tinted with the Theme colour.
bannerLayer1.png
bannerLayer2-primary-500.png
bannerLayer3-primary-200.png
bannerLayer4-secondary-500.png
Banner images should be 512px in width, but can be as short or tall as you need.
Banner icons will appear the same in both grid and list.
