icon size not applying correctly with css variables in chromium

[ihateblueb]

Description

When I use the tabler/icons-svelte package, I use the large font size css variable for the size so I can keep my sizes consistent.

	<Button quaternary>
		<IconCube size="var(--fs-lg)" />
		Sample Button (quaternary)
	</Button>

Firefox and Safari seem to handle this fine right now, but Chromium doesn't.

Firefox:

Chromium:

I have a temporary fix for my use that finds the size and adds a width and height style to the element and then it looks how I expected.

Package

• @tabler/icons
• @tabler/icons-eps
• @tabler/icons-pdf
• @tabler/icons-png
• @tabler/icons-webfont
• @tabler/icons-sprite
• @tabler/icons-preact
• @tabler/icons-react
• @tabler/icons-react-native
• @tabler/icons-solid
• @tabler/icons-svelte
• @tabler/icons-vue
• Figma plugin
• source/main
• other/not relevant

Version

3.24.0

Browser

• Chrome/Chromium
• Firefox
• Safari
• Edge
• iOS Safari
• Opera
• Other/not relevant

Operating system

• Windows
• Linux
• macOS
• ChromeOS
• iOS
• Android
• Other/not relevant

Steps to reproduce

1. Import IconCube (import { IconCube } from '@tabler/icons-svelte';)
2. Use icon with size attribute set as a CSS variable (<IconCube size="var(--fs-lg)" />)

Checklist

• I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)