How to properly use "iconSvg:" in menu?

Known Issues
#1

Icon color doesn’t work.

            feedbacks:
                label: feedbacks
                url: konvertagency/sitetools/feedbacks
                icon: icon-adjust
                iconSvg: plugins/konvertagency/landing/assets/img/feedback_f.svg

the feedback_f.svg file has the fill=“currentColor” property, but the CMS does not apply it, and moreover, a filter is assigned in the css to invert the color of the icon - in the default backen design the icon is white and poorly visible

Scr-835
Scr-8351112×1176 122 KB

if the icon is inserted into yaml in inline style

            feedbacks:
                label: feedbacks
                url: konvertagency/sitetools/feedbacks
                icon: icon-adjust
                iconSvg: '<?xml version="1.0" encoding="UTF-8" standalone="no"?>  
                    <svg xmlns="http://www.w3.org/2000/svg"   
                    xml:space="preserve"   
                    width="32px"   
                    height="32px"   
                    version="1.1"   
                    shape-rendering="geometricPrecision"   
                    text-rendering="geometricPrecision"   
                    image-rendering="optimizeQuality"   
                    fill-rule="evenodd"   
                    clip-rule="evenodd"   
                    data-slot="icon"   
                    viewBox="0 0 32 32"   
                    fill="currentColor" >    
                    <path d="M10.077 19.239c-2.887,0 -4.491,-2.691 -4.781,-5.434 -0.346,-3.273 0.444,-6.145 4.781,-6.145 4.337,0 5.126,2.872 4.781,6.145 -0.29,2.743 -1.894,5.434 -4.781,5.434zm10.077 9.654l-20.154 0c0.012,-1.973 0.177,-3.548 0.469,-4.604 0.293,-1.055 0.719,-1.807 1.983,-2.232 1.264,-0.426 3.236,-1.023 4.157,-1.775 1.354,-1.105 1.561,-1.095 2.108,-0.507 0.437,0.469 0.907,0.906 1.36,1.359 0.453,-0.453 0.923,-0.89 1.36,-1.359 0.547,-0.588 0.754,-0.598 2.108,0.507 0.921,0.752 2.893,1.349 4.157,1.775 1.264,0.425 1.69,1.177 1.983,2.232 0.292,1.056 0.457,2.631 0.469,4.604zm9.197 -22.988l0.502 1.026 1.13 0.16c0.45,0.064 0.431,0.001 0.103,0.318l-0.82 0.794 0.197 1.125c0.078,0.448 0.132,0.41 -0.271,0.196l-1.009 -0.534 -1.008 0.534c-0.403,0.214 -0.349,0.252 -0.271,-0.196l0.197 -1.125 -0.82 -0.794c-0.327,-0.317 -0.348,-0.255 0.103,-0.318l1.131 -0.161 0.501 -1.025c0.2,-0.409 0.135,-0.408 0.335,0zm-5.054 0l0.502 1.026 1.13 0.16c0.45,0.064 0.431,0.001 0.103,0.318l-0.82 0.794 0.197 1.125c0.078,0.448 0.131,0.41 -0.271,0.196l-1.009 -0.534 -1.009 0.534c-0.402,0.214 -0.348,0.252 -0.27,-0.196l0.197 -1.125 -0.821 -0.794c-0.326,-0.317 -0.347,-0.255 0.104,-0.318l1.131 -0.161 0.501 -1.025c0.2,-0.409 0.135,-0.408 0.335,0zm-6.734 -2.798l13.132 0c0.718,0 1.305,0.587 1.305,1.305l0 6.933c0,0.718 -0.587,1.305 -1.305,1.305l-7.83 0 -3.4 2.915c-0.395,0.34 -0.719,0.056 -0.719,-0.631l0 -2.284 -1.183 0c-0.717,0 -1.305,-0.587 -1.305,-1.305l0 -6.933c0,-0.718 0.588,-1.305 1.305,-1.305zm1.68 2.798l0.501 1.026 1.131 0.16c0.45,0.064 0.431,0.001 0.103,0.318l-0.82 0.794 0.197 1.125c0.078,0.448 0.131,0.41 -0.271,0.196l-1.009 -0.534 -1.009 0.534c-0.402,0.214 -0.348,0.252 -0.27,-0.196l0.197 -1.125 -0.821 -0.794c-0.326,-0.317 -0.347,-0.255 0.104,-0.318l1.131 -0.161 0.501 -1.025c0.2,-0.409 0.135,-0.408 0.335,0z"/>  </svg>'

then cms I’ll try to insert the icon as a file in the <img> tag and the html structure is incorrect

the svg fill=“currentColor” property is applied, but incorrectly, because turns on as an active icon in the top menu

Scr-836
Scr-8361101×1176 93.9 KB

#2

Hey @point111

Thank you for bringing this to our attention. You’re correct that the fill="currentColor" attribute in SVG files can be problematic when SVGs are used as image sources in <img> tags. This is a known limitation when integrating SVGs into the October CMS admin panel in this manner.

The fill="currentColor" attribute is designed to inherit the color from the parent element’s color property in CSS. However, when SVG is used within an <img> tag, it is treated as an external resource. Consequently, it doesn’t inherit styles from the parent HTML document, leading to the issues you’ve observed.

We are aware of this limitation and are exploring ways to improve SVG icon integration in the admin panel. One potential solution could involve using inline SVGs instead of <img> tags, but this approach currently has its own set of challenges and limitations within the platform.

We are open to suggestions and ideas from our community. If you have any specific ideas or workarounds that could help support currentColor in <img> tags with SVGs, please feel free to share them.