Using <<colour foreground>> inside SVG icon definition

Frédéric Demers

unread,

May 12, 2021, 10:35:55 PM5/12/21

to TiddlyWiki

Hello everyone,

probably an easy answer, but have been banging my head against this one for a while...

I imported an SVG icon (https://morosanuae.github.io/tw-icons/#$:/images/icon-park/edit/list-checkbox-outline) and am trying to simply change the stroke/fill colour to the generic <<colour foreground>> so it is most flexible when changing palette...

Here's what I have so far, only one value to change really, and haven't managed to make it work; whenever I replace the string with the macro, the icon vanishes; tried a second define and tried using an external $(var)$ inside the macro definition instead, and tried all types of quotes in three different places (main svg, around the variable and the macrocall parameter); alas no joy...

\define drawIcon(foreground)

\end

<$vars icon_color="#c8ced8">

<$macrocall $name="drawIcon" foreground="<<icon_color>>" />

</$vars>

thanks in advance!!!

Mohammad Rahmani

unread,

May 12, 2021, 11:53:27 PM5/12/21

to tiddl...@googlegroups.com

Use this example in tiddlywiki.com

See the answer below, remove extra quotation marks!

thanks in advance!!!

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/dc54b674-9045-45ab-be25-c00359af0143n%40googlegroups.com.

Frédéric Demers

unread,

May 13, 2021, 7:07:51 AM5/13/21

to TiddlyWiki

Hi Mohammad, not quite what I am after. I'll try to express myself better below.

The code I have in my original post works (just as well as the changes you proposed), but it uses a fixed value represented by the "#c8ced8" string => I'd like to change this hard coded value to <<colour foreground>>.

Trying to substitute it using:

<$vars icon_color="<<colour foreground>>">

<$macrocall $name="drawIcon" foreground="<<icon_color>>" />

</$vars>

nor

<$vars icon_color="<<colour foreground>>">

<$macrocall $name="drawIcon" foreground=<<icon_color>> />

</$vars>

nor

<$vars icon_color=<<colour foreground>>>

<$macrocall $name="drawIcon" foreground="<<icon_color>>" />

</$vars>

nor the simpler:

<$macrocall $name="drawIcon" foreground="<<colour foreground>>" />

nor:

<$macrocall $name="drawIcon" foreground=<<colour foreground>> />

does not seem to work. The <<colour ...>> macro by itself works well (outside of the SVG), but I am missing something to tie it all together. I tried a few things with single quotes and triple quotes to no avail. I tried the SVG tag directly in the tiddler text (not in a \define pragma), and tried to use \define mycolor() <<colour foreground>> instead and tried changing the tidder type; still, I am short of finding something that works well.

Thomas Elmiger

unread,

May 13, 2021, 8:04:17 AM5/13/21

to TiddlyWiki

Hi,

Not sure if this helps, but in some situations there is a better solution to give an icon the same colour as the surrounding text – which might be the case if you use the TW foreground colour. In your SVG you can use

fill="currentColor"

Simple as that.

Another good way could be to give your SVG or a path in it a class. I do that for the secondary colour I use in my SVG icons:

class="icon-accent"

Of course you will have to define colours in your stylesheet then:

.icon-accent {
fill: <<colour download-background>>;
stroke: <<colour download-background>>;
}

Examples can be found here: https://tid.li/tw5/apps/svg.html

Good luck!

Thomas

Mohammad Rahmani

unread,

May 13, 2021, 12:19:35 PM5/13/21

to tiddl...@googlegroups.com

On Thu, May 13, 2021 at 3:37 PM Frédéric Demers <fred....@gmail.com> wrote:

Hi Mohammad, not quite what I am after. I'll try to express myself better below.

The code I have in my original post works (just as well as the changes you proposed), but it uses a fixed value represented by the "#c8ced8" string => I'd like to change this hard coded value to <<colour foreground>>.

Trying to substitute it using:

<$vars icon_color="<<colour foreground>>">
<$macrocall $name="drawIcon" foreground="<<icon_color>>" />
</$vars>

Okay use this

<$wikify name=icon_color text=<<color foreground>> >

<$macrocall $name="drawIcon" foreground="<<icon_color>>" />

</$wikify>

NOTE that the $vars does not render the macro and just pass it!

Mohammad Rahmani

unread,

May 13, 2021, 12:21:32 PM5/13/21

to tiddl...@googlegroups.com

On Thu, May 13, 2021 at 4:34 PM Thomas Elmiger <thomas....@gmail.com> wrote:

Hi,

Not sure if this helps, but in some situations there is a better solution to give an icon the same colour as the surrounding text – which might be the case if you use the TW foreground colour. In your SVG you can use

fill="currentColor"

Simple as that.

Another good way could be to give your SVG or a path in it a class. I do that for the secondary colour I use in my SVG icons:

class="icon-accent"

Of course you will have to define colours in your stylesheet then:

.icon-accent {
fill: <<colour download-background>>;
stroke: <<colour download-background>>;
}

This is a semantic solution! I use this one!

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1137b58c-051a-41b8-b977-ccf145b18565n%40googlegroups.com.

Jeremy Ruston

unread,

May 13, 2021, 12:34:09 PM5/13/21

to tiddl...@googlegroups.com

Hi Fred

The easiest way to accomplish what you require is simply to edit the SVG image to remove the fill="xx" attributes entirely; the default fill colour will then be inherited, or can be set via CSS.

If you are interested in templating SVG images, there's an example I did here to make the text within an SVG image be translateable:

https://manuals.annafreud.org/ambit/#%24%3A%2F_AMBITWheel%2FTemplate:Home%20%24%3A%2F_AMBITWheel%2FEnglish%20%24%3A%2F_AMBITWheel%2FStyles%20%24%3A%2F_AMBITWheel%2FMacros%20%24%3A%2F_AMBITWheel%2FTemplate

If the link doesn't work, the tiddlers I'm pointing to are:

* Home

* $:/_AMBITWheel/English

* $:/_AMBITWheel/Styles

* $:/_AMBITWheel/Macros

* $:/_AMBITWheel/Template

Best wishes

Jeremy.

--

Jeremy Ruston

jer...@jermolene.com

https://jermolene.com

On 13 May 2021, at 03:36, Frédéric Demers <fred....@gmail.com> wrote:

Hello everyone,

--

Frédéric Demers

unread,

May 13, 2021, 12:40:47 PM5/13/21

to tiddl...@googlegroups.com

Brilliant! At least one of the solutions above works, I'll play around with the other solutions as well.

Thanks everyone!

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/TmnlaZvhjOI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/DAC37552-EE64-40C9-A221-B5E78A5A7643%40gmail.com.

Reply all

Reply to author

Forward