Resize Core Icon

[stefan_from_germany]

Hi experts,

i found here https://tiddlywiki.com/#Core%20Icons the documentation how to implement the core icons and how to use the parameters.

I want to use the icons somewhere in the text to describe the users how to use the buttons.

If I use
{{$:/core/images/add-comment}}

the icon is shown full size.

If I try this as described in tiddlywiki.com
{{$:/core/images/add-comment|32px}}

only the text {{$:/core/images/add-comment|32px}} appear

The same situation is I use other parameters like

{{$:/core/images/new-journal-button|48px|17}}

If I use the complete code, copied from tiddlywiki

{{$:/core/images/new-journal-button|48px|17}}
<$transclude $tiddler="$:/core/images/new-journal-button" day="17"/>

The error message Recursive transclusion error in transclude widget appear.

What I do wrong?

[vilc]

@stefan_from_germany are you doing this on TW v5.3.0? The parameterized transclusions and icon parameters were introduced in v5.3.0. On versions below, the code {{$:/core/images/add-comment|32px}} won’t work, and display the raw text instead.

There are ways of easily resizing the icon on older versions, if that is what you need.

[stefan_from_germany]

Hi @vilc ,

I am using 5.26

Stefan

[vilc]

The parametrized transclusion {{$:/core/images/add-comment|32px}} will not work in this case. If you don’t want to update to the v5.3.0, there are some workarounds to resize the icons, see these posts:

A little change for resizable core images SVG

There is no need to change something in the core. SVGs are perfectly styleable with CSS. create a tiddler named: icon-template and add this: <style> .my-icon svg { width: auto; height: 4em; } </style> <span class="my-icon"><$transclude /></span> Call your icons with eg: {{$:/core/icon||icon-template}} And you are good. See the attached file: show-icon-with-template.json (364 Bytes) It will also be possible to move the <style> section into a new tiddler tagged: $:/tags/Stylesheet to cre…

Changing the size of built-in icons

Here are a few ways to “make it (a built-in icon) the same size as surrounding text.” Place the icon transclusion within a $button widget: <$button class="tc-btn-invisible">{{$:/core/images/link}}</$button> Define a “resize” CSS classname by putting the following into a tiddler tagged with $:/tags/Stylesheet: .resize svg { height:1em; width:1em; } which you can then use like this: <span class="resize">{{$:/core/images/link}}</span> or this: @@.resize {{$:/core/images/link}}@@ or thi…

Feel free to ask if you have further questions.

[stefan_from_germany]

@vilc

THANK YOU for your help.

[twMat]

You may want to wait for this first:

A new set of icons for Tiddlywiki

Thank you @Thomas_Chuffart. The Feathericons are very good. I like the way that they can be used at different line widths. The technical approach with which they are drawn is also much more concise and flexible. Therefore, I have make a GitHub ticket proposing that TiddlyWiki 5 adopt the Feather icon set for the core.

[TW_Tones]

When giving a size too icons try 1em or using rem then they are scalable.