Introduction
TiddlyWiki includes over 100 custom vector icons. They feature in the user interface and are also available for authors to use in their own applications. See Icon Gallery for a complete listing.
Usage
The core icons are used by transcluding them. For example:
{{$:/core/images/new-image-button}}
That renders as:
The core icons are parameterised. The first parameter size specified the size at which the icon should be rendered:
{{$:/core/images/picture|64px}}
<$transclude $tiddler="$:/core/images/picture" size="32px"/>
That renders as:
Here is an example of dynamically resizing icons:
<$list filter="[range[24,56,8]]" variable=iconSize>
<$text text={{{ [<iconSize>addsuffix[px]] }}} />
<$transclude $tiddler="$:/core/icon" size=<<iconSize>>/>
</$list>
That renders as:
24px 32px 40px 48px 56px
Some icons take further parameters to customise how they are rendered. For example, the $:/core/images/new-journal-button icon takes an additional parameter day that specifies the day of the month that should be shown on the calendar. It defaults to the current date if not specified
{{$:/core/images/new-journal-button|48px|17}}
<$transclude $tiddler="$:/core/images/new-journal-button" day="17"/>
That renders as:
The core icons are implemented as embedded SVG elements, and not as full-blown SVG images. This means that they can be styled using CSS. For example, the CSS property fill can be used to change the colour of the icons. For example:
<span style="fill: red;">{{$:/core/images/opacity}}</span>
That renders as: