[Svg.tsx, IconContainer.tsx] The top-level <svg> attribute "fill" is erased which affects visual representation

[siarheiyelin]

Description

The top-level attribute "fill" is erased when SVG is rendered using Svg.tsx/IconContainer.tsx components.

Example of SVG which has this issue:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 45" width="24" height="24" fill="none">
	<rect x="1" y="7.224" width="52" height="36" rx="3.438" stroke="currentColor" stroke-width="2"/>
	<rect x="37" y="14.224" width="9" height="22" rx="2.219" stroke="currentColor" stroke-linecap="round" stroke-dasharray="4 5"/>
	<rect x="7" y="14.224" width="24" height="22" rx="2.219" stroke="currentColor" stroke-linecap="round" stroke-dasharray="4 5"/>
	<path d="M5.438 2.996c0-.674.545-1.22 1.219-1.22h2.219c.673 0 1.219.546 1.219 1.22v4.178H5.437V2.996z" stroke="currentColor" stroke-width="2"/>
	<path d="M43.904 2.996c0-.674.546-1.22 1.22-1.22h2.219c.673 0 1.219.546 1.219 1.22v4.178h-4.658V2.996z" stroke="currentColor" stroke-width="2"/>
</svg>

Root cause

Svg.tsx passes fill={undefined} to native <svg> element if the "fillColor" property is not provided. As a result "fill" attribute is erased from *.svg

Actual result

Property "fill" is removed from top level <svg> element. As of now, we have to apply next workaround:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 45" width="24" height="24">
  <g fill="none">
    <rect x="1" y="7.224" width="52" height="36" rx="3.438" stroke="currentColor" stroke-width="2"/>
    <rect x="37" y="14.224" width="9" height="22" rx="2.219" stroke="currentColor" stroke-linecap="round" stroke-dasharray="4 5"/>
    <rect x="7" y="14.224" width="24" height="22" rx="2.219" stroke="currentColor" stroke-linecap="round" stroke-dasharray="4 5"/>
    <path d="M5.438 2.996c0-.674.545-1.22 1.219-1.22h2.219c.673 0 1.219.546 1.219 1.22v4.178H5.437V2.996z" stroke="currentColor" stroke-width="2"/>
    <path d="M43.904 2.996c0-.674.546-1.22 1.22-1.22h2.219c.673 0 1.219.546 1.219 1.22v4.178h-4.658V2.996z" stroke="currentColor" stroke-width="2"/>
  </g>
</svg>

Expected result

Property "fill" is not removed from top level <svg> element.

Environment

• UUI version: 5.10.2

[NatalliaAlieva]

Released in 5.12.0 ver.

[AlekseyManetov]

We had to revert this fix in version 5.12.1 because it turned out that many users relied on the previous behavior where the fill attribute is cleared, rather than manually handling this for icons exported from Figma. This use case seems to be more common than using icons with a built-in fill. Therefore, we will consider this behavior as the standard for our components for now.

In the future, we might explore alternative solutions that would not introduce such a significant breaking change. For example, we could consider enabling this fix based on a specific setting. However, currently, we do not see a strong demand for cases where an icon must retain its custom color. That said, this can still be achieved using the following workarounds:

1. Wrap the icon to prevent the fill from being applied by our SVG component:

import { ReactComponent as MyIcon } from '@epam/assets/icons/common/myIcon.svg';
const iconWithColor = () => <MyIcon />;

export default function Component() {
    return (
        <Button icon={ iconWithColor } />
    );
}

2. Move the fill attribute from the <svg> element to a nested element:

<svg fill='red'> .... content  
=> 
<svg> <g fill='red'>... content</g> </svg>