Parameterise core icons

[Jermolene]

This PR updates the core icons so that the size can be specified as a parameter. The icon "$:/core/images/new-journal-button" is given an additional parameter to allow the day number that is drawn on the calendar to be specified.

See the docs for details.

Note that this change is not fully backwards compatible. For example, it breaks the documented technique for including core icons in a splash screen. Previously, the demonstration splash screen included this line:

{{$:/core/icon||$:/core/templates/plain-text-tiddler}}

With the changes in this PR, that caused the \parameters... line at the top of the icon to be rendered as plain text.

The problem is fixed by using a small procedure:

<<show-icon "$:/core/icon">>

The procedure definition looks like this:

\procedure show-icon(title)
<$wikify name="icon" text={{{ [<title>addprefix[{{]addsuffix[}}]] }}} output="html">
<$text text=<<icon>>/>
</$wikify>
\end

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
tiddlywiki5	✅ Ready (Inspect)	Visit Preview	Apr 23, 2023 0:18am

[pmario]

There is one severe problem now. The tiddlers can not be edited with an SVG program anymore. So the maintenance cost will be increased.

We may need an "Export TW-SVG as SVG", which does a "wikification" prior to an export. ... The other way around IMO is a problem now too.

I don't have a good idea atm.

[yaisog]

The tiddlers can not be edited with an SVG program anymore.

That is a valid point, but one could argue that the core icons are not meant to be edited. When they serve as a starting point for customization, the copy would have to be manually "cleaned up" once before editing.
Personally, I think that the benefit of parameterization would outweigh the drawback of harder editability. But this is purely from a hypothetical perspective, as I have not used them yet.

[Jermolene]

There is one severe problem now. The tiddlers can not be edited with an SVG program anymore. So the maintenance cost will be increased.

We may need an "Export TW-SVG as SVG", which does a "wikification" prior to an export. ... The other way around IMO is a problem now too.

I think you're right that it is sometimes useful to be able to open the core icons in a vector editor. For example, can serve as the starting point for developers making new icons that need to be harmonious with the core icons.

We could extend the "Icon Gallery" tiddler on tiddlywiki.com to give it an option to export images as raw SVG (which it would do via wikify).

I've added this PR to #7345 which I hope to merge over the next few days.

[oeyoews]

I used to always like to use $tw.wiki.getTiddlerText("$:/core/icon") in js to get the content of the icon, but after this parameterized pr is merged, I need to manually copy the content of pure svg to inside javascript file

[Jermolene]

I used to always like to use $tw.wiki.getTiddlerText("$:/core/icon") in js to get the content of the icon, but after this parameterized pr is merged, I need to manually copy the content of pure svg to inside javascript file

Thanks @oeyoews. It's worth noting that that technique has never been 100% reliable. The image $:/core/images/new-journal-button has always used wikitext to render the date, meaning that the file content is not valid SVG.

The workaround that would work with all the core images is to wikify the image tiddler before use. For example:

var widget = $tw.wiki.makeTranscludeWidget(TIDDLER_TITLE,{document: $tw.fakeDocument, parseAsInline: true});
var container = $tw.fakeDocument.createElement("div");
widget.render(container,null);
return container.textContent;

Is that practical in your application?

[oeyoews]

I tested it in the control of the browser.

var widget = $tw.wiki.makeTranscludeWidget('$:/core/icon',{document: $tw.fakeDocument, parseAsInline: true});
var container = $tw.fakeDocument.createElement("div");
widget. render(container, null);
console.log(container.textContent);

But I seem to get a null value, I'm not very familiar with makeTranscludeWidget, need to look again

[Jermolene]

Hi @oeyoews apologies, it should be container.firstChild.innerHTML:

var widget = $tw.wiki.makeTranscludeWidget('$:/core/icon',{document: $tw.fakeDocument, parseAsInline: true});
var container = $tw.fakeDocument.createElement("div");
widget.render(container, null);
console.log(container.firstChild.innerHTML);