[icons] fix: invalid DOM attribute warning for transform-origin (#6594)

Author: adidahiya

packages/icons/scripts/iconComponent.tsx.hbs

@@ -27,7 +27,6 @@ export const {{pascalCase iconName}}: React.FC<SVGIconProps> = React.forwardRef<
             <path
                 d={isLarge ? "{{icon20pxPath}}" : "{{icon16pxPath}}"}
                 fillRule="evenodd"
-                transform-origin="center"
                 transform={`scale({{pathScaleFactor}}, -{{pathScaleFactor}}) translate(${translation}, ${translation})`}
             />
         </SVGIconContainer>

packages/icons/src/blueprint-icons.scss

@@ -5,3 +5,17 @@ Licensed under the Apache License, Version 2.0.
 
 @import "generated/16px/blueprint-icons-16";
 @import "generated/20px/blueprint-icons-20";
+
+/* stylelint-disable-next-line @blueprintjs/no-prefix-literal -- we don't have access to core variables in this file */
+.bp5-icon-svg {
+  // Despite being added to added as a supported SVG attribute to React in 2023, the `transformOrigin` JSX attribute
+  // is still difficult to use in our statically-generated icon components (`<AddClip>`, `<Calendar>`, etc.)
+  // which rely on a centered scale `transform="..."` to display their `<path>` elements correctly. To work around
+  // this, we apply the necessary style in CSS instead. Note that this needs to apply directly to the `<path>` element
+  // and not the container `<svg>`. See:
+  // - https://github.com/facebook/react/pull/26130
+  // - https://github.com/palantir/blueprint/issues/6591
+  path {
+    transform-origin: center;
+  }
+}

packages/icons/src/classes.ts

@@ -15,3 +15,4 @@
 
 const NS = "bp5";
 export const ICON = `${NS}-icon`;
+export const ICON_SVG = `${ICON}-svg`;

packages/icons/src/svgIconContainer.tsx

@@ -67,8 +67,7 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func
     const pixelGridSize = isLarge ? IconSize.LARGE : IconSize.STANDARD;
     const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
     const titleId = uniqueId("iconTitle");
-    const sharedSvgProps = {
-        "data-icon": iconName,
+    const sharedSvgProps: React.SVGProps<SVGSVGElement> = {
         fill: color,
         height: size,
         role: "img",
@@ -81,9 +80,11 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func
         return (
             <svg
                 aria-labelledby={title ? titleId : undefined}
+                data-icon={iconName}
                 ref={ref as React.Ref<SVGSVGElement>}
                 {...sharedSvgProps}
                 {...htmlProps}
+                className={classNames(Classes.ICON_SVG, className, svgProps?.className)}
             >
                 {title && <title id={titleId}>{title}</title>}
                 {children}
@@ -99,7 +100,7 @@ export const SVGIconContainer: SVGIconContainerComponent = React.forwardRef(func
                 ref,
                 title: htmlTitle,
             },
-            <svg {...sharedSvgProps}>
+            <svg data-icon={iconName} {...sharedSvgProps} className={classNames(Classes.ICON_SVG, svgProps?.className)}>
                 {title && <title>{title}</title>}
                 {children}
             </svg>,