vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
426 stars 81 forks source link

vaadin-iconset as replacement for iron-iconset-svg does not take into account fill spec on icons #4103

Closed HawkSK closed 1 year ago

HawkSK commented 2 years ago

Description

When fill="none" is defined on svg inside vaadin-iconset the resulting vaadin-icon > svg does NOT contain this attribute, resulting in an unwanted background colour based on currentColor.

Similar issue of vaadin-iconset attribute being ignored : https://github.com/vaadin/web-components/issues/3992

Expected outcome

<svg> inside vaadin-icon should have fill="none"

Minimal reproducible example

import '@vaadin/icon';

const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `
<vaadin-iconset name="wf-shared-icons">
    <svg>
        <defs>
            <svg id="photo-placeholder" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="#D1D5DB"/>
                <path d="M46.75 24C46.75 36.5645 36.5645 46.75 24 46.75C11.4355 46.75 1.25 36.5645 1.25 24C1.25 11.4355 11.4355 1.25 24 1.25C36.5645 1.25 46.75 11.4355 46.75 24Z" stroke="#D1D5DB" stroke-miterlimit="10"/>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M40.2749 40.6044C36.0899 44.7119 30.3356 47.25 23.9999 47.25C17.6643 47.25 11.9099 44.7119 7.70557 40.585L8.07369 40.0813C10.3406 33.4744 16.5987 28.7081 23.9806 28.7081C31.3624 28.7081 37.6206 33.455 39.8874 40.0813L40.2749 40.6044Z" fill="#F4F4F5"/>
                <path d="M32.3745 18.4858C33.4578 13.8597 30.5857 9.23143 25.9596 8.14819C21.3336 7.06496 16.7052 9.937 15.622 14.5631C14.5388 19.1892 17.4108 23.8175 22.0369 24.9007C26.663 25.9839 31.2913 23.1119 32.3745 18.4858Z" fill="#F4F4F5"/>
            </svg>
        </defs>
    </svg>
</vaadin-iconset>`;
document.head.appendChild($_documentContainer.content);

### Steps to reproduce

add the above iconset to any application and use the icon

```html
<vaadin-icon icon="wf-shared-icons:photo-placeholder"></vaadin-icon>

Environment

Vaadin version(s): 23.1.1 OS: Win 10

Browsers

No response

HawkSK commented 2 years ago

Probably other attributes are ignored too

web-padawan commented 2 years ago

Thanks for the issue. This is caused by change in the way how SVG node is cloned:

This is just an oversight that can be fixed by changing the corresponding line:

-    result = svg`${unsafeSVG(content.innerHTML)}`;
+    result = svg`${unsafeSVG(content.outerHTML)}`;