Icon edges cut (by transforms?)

[bd-halkoaho]

Environment

• Package version(s):
  "@blueprintjs/core": "^5.2.0",
  "@blueprintjs/datetime": "^5.0.8",
  "@blueprintjs/icons": "^5.1.5",
• Operating System: MacOS Ventura
• Browser name and version: Chrome 116.0.5845.96 & Chromium M96

Code Sandbox

Link to a minimal repro (fork this code sandbox):

Steps to reproduce

1. Use the Error icon from @blueprint/icons. Probably any icon with a round form has the same problem. Code: <Error />

Actual behavior

The icon is rendered, but the left and bottom edges are cut off so it doesn't look completely round.

Expected behavior

The icon is rendered and looks completely round.

Possible solution

In Blueprint 4, the icon used to look like this when inspecting it:

<svg data-icon="error" width="20" height="20" viewBox="0 0 20 20" role="img"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 16H9v-2h2v2zm0-3H9V4h2v9z" fill-rule="evenodd"></path></svg>

In Blueprint 5, the icon looks like this:

<svg data-icon="error" height="20" role="img" viewBox="0 0 20 20" width="20"><path d="M200 400C89.6 400 0 310.4 0 200C0 89.6 89.6 0 200 0S400 89.6 400 200C400 310.4 310.4 400 200 400zM220 80H180V120H220V80zM220 140H180V320H220V140z" fill-rule="evenodd" transform-origin="center" transform="scale(0.05, -0.05) translate(-200, -200)"></path></svg>

I tried changing the scale from scale(0.05, -0.05) to scale(0.04, -0.04), and that left enough space for the icon to become fully circular again.

I'm reporting the bug because of the above, and also because I was unable to find any way to fix it from my code. I tried changing paddings, the size of the icon etc. But I think it's a blueprint problem. We're seeing this in many icons across our application after updating to Blueprint 5.

I don't see the problem or the transforms in your icon documentation. Could those be using Blueprint 4, or using another way of showing the icons? We also moved to using the icon elements like <Error /> from @blueprint/icons instead of using <Icon icon="error" /> from @blueprint/core when we moved to Blueprint 5, because our tests started failing with the dynamic loading of icons. So that difference in usage is another possible factor.

[adidahiya]

@snps-halkoaho thanks for the bug report. I noticed this visual bug as well. It applies to the static icon components like { Error } from "@blueprintjs/icons", while { Icon } from "@blueprintjs/core" is unaffected.

The problem is likely caused by the rasterization and scaling done in our icon package build scripts, see #5074 and this code:

blueprint/packages/icons/scripts/common.mjs

Lines 29 to 38 in 55f525d

	/**
	* We need to scale up the icon paths during conversion so that the icons do not get visually degraded
	* or compressed through rounding errors (svgicons2svgfont rasterizes the icons in order to convert them).
	*
	* After generating the icon font files, we also need to take care to scale the paths _back down_ by this
	* factor in the icon component SVG paths, since we read the upscaled paths from SVG font at that point.
	*
	* @see https://github.com/palantir/blueprint/issues/5002
	*/
	export const ICON_RASTER_SCALING_FACTOR = 20;

There may be a relatively simple fix we can apply by adding some padding during the transform. I will try to fix this over the next few weeks / months, but it is lower on my priority list than other urgent work to unblock React 18 (#5205). Open to suggestions & PRs in the meantime.

[bd-halkoaho]

Thanks for the info @adidahiya. Unblocking React 18 is definitely more important for us too! A fix for the icons over the next weeks & months sounds good, we can definitely live with them as they are for a little while.