Add color/fill to core icon

[TW Tones]

Folks,

For some reason I always forget how to add color to an icon used in a button? It is just not intuitive!

• I do not want to modify the SVG icon
• I understand you can use CSS to provide the fill parameter.
• I want to color an icon inside a the $button widget. In this case inline rather than block

Question

• Can anyone share one or more methods by which to achieve this?

I will share back a macro to display the current tiddlers icon in the icon field with the color in the color field.

Thanks in advance

Tones

[TW Tones]

Folks,

• I just noticed (by mistake) if a button tiddler, rather than an icon tiddler, is provided to a button as the icon eg "$:/core/ui/Buttons/new-here" rather than say "$:/core/images/new-here-button" the icon is still displayed and the "$:/core/ui/Buttons/new-here" activated on click.
  • This could have interesting possibilities.

Tones

[TW Tones]

Folks;

In new google groups I cannot see how top edit the original post, nor set code highlighting.

I have solved this Original Thread (OT)  issue for now, but would still appreciate any other ideas;

Basically I use wikify to construct the whole value for the style attribute.

<$wikify name=style text="""fill: {{!!color}};""">

<$button tooltip=<<tooltip>> class="tc-btn-invisible">

<span style=<<style>> ><$transclude tiddler=<<icon>>/></span>

</$button>

</$wikify>

I have added this as a note below my public reference ❷ Widget and HTML attributes or parameters

Going forward

• I continue to work on a macro to display icon here for the current tiddler (with color and other attributes)
• I am now looking how to improve the color field and add another icon-background with similar properties
• I also want to enable color values to be pasted, viewed and copied.

Regards

Tones

On Monday, 16 November 2020 at 12:04:12 UTC+11 TW Tones wrote:

[David Gifford]

For once I can answer a post of yours! At least it is one way to do it

Apply a span class in or around the button, and then use this in the CSS:

html body.tc-body .MYSPANCLASS .tc-image-open-window {stroke: white;fill:#43f;}

Dave

[Eric Shulman]

On Sunday, November 15, 2020 at 6:08:11 PM UTC-8 TW Tones wrote:

In new google groups I cannot see how top edit the original post, nor set code highlighting.

Both editing a post and using code highlighting have been dropped from the new interface.

-e

[Mohammad]

Tones

Read tutorial in TW-Scripts:

https://kookma.github.io/TW-Scripts/#Working%20with%20SVG

Best wishes

Mohammad

[TW Tones]

Thanks Eric, I suppose I was complaining :( its a terrible "upgrade", but I suspect its a downgrade in server processing requirements.

Tones

[TW Tones]

Folks,

I still don't seem to have a simple and robust way to apply a color to an existing core svg icon. 

In a recent case the fill style applied to an icon is correct, in the tiddler in which it is contained, but not in the View and Edit toolbars eg with $:/tags/ViewToolbar. I presume that the color there is reset by the toolbar classes?

My current use case is a button with a load of features which I want 4 different colors according to a status. It seems crazy to define 4 classes, or clone the button image 4 times and edit them. Something in the way we color svg's is somewhat fragile and I wonder if there is a fix or a nice piece of documentation that could help?

Tones

On Monday, 16 November 2020 at 12:04:12 UTC+11 TW Tones wrote: