Add another example to the wikify widget : use core svg to show an ic…

…on next to links (#8806)

* Add another example to the wikify widget : use core svg to show an icon next to links

* improve wikitext

* fix css

* limit example to svg core tiddlers

* fix typo + use <<.wid wikify>> when mentioning the wikify widget

* simplify a bit more the procedure that add  a namespace to the svg

editions/tw5.com/tiddlers/TestCases_WikifyWidget_RenderSVGURI.tid

@@ -0,0 +1,48 @@
+created: 20241206225533517
+description: Rendering parameterised SVG for use in stylesheets
+tags: $:/tags/wiki-test-spec
+title: TestCases/WikifyWidget/RenderSVGURI
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+The core svg icons use a parameter widget, making their use in stylesheets impossible without wikify.
++
+title: Output
+
+* https://tiddlywiki.com/
+* [[TW5|http://tiddlywiki.com/]]
+* [[Mail me|mailto:[email protected]]]
+* [[Open file|file:///c:/users/me/index.html]]
+
+<style>{{Stylesheet}}</style>
++
+title: Stylesheet
+
+\rules except dash
+\procedure link-icon(protocol,img)
+<$tiddler tiddler=<<img>> >
+  <$wikify name="svg" text={{!!text}} mode="inline" output="html">
+    <$text text=`
+      [href*="$(protocol)$"]{
+        --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg">$(svg)$</svg>');
+      }
+    `/>
+  </$wikify>
+</$tiddler>
+\end
+
+.tc-tiddlylink-external:after{
+  width:.7rem;
+  aspect-ratio:1;
+  background:currentColor;
+  display: inline-block;
+  mask: center / contain no-repeat var(--mask);
+  margin-inline:.5ch;
+  content:"";
+}
+
+<<link-icon "http:" "$:/core/images/open-window">>
+<<link-icon "https:" "$:/core/images/locked-padlock">>
+<<link-icon "mailto:" "$:/core/images/mail">>
+<<link-icon "file:" "$:/core/images/file">>

editions/tw5.com/tiddlers/widgets/WikifyWidget.tid

@@ -1,17 +1,17 @@
 caption: wikify
 created: 20160321144949700
-modified: 20241202014354100
+modified: 20241206233352509
 tags: Widgets
 title: WikifyWidget
 type: text/vnd.tiddlywiki
 
 ! Introduction
 
-The <<.wid wikify>> widget parses and renders a string of text and assigns the result to a specified [[variable|Variables]]. The new value of the variable is available to the content within the wikify widget.
+The <<.wid wikify>> widget parses and renders a string of text and assigns the result to a specified [[variable|Variables]]. The new value of the variable is available to the content within the <<.wid wikify>> widget.
 
 ! Content and Attributes
 
-The content of the `<$wikify>` widget is the scope for the value assigned to the variable.
+The content of the <<.wid wikify>> widget is the scope for the value assigned to the variable.
 
 |!Attribute |!Description |
 |name |The name of the variable to assign |
@@ -44,3 +44,7 @@ The available output types are:
 !! Exporting rendered html
 
 <<testcase "TestCases/WikifyWidget/RenderHTML">>
+
+!! Rendering parameterised SVG for use in stylesheets
+
+<<testcase "TestCases/WikifyWidget/RenderSVGURI">>