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

package/src/generated/components/desktop.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 Desktop: 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
-                    ? "M380 400H20C9 400 0 391 0 380V120C0 109 9 100 20 100H133.4L123.4 40H100C89 40 80 31 80 20C80 9 89 0 100 0H300C311 0 320 9 320 20C320 31 311 40 300 40H276.6L266.6 100H380C391 100 400 109 400 120V380C400 391 391 400 380 400zM360 140H40V360H360V140z"
-                    : "M300 320H20C9 320 0 311 0 300V100C0 89 9 80 20 80H115L105 40H80C69 40 60 31 60 20C60 9 69 0 80 0H240C251 0 260 9 260 20C260 31 251 40 240 40H215L205 80H300C311 80 320 89 320 100V300C320 311 311 320 300 320zM280 120H40V280H280V120z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="desktop"
-                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}-desktop`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="desktop" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Desktop: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="desktop" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 320H20C9 320 0 311 0 300V100C0 89 9 80 20 80H115L105 40H80C69 40 60 31 60 20C60 9 69 0 80 0H240C251 0 260 9 260 20C260 31 251 40 240 40H215L205 80H300C311 80 320 89 320 100V300C320 311 311 320 300 320zM280 120H40V280H280V120z"
+                        : "M380 400H20C9 400 0 391 0 380V120C0 109 9 100 20 100H133.4L123.4 40H100C89 40 80 31 80 20C80 9 89 0 100 0H300C311 0 320 9 320 20C320 31 311 40 300 40H276.6L266.6 100H380C391 100 400 109 400 120V380C400 391 391 400 380 400zM360 140H40V360H360V140z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Desktop.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Desktop.displayName = `Blueprint5.Icon.Desktop`;
 export default Desktop;

package/src/generated/components/detection.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 Detection: 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 400C8.9543 400 0 391.0457 0 380V280C0 268.9544 8.9543 260 20 260C31.0456 260 40 268.9544 40 280V360H120C131.0456 360 140 368.9544 140 380C140 391.0457 131.0456 400 120 400H20zM0 20C0 8.954 8.9543 0 20 0H120C131.0456 0 140 8.954 140 20C140 31.046 131.0456 40 120 40H40V120C40 131.046 31.0456 140 20 140C8.9543 140 0 131.046 0 120V20zM380 0C391.046 0 400 8.954 400 20V120C400 131.046 391.046 140 380 140C368.954 140 360 131.046 360 120V40H280C268.954 40 260 31.046 260 20C260 8.954 268.954 0 280 0H380zM400 380C400 391.0457 391.046 400 380 400H280C268.954 400 260 391.0457 260 380C260 368.9544 268.954 360 280 360H360V280C360 268.9544 368.954 260 380 260C391.046 260 400 268.9544 400 280V380zM100 280C100 291.0456 108.9544 300 120 300H280C291.046 300 300 291.0456 300 280V120C300 108.954 291.046 100 280 100H120C108.9544 100 100 108.954 100 120V280zM140 140V260H260V140H140z"
-                    : "M20 320C8.9543 320 0 311.0457 0 300V220C0 208.9544 8.9543 200 20 200C31.0456 200 40 208.9544 40 220V280H100C111.0456 280 120 288.9544 120 300C120 311.0457 111.0456 320 100 320H20zM0 20C0 8.954 8.9543 0 20 0H100C111.0456 0 120 8.954 120 20C120 31.046 111.0456 40 100 40H40V100C40 111.046 31.0456 120 20 120C8.9543 120 0 111.046 0 100V20zM300 0C311.046 0 320 8.954 320 20V100C320 111.046 311.046 120 300 120C288.954 120 280 111.046 280 100V40H220C208.954 40 200 31.046 200 20C200 8.954 208.954 0 220 0H300zM320 300C320 311.0457 311.046 320 300 320H220C208.954 320 200 311.0457 200 300C200 288.9544 208.954 280 220 280H280V220C280 208.9544 288.954 200 300 200C311.046 200 320 208.9544 320 220V300zM80 220C80 231.0456 88.9544 240 100 240H220C231.046 240 240 231.0456 240 220V100C240 88.954 231.046 80 220 80H100C88.9544 80 80 88.954 80 100V220zM120 120V200H200V120H120z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="detection"
-                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}-detection`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="detection" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Detection: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="detection" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M20 320C8.9543 320 0 311.0457 0 300V220C0 208.9544 8.9543 200 20 200C31.0456 200 40 208.9544 40 220V280H100C111.0456 280 120 288.9544 120 300C120 311.0457 111.0456 320 100 320H20zM0 20C0 8.954 8.9543 0 20 0H100C111.0456 0 120 8.954 120 20C120 31.046 111.0456 40 100 40H40V100C40 111.046 31.0456 120 20 120C8.9543 120 0 111.046 0 100V20zM300 0C311.046 0 320 8.954 320 20V100C320 111.046 311.046 120 300 120C288.954 120 280 111.046 280 100V40H220C208.954 40 200 31.046 200 20C200 8.954 208.954 0 220 0H300zM320 300C320 311.0457 311.046 320 300 320H220C208.954 320 200 311.0457 200 300C200 288.9544 208.954 280 220 280H280V220C280 208.9544 288.954 200 300 200C311.046 200 320 208.9544 320 220V300zM80 220C80 231.0456 88.9544 240 100 240H220C231.046 240 240 231.0456 240 220V100C240 88.954 231.046 80 220 80H100C88.9544 80 80 88.954 80 100V220zM120 120V200H200V120H120z"
+                        : "M20 400C8.9543 400 0 391.0457 0 380V280C0 268.9544 8.9543 260 20 260C31.0456 260 40 268.9544 40 280V360H120C131.0456 360 140 368.9544 140 380C140 391.0457 131.0456 400 120 400H20zM0 20C0 8.954 8.9543 0 20 0H120C131.0456 0 140 8.954 140 20C140 31.046 131.0456 40 120 40H40V120C40 131.046 31.0456 140 20 140C8.9543 140 0 131.046 0 120V20zM380 0C391.046 0 400 8.954 400 20V120C400 131.046 391.046 140 380 140C368.954 140 360 131.046 360 120V40H280C268.954 40 260 31.046 260 20C260 8.954 268.954 0 280 0H380zM400 380C400 391.0457 391.046 400 380 400H280C268.954 400 260 391.0457 260 380C260 368.9544 268.954 360 280 360H360V280C360 268.9544 368.954 260 380 260C391.046 260 400 268.9544 400 280V380zM100 280C100 291.0456 108.9544 300 120 300H280C291.046 300 300 291.0456 300 280V120C300 108.954 291.046 100 280 100H120C108.9544 100 100 108.954 100 120V280zM140 140V260H260V140H140z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Detection.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Detection.displayName = `Blueprint5.Icon.Detection`;
 export default Detection;

package/src/generated/components/diagnosis.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 Diagnosis: 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
-                    ? "M80 360C91.045695 360 100 351.045695 100 340C100 329.7432832 92.2791962 321.2898568 82.3324226 320.1345546L80 320L80 220C80 198.912764 96.3175558 181.636698 117.0147532 180.109714L120 180C141.087236 180 158.3633024 196.317556 159.8902852 217.0147532L160 220L160 320C148.954305 320 140 328.954305 140 340C140 350.2567168 147.7208038 358.7101432 157.6675774 359.8654454L160 360L180 360C190.2567168 360 198.7101432 352.2791962 199.8654454 342.3324226L200 340L200 220C200 182.728696 174.5120448 151.41042 140.0152268 142.52427L140 140C140 106.862916 166.862915 80 200 80C242.843908 80 277.821578 113.67937 279.9020940000001 156.007194L280 160L280.003496 224.1589092C262.342582 231.873677 250 249.4954564 250 270C250 297.6142374 272.385762 320 300 320C327.614238 320 350 297.6142374 350 270C350 249.503235 337.666782 231.8870474 320.0166000000001 224.1676936L320 160C320 93.72583 266.2741700000001 40 200 40C146.224906 40 102.3636378 82.446134 100.0923902 135.662208L100 140L100.0077968 142.518344C66.7386466 151.077634 41.8432012 180.4994 40.0979062 216.0071932L40 220L40 340C40 350.2567168 47.7208038 358.7101432 57.6675774 359.8654454L60 360L80 360z"
-                    : "M64 300C75.045695 300 84 291.045695 84 280C84 269.7432832 76.2791962 261.2898568 66.3324226 260.1345546L64 260L60 260L60 200C60 178.912764 76.3175558 161.6366976 97.0147532 160.1097148L100 160C121.087236 160 138.3633024 176.3175558 139.8902852 197.0147532L140 200L140 260L136 260C125.7432832 260 117.2898568 267.7208038 116.1345546 277.6675774000001L116 280C116 290.2567168 123.7208038 298.7101432 133.6675774 299.8654454L136 300L160 300C170.2567168 300 178.7101432 292.2791962 179.8654454 282.3324226L180 280L180 200C180 162.6707978 154.4327974 131.3131358 119.8543998 122.4830216C119.8526456 122.4406944 119.8591538 122.3865914 119.8654454 122.3324226L120 120C120 86.862916 146.862915 60 180 60C211.953618 60 238.073218 84.9784 239.898146 116.474544L240 120L239.9834 164.1676936C222.333218 171.8870474 210 189.503235 210 210C210 237.6142374 232.385762 260 260 260C287.614238 260 310 237.6142374 310 210C310 189.4954564 297.657418 171.873677 279.996504 164.1589092L280 120C280 64.771526 235.228474 20 180 20C124.771525 20 80 64.771526 80 120C80 120.844835 80.052383 121.6774354 80.154078 122.4947304C46.8077766 130.9960002 21.8456228 160.450132 20.0979062 196.0071932L20 200L20 280C20 290.2567168 27.7208038 298.7101432 37.6675774 299.8654454L40 300L64 300z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="diagnosis"
-                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}-diagnosis`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="diagnosis" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Diagnosis: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="diagnosis" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M64 300C75.045695 300 84 291.045695 84 280C84 269.7432832 76.2791962 261.2898568 66.3324226 260.1345546L64 260L60 260L60 200C60 178.912764 76.3175558 161.6366976 97.0147532 160.1097148L100 160C121.087236 160 138.3633024 176.3175558 139.8902852 197.0147532L140 200L140 260L136 260C125.7432832 260 117.2898568 267.7208038 116.1345546 277.6675774000001L116 280C116 290.2567168 123.7208038 298.7101432 133.6675774 299.8654454L136 300L160 300C170.2567168 300 178.7101432 292.2791962 179.8654454 282.3324226L180 280L180 200C180 162.6707978 154.4327974 131.3131358 119.8543998 122.4830216C119.8526456 122.4406944 119.8591538 122.3865914 119.8654454 122.3324226L120 120C120 86.862916 146.862915 60 180 60C211.953618 60 238.073218 84.9784 239.898146 116.474544L240 120L239.9834 164.1676936C222.333218 171.8870474 210 189.503235 210 210C210 237.6142374 232.385762 260 260 260C287.614238 260 310 237.6142374 310 210C310 189.4954564 297.657418 171.873677 279.996504 164.1589092L280 120C280 64.771526 235.228474 20 180 20C124.771525 20 80 64.771526 80 120C80 120.844835 80.052383 121.6774354 80.154078 122.4947304C46.8077766 130.9960002 21.8456228 160.450132 20.0979062 196.0071932L20 200L20 280C20 290.2567168 27.7208038 298.7101432 37.6675774 299.8654454L40 300L64 300z"
+                        : "M80 360C91.045695 360 100 351.045695 100 340C100 329.7432832 92.2791962 321.2898568 82.3324226 320.1345546L80 320L80 220C80 198.912764 96.3175558 181.636698 117.0147532 180.109714L120 180C141.087236 180 158.3633024 196.317556 159.8902852 217.0147532L160 220L160 320C148.954305 320 140 328.954305 140 340C140 350.2567168 147.7208038 358.7101432 157.6675774 359.8654454L160 360L180 360C190.2567168 360 198.7101432 352.2791962 199.8654454 342.3324226L200 340L200 220C200 182.728696 174.5120448 151.41042 140.0152268 142.52427L140 140C140 106.862916 166.862915 80 200 80C242.843908 80 277.821578 113.67937 279.9020940000001 156.007194L280 160L280.003496 224.1589092C262.342582 231.873677 250 249.4954564 250 270C250 297.6142374 272.385762 320 300 320C327.614238 320 350 297.6142374 350 270C350 249.503235 337.666782 231.8870474 320.0166000000001 224.1676936L320 160C320 93.72583 266.2741700000001 40 200 40C146.224906 40 102.3636378 82.446134 100.0923902 135.662208L100 140L100.0077968 142.518344C66.7386466 151.077634 41.8432012 180.4994 40.0979062 216.0071932L40 220L40 340C40 350.2567168 47.7208038 358.7101432 57.6675774 359.8654454L60 360L80 360z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Diagnosis.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Diagnosis.displayName = `Blueprint5.Icon.Diagnosis`;
 export default Diagnosis;

package/src/generated/components/diagram-tree.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 DiagramTree: 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
-                    ? "M380 200L380 100L340 100L340 180L220 180L220 100L180 100L180 180L60 180L60 100L20 100L20 200C20 211.045695 28.954305 220 40 220L180 220L180 300L220 300L220 220L360 220C371.0456940000001 220 380 211.045695 380 200zM20 80L60 80C71.045695 80 80 71.045694 80 60L80 20C80 8.954306 71.045695 0 60 0L20 0C8.954305 0 0 8.954306 0 20L0 60C0 71.045694 8.954305 80 20 80zM340 80L380 80C391.0456940000001 80 400 71.045694 400 60L400 20C400 8.954306 391.0456940000001 0 380 0L340 0C328.954306 0 320 8.954306 320 20L320 60C320 71.045694 328.954306 80 340 80zM180 80L220 80C231.045694 80 240 71.045694 240 60L240 20C240 8.954306 231.045694 0 220 0L180 0C168.954305 0 160 8.954306 160 20L160 60C160 71.045694 168.954305 80 180 80zM180 400L220 400C231.045694 400 240 391.045695 240 380L240 340C240 328.954305 231.045694 320 220 320L180 320C168.954305 320 160 328.954305 160 340L160 380C160 391.045695 168.954305 400 180 400z"
-                    : "M300 160L300 100L260 100L260 140L180 140L180 100L140 100L140 140L60 140L60 100L20 100L20 160C20 171.045695 28.954305 180 40 180L140 180L140 220L180 220L180 180L280 180C291.045694 180 300 171.045695 300 160zM20 80L60 80C71.045695 80 80 71.045694 80 60L80 20C80 8.954306 71.045695 0 60 0L20 0C8.954305 0 0 8.954306 0 20L0 60C0 71.045694 8.954305 80 20 80zM260 80L300 80C311.045694 80 320 71.045694 320 60L320 20C320 8.954306 311.045694 0 300 0L260 0C248.954306 0 240 8.954306 240 20L240 60C240 71.045694 248.954306 80 260 80zM140 80L180 80C191.045695 80 200 71.045694 200 60L200 20C200 8.954306 191.045695 0 180 0L140 0C128.954305 0 120 8.954306 120 20L120 60C120 71.045694 128.954305 80 140 80zM140 320L180 320C191.045695 320 200 311.045695 200 300L200 260C200 248.954305 191.045695 240 180 240L140 240C128.954305 240 120 248.954305 120 260L120 300C120 311.045695 128.954305 320 140 320z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="diagram-tree"
-                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}-diagram-tree`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="diagram-tree" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const DiagramTree: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="diagram-tree" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 160L300 100L260 100L260 140L180 140L180 100L140 100L140 140L60 140L60 100L20 100L20 160C20 171.045695 28.954305 180 40 180L140 180L140 220L180 220L180 180L280 180C291.045694 180 300 171.045695 300 160zM20 80L60 80C71.045695 80 80 71.045694 80 60L80 20C80 8.954306 71.045695 0 60 0L20 0C8.954305 0 0 8.954306 0 20L0 60C0 71.045694 8.954305 80 20 80zM260 80L300 80C311.045694 80 320 71.045694 320 60L320 20C320 8.954306 311.045694 0 300 0L260 0C248.954306 0 240 8.954306 240 20L240 60C240 71.045694 248.954306 80 260 80zM140 80L180 80C191.045695 80 200 71.045694 200 60L200 20C200 8.954306 191.045695 0 180 0L140 0C128.954305 0 120 8.954306 120 20L120 60C120 71.045694 128.954305 80 140 80zM140 320L180 320C191.045695 320 200 311.045695 200 300L200 260C200 248.954305 191.045695 240 180 240L140 240C128.954305 240 120 248.954305 120 260L120 300C120 311.045695 128.954305 320 140 320z"
+                        : "M380 200L380 100L340 100L340 180L220 180L220 100L180 100L180 180L60 180L60 100L20 100L20 200C20 211.045695 28.954305 220 40 220L180 220L180 300L220 300L220 220L360 220C371.0456940000001 220 380 211.045695 380 200zM20 80L60 80C71.045695 80 80 71.045694 80 60L80 20C80 8.954306 71.045695 0 60 0L20 0C8.954305 0 0 8.954306 0 20L0 60C0 71.045694 8.954305 80 20 80zM340 80L380 80C391.0456940000001 80 400 71.045694 400 60L400 20C400 8.954306 391.0456940000001 0 380 0L340 0C328.954306 0 320 8.954306 320 20L320 60C320 71.045694 328.954306 80 340 80zM180 80L220 80C231.045694 80 240 71.045694 240 60L240 20C240 8.954306 231.045694 0 220 0L180 0C168.954305 0 160 8.954306 160 20L160 60C160 71.045694 168.954305 80 180 80zM180 400L220 400C231.045694 400 240 391.045695 240 380L240 340C240 328.954305 231.045694 320 220 320L180 320C168.954305 320 160 328.954305 160 340L160 380C160 391.045695 168.954305 400 180 400z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+DiagramTree.defaultProps = {
+    size: IconSize.STANDARD,
+};
 DiagramTree.displayName = `Blueprint5.Icon.DiagramTree`;
 export default DiagramTree;

package/src/generated/components/direction-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 DirectionLeft: 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 339.6L0 199.6L400 59.6L300 199.6z"
-                    : "M320 280.2L0 160.2L320 40.2L240 160.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="direction-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}-direction-left`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="direction-left" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const DirectionLeft: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="direction-left" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M320 280.2L0 160.2L320 40.2L240 160.2z"
+                        : "M400 339.6L0 199.6L400 59.6L300 199.6z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+DirectionLeft.defaultProps = {
+    size: IconSize.STANDARD,
+};
 DirectionLeft.displayName = `Blueprint5.Icon.DirectionLeft`;
 export default DirectionLeft;

package/src/generated/components/direction-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 DirectionRight: 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 199.6L0 339.6L100 199.6L0 59.6z"
-                    : "M320 160.2L0 280.2L80 160.2L0 40.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="direction-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}-direction-right`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="direction-right" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const DirectionRight: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="direction-right" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M320 160.2L0 280.2L80 160.2L0 40.2z"
+                        : "M400 199.6L0 339.6L100 199.6L0 59.6z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+DirectionRight.defaultProps = {
+    size: IconSize.STANDARD,
+};
 DirectionRight.displayName = `Blueprint5.Icon.DirectionRight`;
 export default DirectionRight;