FontAwesome icon with incorrect color

Developing Nodes
1

Hi folks,

This question is related to our new node-red-contrib-ui-svg node. We got some good news from Joseph Liard that has released a new version of DrawSvg, which now supports FontAwesome icons (which he has especially added for our node). :champagne:

But I cannot get the colors of the FontAwesome icon correct in the Node-RED dashboard.
This is what happens:

  1. I add a FontAwesome icon in DrawSvg:

    image

  2. I change the default color via DrawSvg to some ugly pink color:

    image

  3. I save the drawing, and we receive following SVG string in our node:

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0" y="0" viewBox="0 0 900 710" width="100%" height="100%">
    <rect id="svgEditorBackground" x="0" y="0" width="900" height="710" style="fill: none; stroke: none;"/>
    <defs id="svgEditorDefs">
        <symbol xmlns="http://www.w3.org/2000/svg" id="f03d" preserveAspectRatio="xMidYMid meet" viewBox="0 0 576 512">
            <path d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"/>
         </symbol>
        <polygon id="svgEditorIconDefs" style="fill:rosybrown;"/>
     </defs>
     <image width="889" height="704" id="background" xlink:href="https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg"/>
     <use xlink:href="#f03d" x="135.9755859375001" y="33.62033462524364" width="65.41089965398012" height="58.143021914649" id="e1_icon" style="fill:deeppink;"/>
</svg>

    It seems ok to me since it contains style="fill:deeppink;" ...

  4. But when I Deploy those changes, the Node-RED will show a blue icon (instead of pink):

    image

  5. When I inspect the 'Styles' of the icon in Chrome developer tools, I see pink as color:

    image

I have no clue anymore how to get the color correct. Is that blue color perhaps inherited somehow from the dashboard css?

Thanks !!
Bart

2

Yes it probably is. On the site page you can turn off theme in template which should then allow it..

3

Morning @dceejay,
Do you mean that I can somehow say in the html code (which I generate in my UI node for the dashboard): this DIV element and all its children (SVG element ...) should not inherit any CSS from the dashboard?

4

Did you try the "!important" directive? Like: style="fill:deeppink !important;", normally it should prevent the inheritance problem you're having.

5

Hey @hugobox,

Thanks !! I have been reading some articles this evening, and then it became clear that I cannot stop inheritance of styles. And yes the "!important" directive popped up in some of these articles, but they claim you should only use it as a last resort. For example:

In most cases, using an !important flag is like cracking a nut with a sledgehammer. The !important flag it is a bad practice because it makes things unnecessarily difficult to override in the future, and should only be reserved as a last resort.

  • But could at least test whether it solved my problem. So I added the "!important" directive (to the generated SVG), but the damn icon still stays blue :woozy_face:
  • Have pasted the (generated) SVG code in a jsfiddle and then it nicely gets a pink color. So it only gets the wrong color inside the dashboard.

Hey @dceejay,
Do you mean in a dashboard template node? Could you please explain a bit in detail what you mean? Thanks!

6

sorry - been busy .... :beers: :slight_smile:
I meant this option

image
image.jpg624Ă—716 84.6 KB

Not the 100% answer - but a good test.
likewise you should be able to see the precedence of css in the browser debug console styles... you either could use !important... (last resort :slight_smile: - or make your css more targeted than the one that turns it blue... so maybe by having your own div class or something to add more specificity to it.

7

The :beers: :slight_smile: is "far" more important then my question. Hope you have enjoyed it!!

8

oh yes - Cheers :beers:

9

Cheers Dave!!!
Don't read this feedback today :rofl:

Bit more detail. Now at least I know already where the color is coming from...

image
image.png897Ă—294 175 KB

  1. DrawSvg generates an SVG "symbol" for each FontAwesome icon. Such a symbol has an SVG path which contains the contour of the icon.

  2. Then DrawSvg will re-"use" that symbol at every location where I put it. And there it also gets my custom pink color (style="fill:#ff1493; !important;").

  3. The path in the symbol has no explicit color, but it seems to get his blue color from the dashboard:

    image

  4. And that is the cause: because when I deselect the checkbox, then the icon gets the pink color in the dashboard...

So I need to get rid of those dashboard styles.
But as you can see, the "!important" directive doesn't help ...

10

It's the path part in that style Bart.
If you put a <style> tag in a head template or a regular ui_template, it can possibly be overridden.

<style>
path {
  fill: pink;
}
</style>

But the question is what/ why is path being set? Part of dashboard theme for colouring SVG paths?

11

Yes - so when using svg icons (in all the other widgets) they match the theme...

2 Likes
12

Also, I'm not certain if this isn't a quirk of <use>. I.e. correct me if I'm wrong but shouldn't inline style take precedence over a class? But as the style is set in the use and not the def>path, it's not working as expected?

13

maybe - indeed I thought inline did take precedence. - but as i said you could define a style for path that is more specific than just .nr-dashboard-theme .nr-dashboard-template (or just use !important :slight_smile:

14

Welcome @Steve-Mcl,

There is another thing that I don't understand:

image
image817Ă—359 158 KB

  1. DrawSvg generates an SVG symbol for each icon. As explained above that contains an SVG path that gets its blue fill color from the dashboard.

  2. Everywhere I "use" that symbol, the browser will create a shadow dom with a copy from the original path.

  3. But that cloned path (in the shadow dom) has fill color pink as, so here no dashboard colors.

I have the impression that the browser creates the shadow doms (with the original colors), and afterwards applies the dashboard color to the original symbol path (which is in the same DOM as the dashboard elements). But I would have expected that that cloned path would have drawn, but that is not the case because then it should have been rendered pink in the dashboard ...

@dceejay Have tried that (see above post), but it didn't help. Or should I add it somewhere else?? Or somebody has put a very strong ingredient in your beers :rofl:

15

Isn't the problem that the dashboard theme directly addresses path (instead of applying classes to the elements it wants to style?).

Sorry for my lack of CSS knowledge

16

Bart...

Look at the bit about ...

Fortunately, there's a trick we can use to at least get one unique color per instance. If we go in to the SVG definition itself, we can apply fill=“currentColor” to a shape or path of our choosing. What does that do? Well, the long supported CSS value currentColor , specifies that color will be inherited. This means that we can define a font color higher up in the tree (for example on the cloned instances themselves), and the fill for that path or shape will inherit the color

Might be relevant?

I haven't processed it in my head or gave it a try.

Could you play in the DOM/devtools, give it a try?

17

well that is the element IT wants to style - so again I'm not sure why you can't override it locally.

@BartButenaers - sorry I thought the pink icon WAS you adding !important and it working - as the dashboard colour was blue.

1 Like
18

@Steve-Mcl:

Have added it to the "symbol" element (since the "use" element contains the pink color):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0" y="0" viewBox="0 0 900 710" width="100%" height="100%">
       <rect id="svgEditorBackground" x="0" y="0" width="900" height="710" style="fill: none; stroke: none;"/>
       <defs id="svgEditorDefs">
           <symbol xmlns="http://www.w3.org/2000/svg" id="f03d" preserveAspectRatio="xMidYMid meet" viewBox="0 0 576 512">
               <path d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"/>
            </symbol>
           <polygon id="svgEditorIconDefs" style="fill:currentColor;"/>
        </defs>
  <image width="889" height="704" id="background" xlink:href="https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg"/>
<use xlink:href="#f03d" x="135.9755859375001" y="33.62033462524364" width="65.41089965398012" height="58.143021914649" id="e1_icon" style="fill=“deeppink”; !important;"/>
</svg>

But doesn't help :woozy_face:
I'm off to bed. Though day tomorrow at work. Thanks guys!

19

Hi Bart, been quickly reading through this.

The answer is definitely in here & it's definitely related to use and shadow host...

But alas, bed time here too.

1 Like
20

Interesting read that. Every day is a school day.

So regarding my earlier statement about inline style taking precedence, not entirely correct.

It's a long read so I'll cut to the chase, we may have to use one of the techniques discussed, we may have to ask Joseph to do something to the defs

When one of us get Infront of a PC, we should try...

<svg style="display: none;">
	<symbol id="codrops" viewBox="0 0 23 30">
		<path class="back" d="..."/>
		<path class="front" fill="currentColor" d="..."/>
	</symbol>
</svg>

Note the currentColor part in the def>path?

Now use element should permit the fill colour by inline style.

Bfn.