Parameterise core icons (#7413)

* Parameterise all the icons

* Improve splash screen macro for rendering icons

* Add new example from @kookma

editions/tw5.com/tiddlers/demonstrations/ImageGallery Example.tid

@@ -1,6 +1,5 @@
 created: 20140809113603449
 modified: 20211022195248529
-tags: Learning
 title: ImageGallery Example
 type: text/vnd.tiddlywiki
 

editions/tw5.com/tiddlers/features/Core Icons.tid

@@ -0,0 +1,41 @@
+title: Core Icons
+tags: Features
+modified: 20230423103154329
+created: 20230423103154329
+
+
+!! 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:
+
+<<wikitext-example-without-html """{{$:/core/images/new-image-button}}
+""">>
+
+The core icons are parameterised. The first parameter `size` specified the size at which the icon should be rendered:
+
+<<wikitext-example-without-html """{{$:/core/images/picture|64px}}
+<$transclude $tiddler="$:/core/images/picture" size="32px"/>
+""">>
+
+Here is an example of dynamically resizing icons:
+
+<<wikitext-example-without-html """<$list filter="[range[24,56,8]]" variable=iconSize>
+<$text text={{{ [<iconSize>addsuffix[px]] }}} />
+<$transclude $tiddler="$:/core/icon" size=<<iconSize>>/>
+</$list>
+""">>
+
+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
+
+<<wikitext-example-without-html """{{$:/core/images/new-journal-button|48px|17}}
+<$transclude $tiddler="$:/core/images/new-journal-button" day="17"/>
+""">>
+
+The core icons are implemented as embedded [[SVG elements|Using SVG]], 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:
+
+<<wikitext-example-without-html """<span style="fill: red;">{{$:/core/images/opacity}}</span>
+""">>

editions/tw5.com/tiddlers/images/Icon Gallery.tid

@@ -1,6 +1,6 @@
 created: 20211013132515594
 modified: 20211018102307833
-tags: Learning
+tags: Learning [[Core Icons]]
 title: Icon Gallery
 type: text/vnd.tiddlywiki
 

editions/tw5.com/tiddlers/images/Reddit Logo.tid

@@ -1,6 +1,7 @@
 title: Reddit Logo
 
-<svg width="22pt" height="22pt" viewBox="0 0 20 20">
+\parameters (size:"22pt")
+<svg width=<<size>> height=<<size>> viewBox="0 0 20 20">
 	<g>
 		<path d="M16.67,10C16.641,9.22 15.992,8.593 15.211,8.593C14.834,8.593 14.472,8.739 14.2,9C13.063,8.227 11.725,7.799 10.35,7.77L11,4.65L13.14,5.1C13.194,5.605 13.626,5.993 14.134,5.993C14.683,5.993 15.134,5.542 15.134,4.993C15.134,4.444 14.683,3.993 14.134,3.993C13.779,3.993 13.449,4.183 13.27,4.49L10.82,4C10.798,3.995 10.776,3.993 10.754,3.993C10.607,3.993 10.48,4.097 10.45,4.24L9.71,7.71C8.318,7.731 6.962,8.159 5.81,8.94C5.539,8.685 5.181,8.543 4.81,8.543C4.009,8.543 3.35,9.202 3.35,10.003C3.35,10.573 3.683,11.092 4.2,11.33C4.189,11.476 4.189,11.624 4.2,11.77C4.2,14.01 6.81,15.83 10.03,15.83C13.25,15.83 15.86,14.01 15.86,11.77C15.871,11.624 15.871,11.476 15.86,11.33C16.363,11.08 16.679,10.561 16.67,10ZM12.3,12.04C11.751,12.04 11.3,11.589 11.3,11.04C11.3,10.491 11.751,10.04 12.3,10.04C12.849,10.04 13.3,10.491 13.3,11.04C13.301,11.053 13.301,11.067 13.301,11.08C13.301,11.629 12.849,12.08 12.301,12.08C12.297,12.08 12.294,12.08 12.29,12.08L12.3,12.04ZM12.48,13.75C11.771,14.285 10.897,14.557 10.01,14.52C9.123,14.557 8.249,14.285 7.54,13.75C7.5,13.702 7.479,13.641 7.479,13.579C7.479,13.431 7.601,13.309 7.749,13.309C7.811,13.309 7.872,13.33 7.92,13.37C8.521,13.811 9.255,14.033 10,14C10.746,14.041 11.483,13.825 12.09,13.39C12.142,13.339 12.212,13.311 12.285,13.311C12.438,13.311 12.564,13.437 12.564,13.59C12.564,13.665 12.534,13.737 12.48,13.79L12.48,13.75ZM6.67,11C6.67,10.451 7.121,10 7.67,10C8.219,10 8.67,10.451 8.67,11C8.67,11.549 8.219,12 7.67,12C7.121,12 6.67,11.549 6.67,11Z"/>
 	</g>

editions/tw5.com/tiddlers/system/$__SplashScreen.tid

@@ -5,6 +5,13 @@ title: $:/SplashScreen
 type: text/vnd.tiddlywiki
 
 \import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
+
+\procedure show-icon(title)
+<$wikify name="icon" text={{{ [<title>addprefix[{{]addsuffix[}}]] }}} output="html">
+<$text text=<<icon>>/>
+</$wikify>
+\end
+
 \rules only filteredtranscludeinline transcludeinline macrocallinline
 <div class="tc-remove-when-wiki-loaded">
 <style scoped>
@@ -116,7 +123,7 @@ Please wait while {{$:/SiteTitle}} is loading
 
 <!-- Demonstrating how to embed a wikitext SVG graphic --> 
 <div class="tc-splash-text">
-{{$:/core/icon||$:/core/templates/plain-text-tiddler}}
+<<show-icon "$:/core/icon">>
 </div>
 
 </div>