Need help with making SVG icons use the colors from the palette?

, , ,
#1

So, with the ongoing discussion about checklists, I decided I would try to combine the plaintext-checklist stylesheet Telumire created, and the SVG icon todo items by PMario and some SVG icons from TW Icons into a 2.0 plaintext-checklist, but I’m having issues with the SVGs and how they are choosing the line colors.

For instance, in order to get the stylesheet to work, I have to have each svg use a content-type of image/svg+xml which then requires the inclusion of xmlns="http://www.w3.org/2000/svg", but in order to try and get the line color to change depending on the palette that is currently being used, I tried to add <g fill-rule="evenodd"> which breaks the SVG unless I add fill="currentColor" SO.

Would someone who knows a bit more about SVGs than I do be able to help me figure out why I’m unable to get the fill color for the lines making up the SVGs to be whatever the font-color is of the current palette like the other core icons do :sweat_smile: I’m struggling…

I’ve attached an export of tiddlers I’ve put together to show what I’m talking about, you should be able to just import them into an empty edition of TiddlyWiki.

tiddlers.json (3.3 KB)

1 Like
#2

currentColor is SVG specific. It is not a TW variable.

Within SVGs you can not use the colour macro. But there have been some discussions where

Eric Shulman posted functions, similar to those below. So you can create a new tiddler and tag it $:/tags/Global so you should be able to use colour palette values.

title: get-colour-functions
tags: $:/tags/Global
code-body: yes

\define colorRegexp() <<(get)?[cC]olou?r .*>>

\function f.getColor(c) [{$:/palette}getindex<c>] ~[[$:/palettes/Vanilla]getindex<c>] ~[[$:/config/DefaultColourMappings/]addsuffix<c>get[text]] :map[function[recolor],<currentTiddler>]

\function f.getColour(c) [function[getColor],<c>]

\function recolor(c) [<c>regexp<colorRegexp>] :then[<c>split[ ]last[]trim[']trim["]trim[>>]] :map[function[getColor],<currentTiddler>] :else[<c>]

In your SVG you can do the following. The icon SVGs have a strange viewBox. So I did change that one too. The code below should work. It did for me.

title: $:/themes/telumire/images/boxicons/regular/checkbox-square.svg

\parameters (size:"24")
<svg width=<<size>> height=<<size>> class="tc-image-bxi-bx-checkbox-square tc-image-button" viewBox="0 0 24 24">
<g fill-rule="evenodd"  >
<path d="M9 9H15V15H9z" fill=<<f.getColor "alert-highlight">>/>
<path fill=<<f.getColor "primary">>
d="M19,17V7c0-1.103-0.897-2-2-2H7C5.897,5,5,5.897,5,7v10c0,1.103,0.897,2,2,2h10C18.103,19,19,18.103,19,17z M7,7h10 l0.002,10H7V7z"/>
</g>
</svg>
3 Likes
#3

currentColor is a valid CSS color value. In TW usage, it should be equivalent to <<colour foreground>>.

Thus, you can use fill:currentColor; in any CSS (inline or CSS rules in stylesheets), instead of fill:<<colour foreground>>, which does not work in inline CSS (since style="…" parameters are not wikified).

-e

2 Likes
#4

Wow, that seems advanced. And yes, I had adjusted the viewBox to align with the text, might be showing my novice-ness admitting that :sweat_smile:

unfortunantely, using the provided code does break the SVG.

{E0A5DDE6-05EB-4DB3-A9D1-AA39ACCBFC5A}
{E0A5DDE6-05EB-4DB3-A9D1-AA39ACCBFC5A}873×307 15.6 KB

$__themes_telumire_images_boxicons_regular_checkbox.svg.json (664 Bytes)

Oh, that’s good to know, I’ve actually run into some situations where I could have used currentColor!

1 Like
#5

Remove the type-field and it should work.

image
image1464×846 56.3 KB

#6

it does, though doing so makes the stylesheet not work, even when replacing {{$$title!!type}} with image/svg+xml. (well it /works/ but it has the same issue regarding the icon color only being whqtever the fill is set to…)

Is there a way to not need the type when using the makedatauri macro?