@blueprintjs/icons 5.0.0-alpha.5 → 5.0.0-beta.1

package/src/generated/components/group-objects.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const GroupObjects: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M120 260C86.8 260 60 233.2 60 200S86.8 140 120 140S180 166.8 180 200S153.2 260 120 260zM280 320H120C53.8 320 0 266.2000000000001 0 200C0 133.8 53.8 80 120 80H280C346.2 80 400 133.8 400 200C400 266.2 346.2 320 280 320zM280 100H120C64.8 100 20 144.8 20 200S64.8 300 120 300H280C335.2 300 380 255.2 380 200S335.2000000000001 100 280 100zM280 260C246.8 260 220 233.2 220 200S246.8 140 280 140S340 166.8 340 200S313.2 260 280 260z"
-                    : "M100 200C78 200 60 182 60 160C60 138 78 120 100 120S140 138 140 160C140 182 122 200 100 200zM220 260H100C44.8 260 0 215.2 0 160S44.8 60 100 60H220C275.2 60 320 104.8 320 160S275.2 260 220 260zM220 80H100C55.8 80 20 115.8 20 160C20 204.2 55.8 240 100 240H220C264.2000000000001 240 300 204.2 300 160C300 115.8 264.2000000000001 80 220 80zM220 200C198 200 180 182 180 160C180 138 198 120 220 120S260 138 260 160C260 182 242 200 220 200z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="group-objects"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-group-objects`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="group-objects" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const GroupObjects: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="group-objects" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M100 200C78 200 60 182 60 160C60 138 78 120 100 120S140 138 140 160C140 182 122 200 100 200zM220 260H100C44.8 260 0 215.2 0 160S44.8 60 100 60H220C275.2 60 320 104.8 320 160S275.2 260 220 260zM220 80H100C55.8 80 20 115.8 20 160C20 204.2 55.8 240 100 240H220C264.2000000000001 240 300 204.2 300 160C300 115.8 264.2000000000001 80 220 80zM220 200C198 200 180 182 180 160C180 138 198 120 220 120S260 138 260 160C260 182 242 200 220 200z"
+                        : "M120 260C86.8 260 60 233.2 60 200S86.8 140 120 140S180 166.8 180 200S153.2 260 120 260zM280 320H120C53.8 320 0 266.2000000000001 0 200C0 133.8 53.8 80 120 80H280C346.2 80 400 133.8 400 200C400 266.2 346.2 320 280 320zM280 100H120C64.8 100 20 144.8 20 200S64.8 300 120 300H280C335.2 300 380 255.2 380 200S335.2000000000001 100 280 100zM280 260C246.8 260 220 233.2 220 200S246.8 140 280 140S340 166.8 340 200S313.2 260 280 260z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+GroupObjects.defaultProps = {
+    size: IconSize.STANDARD,
+};
 GroupObjects.displayName = `Blueprint5.Icon.GroupObjects`;
 export default GroupObjects;

package/src/generated/components/grouped-bar-chart.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const GroupedBarChart: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M240 80H260C271 80 280 89 280 100V300C280 311 271 320 260 320H240C229 320 220 311 220 300V100C220 89 229 80 240 80zM380 60H20C9 60 0 51 0 40C0 29 9 20 20 20H380C391 20 400 29 400 40C400 51 391 60 380 60zM320 80H340C351 80 360 89 360 100V240C360 251 351 260 340 260H320C309 260 300 251 300 240V100C300 89 309 80 320 80zM140 80H160C171 80 180 89 180 100V200C180 211 171 220 160 220H140C129 220 120 211 120 200V100C120 89 129 80 140 80zM60 80H80C91 80 100 89 100 100V360C100 371 91 380 80 380H60C49 380 40 371 40 360V100C40 89 49 80 60 80z"
-                    : "M200 80C211 80 220 89 220 100V260C220 271 211 280 200 280S180 271 180 260V100C180 89 189 80 200 80zM260 80C271 80 280 89 280 100V200C280 211 271 220 260 220S240 211 240 200V100C240 89 249 80 260 80zM300 60H20C9 60 0 51 0 40S9 20 20 20H300C311 20 320 29 320 40S311 60 300 60zM120 80C131 80 140 89 140 100V160C140 171 131 180 120 180S100 171 100 160V100C100 89 109 80 120 80zM60 80C71 80 80 89 80 100V280C80 291 71 300 60 300S40 291 40 280V100C40 89 49 80 60 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="grouped-bar-chart"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-grouped-bar-chart`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="grouped-bar-chart" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const GroupedBarChart: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="grouped-bar-chart" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M200 80C211 80 220 89 220 100V260C220 271 211 280 200 280S180 271 180 260V100C180 89 189 80 200 80zM260 80C271 80 280 89 280 100V200C280 211 271 220 260 220S240 211 240 200V100C240 89 249 80 260 80zM300 60H20C9 60 0 51 0 40S9 20 20 20H300C311 20 320 29 320 40S311 60 300 60zM120 80C131 80 140 89 140 100V160C140 171 131 180 120 180S100 171 100 160V100C100 89 109 80 120 80zM60 80C71 80 80 89 80 100V280C80 291 71 300 60 300S40 291 40 280V100C40 89 49 80 60 80z"
+                        : "M240 80H260C271 80 280 89 280 100V300C280 311 271 320 260 320H240C229 320 220 311 220 300V100C220 89 229 80 240 80zM380 60H20C9 60 0 51 0 40C0 29 9 20 20 20H380C391 20 400 29 400 40C400 51 391 60 380 60zM320 80H340C351 80 360 89 360 100V240C360 251 351 260 340 260H320C309 260 300 251 300 240V100C300 89 309 80 320 80zM140 80H160C171 80 180 89 180 100V200C180 211 171 220 160 220H140C129 220 120 211 120 200V100C120 89 129 80 140 80zM60 80H80C91 80 100 89 100 100V360C100 371 91 380 80 380H60C49 380 40 371 40 360V100C40 89 49 80 60 80z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+GroupedBarChart.defaultProps = {
+    size: IconSize.STANDARD,
+};
 GroupedBarChart.displayName = `Blueprint5.Icon.GroupedBarChart`;
 export default GroupedBarChart;

package/src/generated/components/hand-down.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const HandDown: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M353.6 203.2C318.2 220 285.4 270.2 269 302C248.2 351.4 244.2 400 157.4 400C109.8 400 79 384.8 61 347C46.2 316 40 290.4 40 204.2V184.4C40 168 53.8 154.8 70.8 154.8C78.4 154.8 85.4 157.6 90.8 162C94.6 150 106.4 141 120.2 141C129.6 141 138 145 143.6 151.4C148.8 142 159 135.6 170.8 135.6C183.8 135.6 194.8 143.4 199.4 154.1999999999999L200 138.8V30C200 20.4 204.6 11.8 211.8 6.4C216 2.6 221.8 0 228.8 0C229 0 229.2 0 229.4 0C229.6 0 229.8 0 230 0C246.6 0 260 13.4 260 30V194.8L260.2 208.2C277.2 188.6 298.6 173 325 170.4C360.8 166.6 366.8 197 353.6 203.2z"
-                    : "M294.4000000000001 162.6C263.6 176 234.6 216.2 220.4 241.6C202.2 281 198.6 320 122.8 320C81 320 54.2 307.8 38.4 277.6C25.4 252.8 20 215.8 20 163.4V147.6C20 134.6 32 124 47 124C53.8 124 59.8 126.2 64.6 129.8C68 120.2 78.2 113 90.4 113C98.6 113 106 116.2 111 121.4C115.6 114 124.4 108.8 134.8 108.8C146.2 108.8 155.8 115 159.8 123.6L160 111V30C160 13.4 173.4 0 190 0C206.6 0 220 13.4 220 30V162C231.6 153.8 251 137.8 269.4000000000001 136.2C300.8 133.4 305.8 157.6 294.4000000000001 162.6z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="hand-down"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-hand-down`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="hand-down" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HandDown: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="hand-down" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M294.4000000000001 162.6C263.6 176 234.6 216.2 220.4 241.6C202.2 281 198.6 320 122.8 320C81 320 54.2 307.8 38.4 277.6C25.4 252.8 20 215.8 20 163.4V147.6C20 134.6 32 124 47 124C53.8 124 59.8 126.2 64.6 129.8C68 120.2 78.2 113 90.4 113C98.6 113 106 116.2 111 121.4C115.6 114 124.4 108.8 134.8 108.8C146.2 108.8 155.8 115 159.8 123.6L160 111V30C160 13.4 173.4 0 190 0C206.6 0 220 13.4 220 30V162C231.6 153.8 251 137.8 269.4000000000001 136.2C300.8 133.4 305.8 157.6 294.4000000000001 162.6z"
+                        : "M353.6 203.2C318.2 220 285.4 270.2 269 302C248.2 351.4 244.2 400 157.4 400C109.8 400 79 384.8 61 347C46.2 316 40 290.4 40 204.2V184.4C40 168 53.8 154.8 70.8 154.8C78.4 154.8 85.4 157.6 90.8 162C94.6 150 106.4 141 120.2 141C129.6 141 138 145 143.6 151.4C148.8 142 159 135.6 170.8 135.6C183.8 135.6 194.8 143.4 199.4 154.1999999999999L200 138.8V30C200 20.4 204.6 11.8 211.8 6.4C216 2.6 221.8 0 228.8 0C229 0 229.2 0 229.4 0C229.6 0 229.8 0 230 0C246.6 0 260 13.4 260 30V194.8L260.2 208.2C277.2 188.6 298.6 173 325 170.4C360.8 166.6 366.8 197 353.6 203.2z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HandDown.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HandDown.displayName = `Blueprint5.Icon.HandDown`;
 export default HandDown;

package/src/generated/components/hand-left.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const HandLeft: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M302 269.2C270.4 285.4 220.2 318.4 203.2 353.8C197 366.8 166.8 360.8 170.4 325.2C173 298.6 188.6 277.2 208.2 260.4L194.8 260H30C13.4 260 0 246.6 0 230C0 229.8 0 229.6 0 229.4C0 229.2 0 229.0000000000001 0 228.8C0 221.6 2.6 216 6.4 211.8C11.8 204.6 20.4 200 30 200H138.8L154.4 199.8C143.6 195.2 135.8 184.2 135.8 171.2C135.8 159.4 142.2 149.2 151.6 144C145.2 138.4 141.2 130.0000000000001 141.2 120.6C141.2 106.8 150 95.0000000000001 162.2 91.2C157.8000000000001 85.8 155 78.8 155 71.2000000000001C155 54.2 168.2 40.4000000000001 184.6 40.4000000000001H204.4C290.6 40.4000000000001 316.2 46.6 347.2 61.4000000000001C385 79.4 400.2 110.2000000000001 400.2 157.8000000000001C400 244.2 351.4 248.2 302 269.2z"
-                    : "M241.6 220.6C216.4 234.8 176.2 263.6 162.6 294.6C157.6 306 133.4 300.8 136.2 269.6C138 251 154 231.6 162.2 220H30C13.4 220 0 206.6 0 190S13.4 160 30 160H111L123.6 159.8C114.8 155.8 108.6 146 108.6 134.8C108.6 124.4 113.8 115.6 121.2 111C116 106 112.8 98.8 112.8 90.4C112.8 78.2000000000001 119.8 68.0000000000001 129.6 64.6C126 59.8 123.8 53.8 123.8 47C123.8 32 134.6 20 147.6 20H163.4C215.8 20 252.8 25.6 277.6 38.4C307.8 54.2 320 81.2 320 122.8C320 198.6 281 202.2 241.6 220.6z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="hand-left"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-hand-left`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="hand-left" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HandLeft: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="hand-left" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M241.6 220.6C216.4 234.8 176.2 263.6 162.6 294.6C157.6 306 133.4 300.8 136.2 269.6C138 251 154 231.6 162.2 220H30C13.4 220 0 206.6 0 190S13.4 160 30 160H111L123.6 159.8C114.8 155.8 108.6 146 108.6 134.8C108.6 124.4 113.8 115.6 121.2 111C116 106 112.8 98.8 112.8 90.4C112.8 78.2000000000001 119.8 68.0000000000001 129.6 64.6C126 59.8 123.8 53.8 123.8 47C123.8 32 134.6 20 147.6 20H163.4C215.8 20 252.8 25.6 277.6 38.4C307.8 54.2 320 81.2 320 122.8C320 198.6 281 202.2 241.6 220.6z"
+                        : "M302 269.2C270.4 285.4 220.2 318.4 203.2 353.8C197 366.8 166.8 360.8 170.4 325.2C173 298.6 188.6 277.2 208.2 260.4L194.8 260H30C13.4 260 0 246.6 0 230C0 229.8 0 229.6 0 229.4C0 229.2 0 229.0000000000001 0 228.8C0 221.6 2.6 216 6.4 211.8C11.8 204.6 20.4 200 30 200H138.8L154.4 199.8C143.6 195.2 135.8 184.2 135.8 171.2C135.8 159.4 142.2 149.2 151.6 144C145.2 138.4 141.2 130.0000000000001 141.2 120.6C141.2 106.8 150 95.0000000000001 162.2 91.2C157.8000000000001 85.8 155 78.8 155 71.2000000000001C155 54.2 168.2 40.4000000000001 184.6 40.4000000000001H204.4C290.6 40.4000000000001 316.2 46.6 347.2 61.4000000000001C385 79.4 400.2 110.2000000000001 400.2 157.8000000000001C400 244.2 351.4 248.2 302 269.2z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HandLeft.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HandLeft.displayName = `Blueprint5.Icon.HandLeft`;
 export default HandLeft;

package/src/generated/components/hand-right.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const HandRight: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M400 230C400 246.6 386.6 260 370 260H205.2L191.8 260.2C211.4 277.2 227 298.6 229.6 325C233.2 360.8 203 366.6 196.6 353.6C179.8 318.4 129.6 285.4 98 269C48.6 248.2 0 244.2 0 157.4C0 109.8 15.2 79 53 60.9999999999999C84 46.2 109.6 40 195.8 40H215.6C232 40 245.2 53.8 245.2 70.8C245.2 78.4 242.4 85.4 238 90.8C250 94.6 259 106.4 259 120.2C259 129.6 255.0000000000001 138 248.6 143.6C258.0000000000001 148.8 264.4000000000001 159 264.4000000000001 170.8C264.4000000000001 183.8 256.6 194.8 245.8000000000001 199.4L261.2 200H370C379.6 200 388.2 204.6 393.6 211.8C397.4000000000001 216 400 221.6 400 228.8C400 229 400 229.2 400 229.4C400 229.6 400 229.8 400 230z"
-                    : "M290 220H157.8C166 231.6 182 251 183.8 269.4C186.8 300.6 162.4 305.8 157.4 294.4C144 263.6 103.8 234.6 78.4 220.4C39 202.2 0 198.6 0 122.8C0 81 12.2 54.2 42.4 38.4C67.2 25.4 104.2 20 156.6 20H172.4C185.4 20 196 32 196 47C196 53.8 193.8 59.8 190.2000000000001 64.6C199.8000000000001 68 207 78.2 207 90.4C207 98.6 203.8 106 198.6 111C206 115.6 211.2000000000001 124.4 211.2000000000001 134.8C211.2000000000001 146.2 205 155.8 196.4 159.8L209 160H290C306.6 160 320 173.4 320 190S306.6 220 290 220z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="hand-right"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-hand-right`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="hand-right" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HandRight: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="hand-right" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M290 220H157.8C166 231.6 182 251 183.8 269.4C186.8 300.6 162.4 305.8 157.4 294.4C144 263.6 103.8 234.6 78.4 220.4C39 202.2 0 198.6 0 122.8C0 81 12.2 54.2 42.4 38.4C67.2 25.4 104.2 20 156.6 20H172.4C185.4 20 196 32 196 47C196 53.8 193.8 59.8 190.2000000000001 64.6C199.8000000000001 68 207 78.2 207 90.4C207 98.6 203.8 106 198.6 111C206 115.6 211.2000000000001 124.4 211.2000000000001 134.8C211.2000000000001 146.2 205 155.8 196.4 159.8L209 160H290C306.6 160 320 173.4 320 190S306.6 220 290 220z"
+                        : "M400 230C400 246.6 386.6 260 370 260H205.2L191.8 260.2C211.4 277.2 227 298.6 229.6 325C233.2 360.8 203 366.6 196.6 353.6C179.8 318.4 129.6 285.4 98 269C48.6 248.2 0 244.2 0 157.4C0 109.8 15.2 79 53 60.9999999999999C84 46.2 109.6 40 195.8 40H215.6C232 40 245.2 53.8 245.2 70.8C245.2 78.4 242.4 85.4 238 90.8C250 94.6 259 106.4 259 120.2C259 129.6 255.0000000000001 138 248.6 143.6C258.0000000000001 148.8 264.4000000000001 159 264.4000000000001 170.8C264.4000000000001 183.8 256.6 194.8 245.8000000000001 199.4L261.2 200H370C379.6 200 388.2 204.6 393.6 211.8C397.4000000000001 216 400 221.6 400 228.8C400 229 400 229.2 400 229.4C400 229.6 400 229.8 400 230z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HandRight.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HandRight.displayName = `Blueprint5.Icon.HandRight`;
 export default HandRight;

package/src/generated/components/hand-up.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const HandUp: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M329.2000000000001 245.2C321.6 245.2 314.6 242.4 309.2000000000001 238C305.4000000000001 250 293.6 259 279.8 259C270.4 259 262 255 256.4 248.6C251.2 258 241 264.4 229.2 264.4C216.2 264.4 205.2000000000001 256.6 200.6 245.8L200 261.2V370C200 379.6 195.4 388.2 188.2 393.6C184 397.4 178.4 400 171.2 400C171 400 170.8 400 170.6 400C170.4 400 170.2 400 170 400C153.4 400 140 386.6 140 370V205.2L139.8 191.8C123 211.4 101.4 227 75 229.6C39.2 233.2 33.4 203 46.4 196.6C81.8 179.8 114.6 129.6 131 97.8C152 48.4 156 -0.1999999999999 242.6 -0.1999999999999C290.2000000000001 -0.1999999999999 321 15.0000000000001 339.0000000000001 52.8C353.8 84 360 109.6 360 195.8V215.6C360 231.8 346.2 245.2 329.2000000000001 245.2z"
-                    : "M273 196.2C266.2 196.2 260.2 194 255.4 190.4C252 200 241.8 207.2 229.6 207.2C221.4 207.2 214 204 209 198.8C204.4 206.2 195.6 211.4 185.2000000000001 211.4C173.8 211.4 164.2 205.2 160.2000000000001 196.6L160 209V290C160 306.6 146.6 320 130 320S100 306.6 100 290V157.8C88.4 166 69 182 50.4 183.8C19.2 186.6 14 162.4 25.6 157.4C56.4 144 85.4 103.8 99.6 78.4C117.8 39 121.4 0 197.2 0C239 0 265.8 12.2 281.6 42.4C294.4000000000001 67.2 300 104.2 300 156.6V172.4C300 185.4 288 196.2 273 196.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="hand-up"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-hand-up`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="hand-up" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HandUp: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="hand-up" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M273 196.2C266.2 196.2 260.2 194 255.4 190.4C252 200 241.8 207.2 229.6 207.2C221.4 207.2 214 204 209 198.8C204.4 206.2 195.6 211.4 185.2000000000001 211.4C173.8 211.4 164.2 205.2 160.2000000000001 196.6L160 209V290C160 306.6 146.6 320 130 320S100 306.6 100 290V157.8C88.4 166 69 182 50.4 183.8C19.2 186.6 14 162.4 25.6 157.4C56.4 144 85.4 103.8 99.6 78.4C117.8 39 121.4 0 197.2 0C239 0 265.8 12.2 281.6 42.4C294.4000000000001 67.2 300 104.2 300 156.6V172.4C300 185.4 288 196.2 273 196.2z"
+                        : "M329.2000000000001 245.2C321.6 245.2 314.6 242.4 309.2000000000001 238C305.4000000000001 250 293.6 259 279.8 259C270.4 259 262 255 256.4 248.6C251.2 258 241 264.4 229.2 264.4C216.2 264.4 205.2000000000001 256.6 200.6 245.8L200 261.2V370C200 379.6 195.4 388.2 188.2 393.6C184 397.4 178.4 400 171.2 400C171 400 170.8 400 170.6 400C170.4 400 170.2 400 170 400C153.4 400 140 386.6 140 370V205.2L139.8 191.8C123 211.4 101.4 227 75 229.6C39.2 233.2 33.4 203 46.4 196.6C81.8 179.8 114.6 129.6 131 97.8C152 48.4 156 -0.1999999999999 242.6 -0.1999999999999C290.2000000000001 -0.1999999999999 321 15.0000000000001 339.0000000000001 52.8C353.8 84 360 109.6 360 195.8V215.6C360 231.8 346.2 245.2 329.2000000000001 245.2z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HandUp.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HandUp.displayName = `Blueprint5.Icon.HandUp`;
 export default HandUp;