Proposal: Improve icon creation pattern and SVG → React component standardization

[elizabetdev]

There are a few areas where I think we could further improve our icon creation approach and make it more consistent and scalable.

Related context:
#819 (review)

First, similar to what was done in #828, we could standardize converting SVGs into React components.

While looking into the current icon structure, I also noticed that we have a wrapper around the icons that overrides stroke and fill colors:

click-ui/src/components/Icon/Icon.tsx

Lines 50 to 57 in 69f7145

	${({ theme, $color = 'currentColor', $width, $height, $size }) => `
	& path[stroke], & svg[stroke]:not([stroke="none"]), & rect[stroke], & circle[fill] {
	stroke: ${$color};
	}
	& path[fill], & svg[fill]:not([fill="none"]), & rect[fill], & circle[fill] {
	fill: ${$color};
	}

This logic ends up overriding the original color and stroke values defined in the SVGs.

From my perspective, this creates unnecessary overhead. We’re adding extra code inside the SVG React components that ultimately gets overridden by the wrapper anyway.

A cleaner approach would be for SVG components to use currentColor by default when they’re transformed into React components. That way:

• Icons automatically inherit color from the parent wrapper
• We avoid redundant SVG attributes
• Passing custom colors remains flexible and straightforward
• The overall pattern becomes simpler and more maintainable

Additional observations

Some icons define explicit stroke widths:

Others don’t:

Do we want to allow overriding stroke widths? If yes, it would be great to make this consistent across all icons. If not, we could standardize and remove those attributes to keep the system simpler.

I think the design team first needs to take some decisions here. Happy to discuss this proposal on the next click-ui sync.

[DreaminDani]

To answer your questions, I think we should:

1. use currentColor everywhere so it's easier to override via CSS
2. allow for stroke widths to be overridden via CSS