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

package/src/generated/components/horizontal-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 { SVGIconContainer } from "../../svgIconContainer";
 
-export const HorizontalBarChart: 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
-                    ? "M20 380C9 380 0 371 0 360V40C0 29 9 20 20 20S40 29 40 40V360C40 371 31 380 20 380zM80 280H300C311 280 320 289 320 300V340C320 351 311 360 300 360H80C69 360 60 351 60 340V300C60 289 69 280 80 280zM240 120H80C69 120 60 111 60 100V60C60 49 69 40 80 40H240C251 40 260 49 260 60V100C260 111 251 120 240 120zM380 240H80C69 240 60 231 60 220V180C60 169 69 160 80 160H380C391 160 400 169 400 180V220C400 231 391 240 380 240z"
-                    : "M80 220H220C231 220 240 229 240 240V260C240 271 231 280 220 280H80C69 280 60 271 60 260V240C60 229 69 220 80 220zM20 300C9 300 0 291 0 280V20C0 9 9 0 20 0S40 9 40 20V280C40 291 31 300 20 300zM300 180H80C69 180 60 171 60 160V140C60 129 69 120 80 120H300C311 120 320 129 320 140V160C320 171 311 180 300 180zM180 80H80C69 80 60 71 60 60V40C60 29 69 20 80 20H180C191 20 200 29 200 40V60C200 71 191 80 180 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="horizontal-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}-horizontal-bar-chart`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="horizontal-bar-chart" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HorizontalBarChart: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="horizontal-bar-chart" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M80 220H220C231 220 240 229 240 240V260C240 271 231 280 220 280H80C69 280 60 271 60 260V240C60 229 69 220 80 220zM20 300C9 300 0 291 0 280V20C0 9 9 0 20 0S40 9 40 20V280C40 291 31 300 20 300zM300 180H80C69 180 60 171 60 160V140C60 129 69 120 80 120H300C311 120 320 129 320 140V160C320 171 311 180 300 180zM180 80H80C69 80 60 71 60 60V40C60 29 69 20 80 20H180C191 20 200 29 200 40V60C200 71 191 80 180 80z"
+                        : "M20 380C9 380 0 371 0 360V40C0 29 9 20 20 20S40 29 40 40V360C40 371 31 380 20 380zM80 280H300C311 280 320 289 320 300V340C320 351 311 360 300 360H80C69 360 60 351 60 340V300C60 289 69 280 80 280zM240 120H80C69 120 60 111 60 100V60C60 49 69 40 80 40H240C251 40 260 49 260 60V100C260 111 251 120 240 120zM380 240H80C69 240 60 231 60 220V180C60 169 69 160 80 160H380C391 160 400 169 400 180V220C400 231 391 240 380 240z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HorizontalBarChart.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HorizontalBarChart.displayName = `Blueprint5.Icon.HorizontalBarChart`;
 export default HorizontalBarChart;

package/src/generated/components/horizontal-distribution.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 { SVGIconContainer } from "../../svgIconContainer";
 
-export const HorizontalDistribution: 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 360H160C149 360 140 351 140 340V60C140 49 149 40 160 40H240C251 40 260 49 260 60V340C260 351 251 360 240 360zM20 400C9 400 0 391 0 380V20C0 9 9 0 20 0S40 9 40 20V380C40 391 31 400 20 400zM380 400C369 400 360 391 360 380V20C360 9 369 0 380 0S400 9 400 20V380C400 391 391 400 380 400z"
-                    : "M40 320C29 320 20 311 20 300V20C20 9 29 0 40 0S60 9 60 20V300C60 311 51 320 40 320zM300 320C289 320 280 311 280 300V20C280 9 289 0 300 0S320 9 320 20V300C320 311 311 320 300 320zM200 280H140C129 280 120 271 120 260V80C120 69 129 60 140 60H200C211 60 220 69 220 80V260C220 271 211 280 200 280z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="horizontal-distribution"
-                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}-horizontal-distribution`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="horizontal-distribution" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HorizontalDistribution: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="horizontal-distribution" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M40 320C29 320 20 311 20 300V20C20 9 29 0 40 0S60 9 60 20V300C60 311 51 320 40 320zM300 320C289 320 280 311 280 300V20C280 9 289 0 300 0S320 9 320 20V300C320 311 311 320 300 320zM200 280H140C129 280 120 271 120 260V80C120 69 129 60 140 60H200C211 60 220 69 220 80V260C220 271 211 280 200 280z"
+                        : "M240 360H160C149 360 140 351 140 340V60C140 49 149 40 160 40H240C251 40 260 49 260 60V340C260 351 251 360 240 360zM20 400C9 400 0 391 0 380V20C0 9 9 0 20 0S40 9 40 20V380C40 391 31 400 20 400zM380 400C369 400 360 391 360 380V20C360 9 369 0 380 0S400 9 400 20V380C400 391 391 400 380 400z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HorizontalDistribution.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HorizontalDistribution.displayName = `Blueprint5.Icon.HorizontalDistribution`;
 export default HorizontalDistribution;

package/src/generated/components/horizontal-inbetween.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 { SVGIconContainer } from "../../svgIconContainer";
 
-export const HorizontalInbetween: 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
-                    ? "M225.852 125.852C233.654 118.05 246.3040000000001 118.05 254.106 125.852L313.354 185.1C313.624 185.342 313.888 185.592 314.148 185.852C318.054 189.758 320.006 194.88 320 200C320.006 205.12 318.054 210.2418 314.148 214.1482C313.888 214.4076 313.624 214.6582 313.354 214.9004L254.106 274.1482C246.3040000000001 281.9506 233.654 281.9506 225.852 274.1482C218.05 266.3458 218.05 253.6958 225.852 245.8934L271.7460000000001 200L225.852 154.106C218.05 146.304 218.05 133.654 225.852 125.852zM145.8934 125.852C153.6958 118.05 166.3458 118.05 174.1482 125.852C181.9506 133.654 181.9506 146.304 174.1482 154.106L128.2548 200L174.1482 245.8934C181.9506 253.6958 181.9506 266.3458 174.1482 274.1482C166.3458 281.9506 153.6958 281.9506 145.8934 274.1482L86.6456 214.9004C86.3758 214.6582 86.1112 214.4076 85.8518 214.1482C81.9454 210.2418 79.9948 205.12 80 200C79.9948 194.88 81.9454 189.758 85.8518 185.852C86.1112 185.592 86.3758 185.342 86.6456 185.1L145.8934 125.852zM0 0V400H20C31.0456 400 40 391.0457 40 380V20C40 8.954 31.0456 0 20 0H0zM400 0V400H380C368.954 400 360 391.0457 360 380V20C360 8.954 368.954 0 380 0H400z"
-                    : "M0 0V320H20C31.0456 320 40 311.0457 40 300V20C40 8.954 31.0456 0 20 0H0zM300 320H320V0H300C288.954 0 280 8.954 280 20V300C280 311.0457 288.954 320 300 320zM134.1416 185.8578C141.952 193.6684 141.952 206.3316 134.1416 214.1422C126.331 221.9526 113.6678 221.9526 105.8572 214.1422L65.8572 174.1422C58.0468 166.3316 58.0468 153.6684 65.8572 145.8578L105.8572 105.858C113.6678 98.048 126.331 98.048 134.1416 105.858C141.952 113.668 141.952 126.3316 134.1416 134.1422L108.2836 160L134.1416 185.8578zM214.142 214.1422C206.332 221.9526 193.6678 221.9526 185.8572 214.1422C178.0468 206.3316 178.0468 193.6684 185.8572 185.8578L211.716 160L185.8572 134.1422C178.0468 126.3316 178.0468 113.668 185.8572 105.858C193.6678 98.048 206.332 98.048 214.142 105.858L254.142 145.8578C261.952 153.6684 261.952 166.3316 254.142 174.1422L214.142 214.1422z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="horizontal-inbetween"
-                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}-horizontal-inbetween`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="horizontal-inbetween" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HorizontalInbetween: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="horizontal-inbetween" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M0 0V320H20C31.0456 320 40 311.0457 40 300V20C40 8.954 31.0456 0 20 0H0zM300 320H320V0H300C288.954 0 280 8.954 280 20V300C280 311.0457 288.954 320 300 320zM134.1416 185.8578C141.952 193.6684 141.952 206.3316 134.1416 214.1422C126.331 221.9526 113.6678 221.9526 105.8572 214.1422L65.8572 174.1422C58.0468 166.3316 58.0468 153.6684 65.8572 145.8578L105.8572 105.858C113.6678 98.048 126.331 98.048 134.1416 105.858C141.952 113.668 141.952 126.3316 134.1416 134.1422L108.2836 160L134.1416 185.8578zM214.142 214.1422C206.332 221.9526 193.6678 221.9526 185.8572 214.1422C178.0468 206.3316 178.0468 193.6684 185.8572 185.8578L211.716 160L185.8572 134.1422C178.0468 126.3316 178.0468 113.668 185.8572 105.858C193.6678 98.048 206.332 98.048 214.142 105.858L254.142 145.8578C261.952 153.6684 261.952 166.3316 254.142 174.1422L214.142 214.1422z"
+                        : "M225.852 125.852C233.654 118.05 246.3040000000001 118.05 254.106 125.852L313.354 185.1C313.624 185.342 313.888 185.592 314.148 185.852C318.054 189.758 320.006 194.88 320 200C320.006 205.12 318.054 210.2418 314.148 214.1482C313.888 214.4076 313.624 214.6582 313.354 214.9004L254.106 274.1482C246.3040000000001 281.9506 233.654 281.9506 225.852 274.1482C218.05 266.3458 218.05 253.6958 225.852 245.8934L271.7460000000001 200L225.852 154.106C218.05 146.304 218.05 133.654 225.852 125.852zM145.8934 125.852C153.6958 118.05 166.3458 118.05 174.1482 125.852C181.9506 133.654 181.9506 146.304 174.1482 154.106L128.2548 200L174.1482 245.8934C181.9506 253.6958 181.9506 266.3458 174.1482 274.1482C166.3458 281.9506 153.6958 281.9506 145.8934 274.1482L86.6456 214.9004C86.3758 214.6582 86.1112 214.4076 85.8518 214.1482C81.9454 210.2418 79.9948 205.12 80 200C79.9948 194.88 81.9454 189.758 85.8518 185.852C86.1112 185.592 86.3758 185.342 86.6456 185.1L145.8934 125.852zM0 0V400H20C31.0456 400 40 391.0457 40 380V20C40 8.954 31.0456 0 20 0H0zM400 0V400H380C368.954 400 360 391.0457 360 380V20C360 8.954 368.954 0 380 0H400z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HorizontalInbetween.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HorizontalInbetween.displayName = `Blueprint5.Icon.HorizontalInbetween`;
 export default HorizontalInbetween;

package/src/generated/components/hurricane.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 { SVGIconContainer } from "../../svgIconContainer";
 
-export const Hurricane: 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
-                    ? "M-0.000365426 120C32.9674 104.498 60.0002 100 80.0002 100C60.0002 120 40.0006 162.236 40.0006 200C40.0006 200.116 40.0002 200.2326 39.9998 200.3492C39.999 200.532 39.9984 200.7148 39.9994 200.8966C39.9994 296.6134 124.0262 380.00004 223.438 380C287.564 380 361.428 366.6552 400 280C367.034 295.502 340 300 320 300C340 280 360 237.7632 360 200L360 199.104C360 103.386 275.972 20 176.5616 20C112.436 20 38.571 33.3440000000001 -0.000365426 120zM199.9998 260C166.8628 260 139.9998 233.137 139.9998 200C139.9998 166.862 166.8626 140 199.9998 140C233.136 140 260 166.862 260 200C260 233.137 233.136 260 199.9998 260z"
-                    : "M70 80C52.8104 80 20 90 0 100C20 30 90.1246 20 140 20C217.32 20 280 82.68 280 160L279.886 160.085C279.962 161.83 280 163.5846 280 165.3482C280 193.492 270.312 219.3732 254.088 239.8378C272.004 238.511 301.49 229.2554 320 220C300 290 229.876 300 180 300C127.0704 300 81.0012 270.6272 57.2032 227.2926C46.2834 209.21 40 188.0128 40 165.3482C40 164.489 40.009 163.632 40.027 162.7772C40.009 161.8536 40 160.928 40 160L40.121 159.9092C41.5116 128.7372 54.7948 100.658 75.543 80.102C73.7118 80.034 71.864 80 70 80zM160 200C137.9086 200 120 182.0914 120 160C120 137.9086 137.9086 120 160 120C182.0914 120 200 137.9086 200 160C200 182.0914 182.0914 200 160 200z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="hurricane"
-                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}-hurricane`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="hurricane" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Hurricane: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="hurricane" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M70 80C52.8104 80 20 90 0 100C20 30 90.1246 20 140 20C217.32 20 280 82.68 280 160L279.886 160.085C279.962 161.83 280 163.5846 280 165.3482C280 193.492 270.312 219.3732 254.088 239.8378C272.004 238.511 301.49 229.2554 320 220C300 290 229.876 300 180 300C127.0704 300 81.0012 270.6272 57.2032 227.2926C46.2834 209.21 40 188.0128 40 165.3482C40 164.489 40.009 163.632 40.027 162.7772C40.009 161.8536 40 160.928 40 160L40.121 159.9092C41.5116 128.7372 54.7948 100.658 75.543 80.102C73.7118 80.034 71.864 80 70 80zM160 200C137.9086 200 120 182.0914 120 160C120 137.9086 137.9086 120 160 120C182.0914 120 200 137.9086 200 160C200 182.0914 182.0914 200 160 200z"
+                        : "M-0.000365426 120C32.9674 104.498 60.0002 100 80.0002 100C60.0002 120 40.0006 162.236 40.0006 200C40.0006 200.116 40.0002 200.2326 39.9998 200.3492C39.999 200.532 39.9984 200.7148 39.9994 200.8966C39.9994 296.6134 124.0262 380.00004 223.438 380C287.564 380 361.428 366.6552 400 280C367.034 295.502 340 300 320 300C340 280 360 237.7632 360 200L360 199.104C360 103.386 275.972 20 176.5616 20C112.436 20 38.571 33.3440000000001 -0.000365426 120zM199.9998 260C166.8628 260 139.9998 233.137 139.9998 200C139.9998 166.862 166.8626 140 199.9998 140C233.136 140 260 166.862 260 200C260 233.137 233.136 260 199.9998 260z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Hurricane.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Hurricane.displayName = `Blueprint5.Icon.Hurricane`;
 export default Hurricane;

package/src/generated/components/id-number.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 { SVGIconContainer } from "../../svgIconContainer";
 
-export const IdNumber: 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
-                    ? "M40 300V100H360V300H40zM40 340H360C382 340 400 322 400 300V100C400 78 382 60 360 60H40C18 60 0 78 0 100V300C0 322 18 340 40 340zM177.6 152.4C174.2 160.2 157.4 165.6 146.4 170.4C135.2 175.2 136.8 178.2 136.4 182.4C136.4 183 136.4 183.6 136.4 184.2C140.2 187.6 143.4 192.2 145.4 197.6C145.4 197.6 145.4 198 145.6 198C146 199.2 146.4 200.4 146.8 201.6C149.4 202.2 150.8 205 151.4 207.4C152 208.4 153.2 211 153 214C152.2 217.6 150.8 219.4 149 220V220.6C149 225.4 148.6 232.2 147.8 236.8C147.6 238 147.4 239.2 147 240.6C145.4 246 142 251 137.4 254.6C132.6 258.2 126 260 120 260S107.4 258.2 102.6 254.6C98 251.2 94.6 246.2 93 240.6C92.6 239.4 92.4 238 92.2 236.8C91.4 232.4 91 225.4 91 220.6V220C89.2 219.4 87.6 217.6 87.2 213.8C87 211 88.2 208.4 88.8 207.4C89.4 204.6 90.8 202 93.4 201.4C93.8 200.2 94 199 94.6 197.8C94.6 197.8 94.6 197.6 94.6 197.6L94.6 197.6C96.8 192.2 100 187.4 104 184C104 183.4 104 183 104 182.4C103.6 178.4 104.8 175.4 93.8 170.4C82.6 165.6 66 160.2 62.6 152.4C58.8 144.6 60.2 140 60.2 140H179.8C179.6 140 181 144.6 177.6 152.4L177.6 152.4zM240 260H320C331 260 340 251 340 240L340 240C340 229 331 220 320 220H240C229 220 220 229 220 240L220 240C220 251 229 260 240 260zM240 180H320C331 180 340 171 340 160L340 160C340 149 331 140 320 140H240C229 140 220 149 220 160L220 160C220 171 229 180 240 180z"
-                    : "M40 220V80H280V220H40zM40 260H280C302 260 320 242 320 220V80C320 58 302 40 280 40H40C18 40 0 58 0 80V220C0 242 18 260 40 260zM158 110.4C155.2 117 141.2 121.4 132 125.4C122.8 129.4 124 132 123.6 135.4C123.6 135.8 123.6 136.4 123.6 136.8C126.8 139.6 129.4 143.4 131 148C131 148 131 148.2 131.2 148.4C131.6 149.4 131.8 150.4 132.2 151.4C134.2 151.6 135.4 154 136 156C136.6 156.8 137.4 159 137.2 161.4C136.8 164.6 135.6 166.2 134.2 166.6V167.2C134.2 171.2 133.8 176.8 133.2 180.6C133 181.6 132.8 182.6 132.6 183.8C131.2 188.4 128.4 192.6 124.6 195.4C120.6 198.4 115 200 110 200S99.4 198.4 95.6 195.4C91.8 192.6 89 188.4 87.6 183.8C87.2 182.8 87 181.8 87 180.6C86 177 85.8 171.2 85.8 167.2V166.6C84.4 166 83 164.6 82.8 161.4C82.4 159 83.4 157 84 156C84.4 154 85.8 151.6 88 151.2C88.2 150.2 88.6 149.2 89 148.2C89 148.2 89 148 89 148L89 148C90.6 143.4 93.4 139.6 96.6 136.8C96.6 136.4 96.6 136 96.6 135.4C96.2 132 97.2 129.6 88 125.4C78.8 121.4 64.8 117 62 110.4S60.2 100 60.2 100H160C159.8 100 161 103.8 158 110.4L158 110.4zM200 200H240C251 200 260 191 260 180L260 180C260 169 251 160 240 160H200C189 160 180 169 180 180L180 180C180 191 189 200 200 200zM200 140H240C251 140 260 131 260 120L260 120C260 109 251 100 240 100H200C189 100 180 109 180 120L180 120C180 131 189 140 200 140z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="id-number"
-                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}-id-number`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="id-number" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const IdNumber: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="id-number" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M40 220V80H280V220H40zM40 260H280C302 260 320 242 320 220V80C320 58 302 40 280 40H40C18 40 0 58 0 80V220C0 242 18 260 40 260zM158 110.4C155.2 117 141.2 121.4 132 125.4C122.8 129.4 124 132 123.6 135.4C123.6 135.8 123.6 136.4 123.6 136.8C126.8 139.6 129.4 143.4 131 148C131 148 131 148.2 131.2 148.4C131.6 149.4 131.8 150.4 132.2 151.4C134.2 151.6 135.4 154 136 156C136.6 156.8 137.4 159 137.2 161.4C136.8 164.6 135.6 166.2 134.2 166.6V167.2C134.2 171.2 133.8 176.8 133.2 180.6C133 181.6 132.8 182.6 132.6 183.8C131.2 188.4 128.4 192.6 124.6 195.4C120.6 198.4 115 200 110 200S99.4 198.4 95.6 195.4C91.8 192.6 89 188.4 87.6 183.8C87.2 182.8 87 181.8 87 180.6C86 177 85.8 171.2 85.8 167.2V166.6C84.4 166 83 164.6 82.8 161.4C82.4 159 83.4 157 84 156C84.4 154 85.8 151.6 88 151.2C88.2 150.2 88.6 149.2 89 148.2C89 148.2 89 148 89 148L89 148C90.6 143.4 93.4 139.6 96.6 136.8C96.6 136.4 96.6 136 96.6 135.4C96.2 132 97.2 129.6 88 125.4C78.8 121.4 64.8 117 62 110.4S60.2 100 60.2 100H160C159.8 100 161 103.8 158 110.4L158 110.4zM200 200H240C251 200 260 191 260 180L260 180C260 169 251 160 240 160H200C189 160 180 169 180 180L180 180C180 191 189 200 200 200zM200 140H240C251 140 260 131 260 120L260 120C260 109 251 100 240 100H200C189 100 180 109 180 120L180 120C180 131 189 140 200 140z"
+                        : "M40 300V100H360V300H40zM40 340H360C382 340 400 322 400 300V100C400 78 382 60 360 60H40C18 60 0 78 0 100V300C0 322 18 340 40 340zM177.6 152.4C174.2 160.2 157.4 165.6 146.4 170.4C135.2 175.2 136.8 178.2 136.4 182.4C136.4 183 136.4 183.6 136.4 184.2C140.2 187.6 143.4 192.2 145.4 197.6C145.4 197.6 145.4 198 145.6 198C146 199.2 146.4 200.4 146.8 201.6C149.4 202.2 150.8 205 151.4 207.4C152 208.4 153.2 211 153 214C152.2 217.6 150.8 219.4 149 220V220.6C149 225.4 148.6 232.2 147.8 236.8C147.6 238 147.4 239.2 147 240.6C145.4 246 142 251 137.4 254.6C132.6 258.2 126 260 120 260S107.4 258.2 102.6 254.6C98 251.2 94.6 246.2 93 240.6C92.6 239.4 92.4 238 92.2 236.8C91.4 232.4 91 225.4 91 220.6V220C89.2 219.4 87.6 217.6 87.2 213.8C87 211 88.2 208.4 88.8 207.4C89.4 204.6 90.8 202 93.4 201.4C93.8 200.2 94 199 94.6 197.8C94.6 197.8 94.6 197.6 94.6 197.6L94.6 197.6C96.8 192.2 100 187.4 104 184C104 183.4 104 183 104 182.4C103.6 178.4 104.8 175.4 93.8 170.4C82.6 165.6 66 160.2 62.6 152.4C58.8 144.6 60.2 140 60.2 140H179.8C179.6 140 181 144.6 177.6 152.4L177.6 152.4zM240 260H320C331 260 340 251 340 240L340 240C340 229 331 220 320 220H240C229 220 220 229 220 240L220 240C220 251 229 260 240 260zM240 180H320C331 180 340 171 340 160L340 160C340 149 331 140 320 140H240C229 140 220 149 220 160L220 160C220 171 229 180 240 180z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+IdNumber.defaultProps = {
+    size: IconSize.STANDARD,
+};
 IdNumber.displayName = `Blueprint5.Icon.IdNumber`;
 export default IdNumber;

package/src/generated/components/image-rotate-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 { SVGIconContainer } from "../../svgIconContainer";
 
-export const ImageRotateLeft: 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
-                    ? "M210 140C226.6 140 240 153.4 240 170S226.6 200 210 200S180 186.6 180 170S193.4 140 210 140zM280 260H20C9 260 0 251 0 240V20C0 9 9 0 20 0H280C291 0 300 9 300 20V240C300 251 291 260 280 260zM260 60L160 120L140 80L100 160L40 70V220H260V60zM320 360H288.2L294 365.8C297.8 369.4 300 374.4 300 380C300 391 291 400 280 400C274.4000000000001 400 269.4000000000001 397.8 265.8 394.2L225.8 354.2C222.2 350.6 220 345.6 220 340C220 334.4 222.2 329.4 225.8 325.8L265.8 285.8C269.4000000000001 282.2 274.4000000000001 280 280 280C291 280 300 289 300 300C300 305.6 297.8 310.6 294.2000000000001 314.2L288.2 320H320C342 320 360 302 360 280V220C360 209 369 200 380 200S400 209 400 220V280C400 324.2 364.2000000000001 360 320 360z"
-                    : "M260 280H228.2L234 285.8C237.8 289.4 240 294.4 240 300C240 311 231 320 220 320C214.4 320 209.4 317.8 205.8 314.2L165.8 274.2C162.2 270.6 160 265.6 160 260C160 254.4 162.2 249.4 165.8 245.8L205.8 205.8C209.4 202.2 214.4 200 220 200C231 200 240 209 240 220C240 225.6 237.8 230.6 234.2 234.2L228.2 240H260C271 240 280 231 280 220V160C280 149 289 140 300 140S320 149 320 160V220C320 253.2 293.2 280 260 280zM150 100C155.6 100 160 104.4 160 110C160 115.6 155.6 120 150 120S140 115.6 140 110C140 104.4 144.4 100 150 100zM200 180H20C9 180 0 171 0 160V20C0 9 9 0 20 0H200C211 0 220 9 220 20V160C220 171 211 180 200 180zM180 53.4L140 80L120 60L80 120L40 66.6V140H180V53.4z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="image-rotate-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}-image-rotate-left`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="image-rotate-left" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const ImageRotateLeft: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="image-rotate-left" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M260 280H228.2L234 285.8C237.8 289.4 240 294.4 240 300C240 311 231 320 220 320C214.4 320 209.4 317.8 205.8 314.2L165.8 274.2C162.2 270.6 160 265.6 160 260C160 254.4 162.2 249.4 165.8 245.8L205.8 205.8C209.4 202.2 214.4 200 220 200C231 200 240 209 240 220C240 225.6 237.8 230.6 234.2 234.2L228.2 240H260C271 240 280 231 280 220V160C280 149 289 140 300 140S320 149 320 160V220C320 253.2 293.2 280 260 280zM150 100C155.6 100 160 104.4 160 110C160 115.6 155.6 120 150 120S140 115.6 140 110C140 104.4 144.4 100 150 100zM200 180H20C9 180 0 171 0 160V20C0 9 9 0 20 0H200C211 0 220 9 220 20V160C220 171 211 180 200 180zM180 53.4L140 80L120 60L80 120L40 66.6V140H180V53.4z"
+                        : "M210 140C226.6 140 240 153.4 240 170S226.6 200 210 200S180 186.6 180 170S193.4 140 210 140zM280 260H20C9 260 0 251 0 240V20C0 9 9 0 20 0H280C291 0 300 9 300 20V240C300 251 291 260 280 260zM260 60L160 120L140 80L100 160L40 70V220H260V60zM320 360H288.2L294 365.8C297.8 369.4 300 374.4 300 380C300 391 291 400 280 400C274.4000000000001 400 269.4000000000001 397.8 265.8 394.2L225.8 354.2C222.2 350.6 220 345.6 220 340C220 334.4 222.2 329.4 225.8 325.8L265.8 285.8C269.4000000000001 282.2 274.4000000000001 280 280 280C291 280 300 289 300 300C300 305.6 297.8 310.6 294.2000000000001 314.2L288.2 320H320C342 320 360 302 360 280V220C360 209 369 200 380 200S400 209 400 220V280C400 324.2 364.2000000000001 360 320 360z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+ImageRotateLeft.defaultProps = {
+    size: IconSize.STANDARD,
+};
 ImageRotateLeft.displayName = `Blueprint5.Icon.ImageRotateLeft`;
 export default ImageRotateLeft;