Custom Icons can't use fill color attributes

[michaeldjeffrey]

User defined svg icons cannot use fill as an attribute to set their color.

<polygon id="path" fill="red" points="1 2 3 4"></polygon>

will never be red unless the color set by a parent is red.

[oleq]

Hi, I'm not sure I understand your issue but I assume you're using custom SVG icons in your project that define fills using inline attributes.

If I'm right, then yes, CKEditor uses CSS to control fills of the icons which allows an easy single-line-of-code customization (like in our theme customization guide). This is one of the assumptions of the system. And yes, this way of controlling the colors will probably override your all fill="..." declarations in SVG files.

You can override our CSS rules with your custom colors in CSS, e.g. by applying CSS classes to <path> elements.

[dkonopka]

@michaeldjeffrey If you are looking for other easy way to fix it, just use CSS Specificity power and add inline style in the <svg> file:

<polygon id="path" points="1 2 3 4" style="fill: red"></polygon>

[michaeldjeffrey]

@dkonopka That's the fix I'm employing now.

The workflow I'm aiming for (if I can be so selfish) is to be able to take an icon from a designer and now have to fiddle with how their colors were applied.

It appears the reason fill attributes don't work as expected is something to do with Firefox, and that if there was someway to keep the default behavior for everywhere, that would be ideal.

I submitted a PR-207 that only declares the fill if the element does declare it itself.

Thanks for all the work you guys put into this project though, it's very much appreciated.