how can I set the icon size as percentage in TS?

[GhostOrder28]

Previously with just javascript it wasn't an issue at all setting the size like this:

<ArrowUpIcon size={'100%'} />

But now I'm migrating my app to typescript and the compiler says about the size attribute that 'string' is not assignable to type 'number' which makes sense but then how can I set the size of icons as percentages?.

I tried removing completely the size attribute and adding the ub-h_100prcnt and ub-w_100prcnt classes which are the ones evergreen adds to svgs when they have their sizes set like size={'100%'} but, although the classes were added they were nullified(I couldn't find a better word) by the default ub-h_16px and ub-w_16px classes.

[brandongregoryscott]

Hey @GhostOrder28! I think we typically expect icons to be sized in units (i.e. a number)

evergreen/index.d.ts

Lines 3183 to 3187 in 10e8e23

	* Size of the icon, in pixels.
	* Blueprint contains 16px and 20px SVG icon images,
	* and chooses the appropriate resolution based on this prop.
	*/
	size?: number

If you have a specific use-case for a percentage or string-based value (and it was working as you expected), it should still work by casting it:

<ArrowUpIcon size={('100%' as any) as number} />

As for setting the class names directly, I would not recommend that - ui-box and glamor both manage helper class creation/application and aren't really meant to be used directly in the way you described.

[GhostOrder28]

Hey @brandongregoryscott thank you for the help, in this case I just want the size of the icons to depend on the size of their parent container.

[brandongregoryscott]

Gotcha. There are some calculations in the component logic that look like they expect a number, but if it's working, go for it!

evergreen/src/icons/src/Icon.js

Lines 23 to 25 in 10e8e23

	// Choose which pixel grid is most appropriate for given icon size
	const pixelGridSize = size >= SIZE_LARGE ? SIZE_LARGE : SIZE_STANDARD
	const pathStrings = pixelGridSize === SIZE_STANDARD ? svgPaths16 : svgPaths20