Adding "thin" icon variants for <Icon /> component

Open thelevicole opened this issue 10 months ago • 1 comments

This PR introduces a new weight property to the <Icon /> component, allowing you to choose between different icon weights. The available values are:

default (Figma token path: click.image.borderWidth.default)
thin (Figma token path: click.image.borderWidth.thin)

Internally, the weight property is applied with CSS by targeting SVG elements with a stroke width of 1.5. This approach is similar to how the color and stroke properties are implemented, but it specifically targets a stroke width which is safe to change.

Example usage:

<Icon name="activity" weight="thin" />

Apr 08 '25 16:04 thelevicole

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
click-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2025 4:44pm

Apr 08 '25 16:04 vercel[bot]