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
[email protected] schrieb am Donnerstag, 13. Mai 2021 um 13:07:51 UTC+2:
> 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.
> On Wednesday, 12 May 2021 at 23:53:27 UTC-4 Mohammad wrote:
>
>> Use this example in tiddlywiki.com
>>
>> See the answer below, remove extra quotation marks!
>>
>> On Thu, May 13, 2021 at 7:05 AM Frédéric Demers <[email protected]>
>> wrote:
>>
>>> 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)
>>> <svg width="22pt" height="22pt" class="tc-image-button" viewBox="0 0 48
>>> 48" fill=$foreground$><rect width="48" height="48" fill=$foreground$
>>> fill-opacity="0.01"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20
>>> 24H44H20Z" fill=$foreground$/><path d="M20 24H44" stroke=$foreground$
>>> stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path
>>> fill-rule="evenodd" clip-rule="evenodd" d="M20 38H44H20Z"
>>> fill="none"/><path d="M20 38H44" stroke=$foreground$ stroke-width="4"
>>> stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd"
>>> clip-rule="evenodd" d="M20 10H44H20Z" fill="none"/><path d="M20 10H44"
>>> stroke=$foreground$ stroke-width="4" stroke-linecap="round"
>>> stroke-linejoin="round"/><rect x="4" y="34" width="8" height="8"
>>> fill="none" stroke=$foreground$ stroke-width="4"
>>> stroke-linejoin="round"/><rect x="4" y="20" width="8" height="8"
>>> fill="none" stroke=$foreground$ stroke-width="4"
>>> stroke-linejoin="round"/><rect x="4" y="6" width="8" height="8" fill="none"
>>> stroke=$foreground$ stroke-width="4" stroke-linejoin="round"/></svg>
>>> \end
>>>
>>> <$vars icon_color="#c8ced8">
>>> <$macrocall $name="drawIcon" foreground="<<icon_color>>" />
>>>
>>
>> <$macrocall $name="drawIcon" foreground=<<icon_color>> />
>>
>>
>>
>>> </$vars>
>>>
>>>
>>
>>
>>
>>
>>> *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 [email protected].
>>> To view this discussion on the web visit
>>> https://groups.google.com/d/msgid/tiddlywiki/dc54b674-9045-45ab-be25-c00359af0143n%40googlegroups.com
>>>
>>> <https://groups.google.com/d/msgid/tiddlywiki/dc54b674-9045-45ab-be25-c00359af0143n%40googlegroups.com?utm_medium=email&utm_source=footer>
>>> .
>>>
>>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/1137b58c-051a-41b8-b977-ccf145b18565n%40googlegroups.com.
