On Thu, May 13, 2021 at 4:34 PM Thomas Elmiger <[email protected]>
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!
> 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
> <https://groups.google.com/d/msgid/tiddlywiki/1137b58c-051a-41b8-b977-ccf145b18565n%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/CAAV1gMCTLUGnvqssxBiOFG8Sg33b-r9t-BTz0W0ie1fz8dNatw%40mail.gmail.com.
