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:me@where.net]]
* [[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">>