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

package/src/generated/components/layout-hierarchy.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 LayoutHierarchy: 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
-                    ? "M370 78.6V161.4C387.2 165.8 400 181.4 400 200C400 222 382 240 360 240C341.4 240 325.8 227.2 321.4 210H238.6C235 224 224 235 210 238.6V321.4C227.2 325.8 240 341.4 240 360C240 382 222 400 200 400S160 382 160 360C160 341.4 172.8 325.8 190 321.4V238.6C176 235 165 224 161.4 210H78.6C74.2 227.2 58.6 240 40 240C18 240 0 222 0 200C0 181.4 12.8 165.8 30 161.4V78.6C12.8 74.2000000000001 0 58.6 0 40C0 18 18 0 40 0S80 18 80 40C80 58.6 67.2 74.2000000000001 50 78.6V161.4C64 165 75 176 78.6 190H161.4C165 176 176 165 190 161.4V78.6C172.8 74.2000000000001 160 58.6 160 40C160 18 178 0 200 0S240 18 240 40C240 58.6 227.2 74.2000000000001 210 78.6V161.4C224 165 235 176 238.6 190H321.4C325 176 336 165 350 161.4V78.6C332.8 74.2000000000001 320 58.6 320 40C320 18 338 0 360 0S400 18 400 40C400 58.6 387.2 74.2000000000001 370 78.6z"
-                    : "M290 78.6V121.4C307.2 125.8 320 141.4 320 160C320 182 302 200 280 200C261.4 200 245.8 187.2 241.4 170H198.6C195 184 184 195 170 198.6V241.4C187.2 245.8 200 261.4 200 280C200 302 182 320 160 320S120 302 120 280C120 261.4 132.8 245.8 150 241.4V198.6C136 195 125 184 121.4 170H78.6C74.2 187.2 58.6 200 40 200C18 200 0 182 0 160C0 141.4 12.8 125.8 30 121.4V78.6C12.8 74.2 0 58.6 0 40C0 18 18 0 40 0S80 18 80 40C80 58.6 67.2 74.2 50 78.6V121.4C64 125 75 136 78.6 150H121.4C125 136 136 125 150 121.4V78.6C132.8 74.2 120 58.6 120 40C120 18 138 0 160 0S200 18 200 40C200 58.6 187.2 74.2 170 78.6V121.4C184 125 195 136 198.6 150H241.4C245 136 256 125 270 121.4V78.6C252.8 74.2 240 58.6 240 40C240 18 258 0 280 0S320 18 320 40C320 58.6 307.2 74.2 290 78.6z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="layout-hierarchy"
-                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}-layout-hierarchy`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="layout-hierarchy" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const LayoutHierarchy: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="layout-hierarchy" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M290 78.6V121.4C307.2 125.8 320 141.4 320 160C320 182 302 200 280 200C261.4 200 245.8 187.2 241.4 170H198.6C195 184 184 195 170 198.6V241.4C187.2 245.8 200 261.4 200 280C200 302 182 320 160 320S120 302 120 280C120 261.4 132.8 245.8 150 241.4V198.6C136 195 125 184 121.4 170H78.6C74.2 187.2 58.6 200 40 200C18 200 0 182 0 160C0 141.4 12.8 125.8 30 121.4V78.6C12.8 74.2 0 58.6 0 40C0 18 18 0 40 0S80 18 80 40C80 58.6 67.2 74.2 50 78.6V121.4C64 125 75 136 78.6 150H121.4C125 136 136 125 150 121.4V78.6C132.8 74.2 120 58.6 120 40C120 18 138 0 160 0S200 18 200 40C200 58.6 187.2 74.2 170 78.6V121.4C184 125 195 136 198.6 150H241.4C245 136 256 125 270 121.4V78.6C252.8 74.2 240 58.6 240 40C240 18 258 0 280 0S320 18 320 40C320 58.6 307.2 74.2 290 78.6z"
+                        : "M370 78.6V161.4C387.2 165.8 400 181.4 400 200C400 222 382 240 360 240C341.4 240 325.8 227.2 321.4 210H238.6C235 224 224 235 210 238.6V321.4C227.2 325.8 240 341.4 240 360C240 382 222 400 200 400S160 382 160 360C160 341.4 172.8 325.8 190 321.4V238.6C176 235 165 224 161.4 210H78.6C74.2 227.2 58.6 240 40 240C18 240 0 222 0 200C0 181.4 12.8 165.8 30 161.4V78.6C12.8 74.2000000000001 0 58.6 0 40C0 18 18 0 40 0S80 18 80 40C80 58.6 67.2 74.2000000000001 50 78.6V161.4C64 165 75 176 78.6 190H161.4C165 176 176 165 190 161.4V78.6C172.8 74.2000000000001 160 58.6 160 40C160 18 178 0 200 0S240 18 240 40C240 58.6 227.2 74.2000000000001 210 78.6V161.4C224 165 235 176 238.6 190H321.4C325 176 336 165 350 161.4V78.6C332.8 74.2000000000001 320 58.6 320 40C320 18 338 0 360 0S400 18 400 40C400 58.6 387.2 74.2000000000001 370 78.6z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+LayoutHierarchy.defaultProps = {
+    size: IconSize.STANDARD,
+};
 LayoutHierarchy.displayName = `Blueprint5.Icon.LayoutHierarchy`;
 export default LayoutHierarchy;

package/src/generated/components/layout-linear.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 LayoutLinear: 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
-                    ? "M330 260C305.8 260 285.6 242.8 281 220H239.0000000000001C234.4 242.8 214.2 260 190 260S145.6 242.8 141 220H99C94.4 242.8 74.2 260 50 260C22.4 260 0 237.6 0 210C0 182.4 22.4 160 50 160C74.2 160 94.4 177.2 99 200H141C145.6 177.2 165.8 160 190 160S234.4 177.2 239 200H281C285.6 177.2 305.8 160 330 160C357.6 160 380 182.4 380 210C380 237.6 357.6 260 330 260z"
-                    : "M280 200C261.4 200 245.8 187.2 241.4 170H198.6C194.2 187.2 178.6 200 160 200S125.8 187.2 121.4 170H78.6C74.2 187.2 58.6 200 40 200C18 200 0 182 0 160C0 138 18 120 40 120C58.6 120 74.2 132.8 78.6 150H121.2C125.8 132.8 141.4 120 160 120S194.2 132.8 198.6 150H241.2C245.6 132.8 261.2 120 279.8 120C301.8 120 319.8 138 319.8 160C320 182 302 200 280 200z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="layout-linear"
-                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}-layout-linear`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="layout-linear" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const LayoutLinear: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="layout-linear" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M280 200C261.4 200 245.8 187.2 241.4 170H198.6C194.2 187.2 178.6 200 160 200S125.8 187.2 121.4 170H78.6C74.2 187.2 58.6 200 40 200C18 200 0 182 0 160C0 138 18 120 40 120C58.6 120 74.2 132.8 78.6 150H121.2C125.8 132.8 141.4 120 160 120S194.2 132.8 198.6 150H241.2C245.6 132.8 261.2 120 279.8 120C301.8 120 319.8 138 319.8 160C320 182 302 200 280 200z"
+                        : "M330 260C305.8 260 285.6 242.8 281 220H239.0000000000001C234.4 242.8 214.2 260 190 260S145.6 242.8 141 220H99C94.4 242.8 74.2 260 50 260C22.4 260 0 237.6 0 210C0 182.4 22.4 160 50 160C74.2 160 94.4 177.2 99 200H141C145.6 177.2 165.8 160 190 160S234.4 177.2 239 200H281C285.6 177.2 305.8 160 330 160C357.6 160 380 182.4 380 210C380 237.6 357.6 260 330 260z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+LayoutLinear.defaultProps = {
+    size: IconSize.STANDARD,
+};
 LayoutLinear.displayName = `Blueprint5.Icon.LayoutLinear`;
 export default LayoutLinear;

package/src/generated/components/layout-skew-grid.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 LayoutSkewGrid: 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
-                    ? "M0 360A40 40 0 0 1 80 360A40 40 0 0 1 0 360M320 360A40 40 0 0 1 400 360A40 40 0 0 1 320 360M320 200A40 40 0 0 1 400 200A40 40 0 0 1 320 200M320 40A40 40 0 0 1 400 40A40 40 0 0 1 320 40M0 40A40 40 0 0 1 80 40A40 40 0 0 1 0 40M0 200A40 40 0 0 1 80 200A40 40 0 0 1 0 200M160 120A40 40 0 0 1 240 120A40 40 0 0 1 160 120M160 280A40 40 0 0 1 240 280A40 40 0 0 1 160 280"
-                    : "M40 200C18 200 0 182 0 160C0 138 18 120 40 120S80 138 80 160C80 182 62 200 40 200zM280 240C302 240 320 258 320 280S302 320 280 320S240 302 240 280S258 240 280 240zM40 80C18 80 0 62 0 40C0 18 18 0 40 0S80 18 80 40C80 62 62 80 40 80zM40 320C18 320 0 302 0 280S18 240 40 240S80 258 80 280S62 320 40 320zM160 140C138 140 120 122 120 100C120 78 138 60 160 60S200 78 200 100C200 122 182 140 160 140zM280 200C258 200 240 182 240 160C240 138 258 120 280 120S320 138 320 160C320 182 302 200 280 200zM160 260C138 260 120 242 120 220S138 180 160 180S200 198 200 220S182 260 160 260zM280 80C258 80 240 62 240 40C240 18 258 0 280 0S320 18 320 40C320 62 302 80 280 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="layout-skew-grid"
-                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}-layout-skew-grid`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="layout-skew-grid" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const LayoutSkewGrid: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="layout-skew-grid" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M40 200C18 200 0 182 0 160C0 138 18 120 40 120S80 138 80 160C80 182 62 200 40 200zM280 240C302 240 320 258 320 280S302 320 280 320S240 302 240 280S258 240 280 240zM40 80C18 80 0 62 0 40C0 18 18 0 40 0S80 18 80 40C80 62 62 80 40 80zM40 320C18 320 0 302 0 280S18 240 40 240S80 258 80 280S62 320 40 320zM160 140C138 140 120 122 120 100C120 78 138 60 160 60S200 78 200 100C200 122 182 140 160 140zM280 200C258 200 240 182 240 160C240 138 258 120 280 120S320 138 320 160C320 182 302 200 280 200zM160 260C138 260 120 242 120 220S138 180 160 180S200 198 200 220S182 260 160 260zM280 80C258 80 240 62 240 40C240 18 258 0 280 0S320 18 320 40C320 62 302 80 280 80z"
+                        : "M0 360A40 40 0 0 1 80 360A40 40 0 0 1 0 360M320 360A40 40 0 0 1 400 360A40 40 0 0 1 320 360M320 200A40 40 0 0 1 400 200A40 40 0 0 1 320 200M320 40A40 40 0 0 1 400 40A40 40 0 0 1 320 40M0 40A40 40 0 0 1 80 40A40 40 0 0 1 0 40M0 200A40 40 0 0 1 80 200A40 40 0 0 1 0 200M160 120A40 40 0 0 1 240 120A40 40 0 0 1 160 120M160 280A40 40 0 0 1 240 280A40 40 0 0 1 160 280"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+LayoutSkewGrid.defaultProps = {
+    size: IconSize.STANDARD,
+};
 LayoutSkewGrid.displayName = `Blueprint5.Icon.LayoutSkewGrid`;
 export default LayoutSkewGrid;

package/src/generated/components/layout-sorted-clusters.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 LayoutSortedClusters: 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 240C18 240 0 222 0 200S18 160 40 160S80 178 80 200S62 240 40 240zM40 80C18 80 0 62 0 40S18 0 40 0S80 18 80 40S62 80 40 80zM40 400C18 400 0 382 0 360S18 320 40 320S80 338 80 360S62 400 40 400zM360 240C338 240 320 222 320 200S338 160 360 160S400 178 400 200S382 240 360 240zM200 160C178 160 160 142 160 120S178 80 200 80S240 98 240 120S222 160 200 160zM200 320C178 320 160 302 160 280S178 240 200 240S240 258 240 280S222 320 200 320z"
-                    : "M40 200C18 200 0 182 0 160S18 120 40 120S80 138 80 160S62 200 40 200zM40 80C18 80 0 62 0 40S18 0 40 0S80 18 80 40S62 80 40 80zM40 320C18 320 0 302 0 280S18 240 40 240S80 258 80 280S62 320 40 320zM280 200C258 200 240 182 240 160S258 120 280 120S320 138 320 160S302 200 280 200zM160 140C138 140 120 122 120 100S138 60 160 60S200 78 200 100S182 140 160 140zM160 260C138 260 120 242 120 220S138 180 160 180S200 198 200 220S182 260 160 260z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="layout-sorted-clusters"
-                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}-layout-sorted-clusters`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="layout-sorted-clusters" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const LayoutSortedClusters: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="layout-sorted-clusters" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M40 200C18 200 0 182 0 160S18 120 40 120S80 138 80 160S62 200 40 200zM40 80C18 80 0 62 0 40S18 0 40 0S80 18 80 40S62 80 40 80zM40 320C18 320 0 302 0 280S18 240 40 240S80 258 80 280S62 320 40 320zM280 200C258 200 240 182 240 160S258 120 280 120S320 138 320 160S302 200 280 200zM160 140C138 140 120 122 120 100S138 60 160 60S200 78 200 100S182 140 160 140zM160 260C138 260 120 242 120 220S138 180 160 180S200 198 200 220S182 260 160 260z"
+                        : "M40 240C18 240 0 222 0 200S18 160 40 160S80 178 80 200S62 240 40 240zM40 80C18 80 0 62 0 40S18 0 40 0S80 18 80 40S62 80 40 80zM40 400C18 400 0 382 0 360S18 320 40 320S80 338 80 360S62 400 40 400zM360 240C338 240 320 222 320 200S338 160 360 160S400 178 400 200S382 240 360 240zM200 160C178 160 160 142 160 120S178 80 200 80S240 98 240 120S222 160 200 160zM200 320C178 320 160 302 160 280S178 240 200 240S240 258 240 280S222 320 200 320z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+LayoutSortedClusters.defaultProps = {
+    size: IconSize.STANDARD,
+};
 LayoutSortedClusters.displayName = `Blueprint5.Icon.LayoutSortedClusters`;
 export default LayoutSortedClusters;

package/src/generated/components/layout.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 Layout: 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
-                    ? "M360 280C338 280 320 262 320 240C320 232.6 322.2 225.8 325.6 219.8L280.2000000000001 174.4C274.2000000000001 177.8 267.4 180 260 180C241.4 180 225.8 167.2 221.4 150H178.6C174.2 167.2 158.6 180 140 180C132.6 180 125.8 177.8 119.8 174.4L74.4 219.8C77.8 225.8 80 232.6 80 240C80 246.8 78.2 253.2 75.2 258.8L148.4 326.4C154.6 322.4 162 320 170 320C192 320 210 338 210 360C210 382 192 400 170 400S130 382 130 360C130 353.2 131.8 346.8 134.8 341.2L61.6 273.6C55.4 277.6 48 280 40 280C18 280 0 262 0 240C0 218 18 200 40 200C47.4 200 54.2 202.2 60.2 205.6L105.6 160.2C102.2 154.2 100 147.4 100 140S102.2 125.8 105.6 119.8L60.2 74.4C54.2 77.8 47.4 80 40 80C18 80 0 62 0 40C0 18 18 0 40 0S80 18 80 40C80 47.4 77.8 54.2 74.4 60.2000000000001L119.8 105.6C125.8 102.2 132.6 100 140 100C158.6 100 174.2 112.8 178.6 130H221.4C225.8 112.8 241.4 100 260 100C282 100 300 118 300 140C300 147.4 297.8 154.2 294.4000000000001 160.2L339.8000000000001 205.6C345.8 202.2 352.6 200 360 200C382 200 400 218 400 240C400 262 382 280 360 280z"
-                    : "M280 240C258 240 240 222 240 200C240 190.6 243.4 182 248.8 175.2L235.2 157C230.6 159 225.4 160 220 160C201.4 160 185.8 147.2 181.4 130H158.6C154.2 147.2 138.6 160 120 160C110.6 160 102 156.6 95.2 151.2L77 164.8C79 169.4 80 174.6 80 180C80 187.4 77.8 194.2 74.4 200.2L119.8 245.6C125.8 242.2 132.6 240 140 240C162 240 180 258 180 280C180 302 162 320 140 320S100 302 100 280C100 272.6 102.2 265.8 105.6 259.8L60.2 214.4C54.2 217.8 47.4 220 40 220C18 220 0 202 0 180C0 158 18 140 40 140C49.4 140 58 143.4 64.8 148.8L83 135.2C81 130.6 80 125.4 80 120C80 112.6 82.2 105.8 85.6 99.8L60.2 74.4C54.2 77.8 47.4 80 40 80C18 80 0 62 0 40C0 18 18 0 40 0S80 18 80 40C80 47.4 77.8 54.2 74.4 60.2L99.8 85.6C105.8 82.2 112.6 80 120 80C138.6 80 154.2 92.8 158.6 110H181.4C185.8 92.8 201.4 80 220 80C242 80 260 98 260 120C260 129.4 256.6 138 251.2 144.8L264.8 163C269.4000000000001 161 274.6 160 280 160C302 160 320 178 320 200C320 222 302 240 280 240z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="layout"
-                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}-layout`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="layout" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Layout: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="layout" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M280 240C258 240 240 222 240 200C240 190.6 243.4 182 248.8 175.2L235.2 157C230.6 159 225.4 160 220 160C201.4 160 185.8 147.2 181.4 130H158.6C154.2 147.2 138.6 160 120 160C110.6 160 102 156.6 95.2 151.2L77 164.8C79 169.4 80 174.6 80 180C80 187.4 77.8 194.2 74.4 200.2L119.8 245.6C125.8 242.2 132.6 240 140 240C162 240 180 258 180 280C180 302 162 320 140 320S100 302 100 280C100 272.6 102.2 265.8 105.6 259.8L60.2 214.4C54.2 217.8 47.4 220 40 220C18 220 0 202 0 180C0 158 18 140 40 140C49.4 140 58 143.4 64.8 148.8L83 135.2C81 130.6 80 125.4 80 120C80 112.6 82.2 105.8 85.6 99.8L60.2 74.4C54.2 77.8 47.4 80 40 80C18 80 0 62 0 40C0 18 18 0 40 0S80 18 80 40C80 47.4 77.8 54.2 74.4 60.2L99.8 85.6C105.8 82.2 112.6 80 120 80C138.6 80 154.2 92.8 158.6 110H181.4C185.8 92.8 201.4 80 220 80C242 80 260 98 260 120C260 129.4 256.6 138 251.2 144.8L264.8 163C269.4000000000001 161 274.6 160 280 160C302 160 320 178 320 200C320 222 302 240 280 240z"
+                        : "M360 280C338 280 320 262 320 240C320 232.6 322.2 225.8 325.6 219.8L280.2000000000001 174.4C274.2000000000001 177.8 267.4 180 260 180C241.4 180 225.8 167.2 221.4 150H178.6C174.2 167.2 158.6 180 140 180C132.6 180 125.8 177.8 119.8 174.4L74.4 219.8C77.8 225.8 80 232.6 80 240C80 246.8 78.2 253.2 75.2 258.8L148.4 326.4C154.6 322.4 162 320 170 320C192 320 210 338 210 360C210 382 192 400 170 400S130 382 130 360C130 353.2 131.8 346.8 134.8 341.2L61.6 273.6C55.4 277.6 48 280 40 280C18 280 0 262 0 240C0 218 18 200 40 200C47.4 200 54.2 202.2 60.2 205.6L105.6 160.2C102.2 154.2 100 147.4 100 140S102.2 125.8 105.6 119.8L60.2 74.4C54.2 77.8 47.4 80 40 80C18 80 0 62 0 40C0 18 18 0 40 0S80 18 80 40C80 47.4 77.8 54.2 74.4 60.2000000000001L119.8 105.6C125.8 102.2 132.6 100 140 100C158.6 100 174.2 112.8 178.6 130H221.4C225.8 112.8 241.4 100 260 100C282 100 300 118 300 140C300 147.4 297.8 154.2 294.4000000000001 160.2L339.8000000000001 205.6C345.8 202.2 352.6 200 360 200C382 200 400 218 400 240C400 262 382 280 360 280z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Layout.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Layout.displayName = `Blueprint5.Icon.Layout`;
 export default Layout;

package/src/generated/components/learning.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 Learning: 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
-                    ? "M211.025884 377.45145018C204.327718 380.849516608 195.6695552 380.849516608 188.975025 377.45145018L9.12816108 282.2228476C-3.04272036 276.0424908 -3.04272036 263.9560918 9.12816108 257.7785596L188.975025 162.542216C195.6695552 159.14415 204.327718 159.14415 211.025884 162.542216L390.8691120000001 257.7785596C403.04363 263.9560918 403.04363 276.0424908 390.8691120000001 282.2228476L211.025884 377.45145018zM360 269.9968334L360.32922 179.716092C360.369136 168.76966 369.254204 159.916934 380.20071 159.916934C391.135556 159.916934 400 168.781378 400 179.716224L400 269.9968334L400 269.9968334L360 269.9968334zM67.3226902 199.3374188L195.3493856 132.177958C198.2574554 130.65246 201.729166 130.651974 204.637664 132.176656L332.760378 199.3406872C335.206126 200.622788 338.2281420000001 199.6794664 339.510244 197.2337192C339.885692 196.5175094 340.081826 195.7209226 340.081826 194.9122704L340.081826 92.739564C340.081826 90.841804 339.00745 89.107626 337.308208 88.262598L204.493676 22.214346C201.689 20.819588 198.3928272 20.819588 195.5881508 22.214346L62.7736186 88.262598C61.074377 89.107626 60 90.841804 60 92.739564L60 194.909653C60 197.6710768 62.2385762 199.909653 65 199.909653C65.8091264 199.909653 66.606166 199.7132888 67.3226902 199.3374188z"
-                    : "M168.8207072 297.91480954C163.462174 300.69506349 156.5356442 300.69506349 151.18002 297.91480954L7.30252886 220C-2.43417628 214.943312 -2.43417628 205.0543768 7.30252886 200L151.18002 122.0788574C156.5356442 119.2986034 163.462174 119.2986034 168.8207072 122.0788574L312.69529 200C322.434904 205.0543768 322.434904 214.943312 312.69529 220L168.8207072 297.91480954zM280 209.9968334L280.32922 119.7160926C280.369136 108.7696596 289.254204 99.916934 300.20071 99.916934C311.135556 99.916934 320 108.781378 320 119.7162242L320 209.9968334L320 209.9968334L280 209.9968334zM67.4240658 139.0634448L155.160337 90.429972C158.1753504 88.758708 161.8385762 88.758178 164.8540724 90.428572L252.659026 139.0669492C255.074602 140.4050258 258.11754 139.531539 259.455616 137.115962C259.8663420000001 136.3744958 260.0818260000001 135.5407846 260.0818260000001 134.6931602L260.0818260000001 75.591454C260.0818260000001 73.733896 259.052044 72.029446 257.4077000000001 71.165358L164.6926586 22.44445C161.7803086 20.914036 158.3015184 20.914036 155.3891684 22.44445L62.6741274 71.165358C61.0297826 72.029446 60 73.733896 60 75.591454L60 134.6903562C60 137.4517798 62.2385762 139.6903562 65 139.6903562C65.848114 139.6903562 66.6822902 139.4746216 67.4240658 139.0634448z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="learning"
-                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}-learning`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="learning" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Learning: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="learning" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M168.8207072 297.91480954C163.462174 300.69506349 156.5356442 300.69506349 151.18002 297.91480954L7.30252886 220C-2.43417628 214.943312 -2.43417628 205.0543768 7.30252886 200L151.18002 122.0788574C156.5356442 119.2986034 163.462174 119.2986034 168.8207072 122.0788574L312.69529 200C322.434904 205.0543768 322.434904 214.943312 312.69529 220L168.8207072 297.91480954zM280 209.9968334L280.32922 119.7160926C280.369136 108.7696596 289.254204 99.916934 300.20071 99.916934C311.135556 99.916934 320 108.781378 320 119.7162242L320 209.9968334L320 209.9968334L280 209.9968334zM67.4240658 139.0634448L155.160337 90.429972C158.1753504 88.758708 161.8385762 88.758178 164.8540724 90.428572L252.659026 139.0669492C255.074602 140.4050258 258.11754 139.531539 259.455616 137.115962C259.8663420000001 136.3744958 260.0818260000001 135.5407846 260.0818260000001 134.6931602L260.0818260000001 75.591454C260.0818260000001 73.733896 259.052044 72.029446 257.4077000000001 71.165358L164.6926586 22.44445C161.7803086 20.914036 158.3015184 20.914036 155.3891684 22.44445L62.6741274 71.165358C61.0297826 72.029446 60 73.733896 60 75.591454L60 134.6903562C60 137.4517798 62.2385762 139.6903562 65 139.6903562C65.848114 139.6903562 66.6822902 139.4746216 67.4240658 139.0634448z"
+                        : "M211.025884 377.45145018C204.327718 380.849516608 195.6695552 380.849516608 188.975025 377.45145018L9.12816108 282.2228476C-3.04272036 276.0424908 -3.04272036 263.9560918 9.12816108 257.7785596L188.975025 162.542216C195.6695552 159.14415 204.327718 159.14415 211.025884 162.542216L390.8691120000001 257.7785596C403.04363 263.9560918 403.04363 276.0424908 390.8691120000001 282.2228476L211.025884 377.45145018zM360 269.9968334L360.32922 179.716092C360.369136 168.76966 369.254204 159.916934 380.20071 159.916934C391.135556 159.916934 400 168.781378 400 179.716224L400 269.9968334L400 269.9968334L360 269.9968334zM67.3226902 199.3374188L195.3493856 132.177958C198.2574554 130.65246 201.729166 130.651974 204.637664 132.176656L332.760378 199.3406872C335.206126 200.622788 338.2281420000001 199.6794664 339.510244 197.2337192C339.885692 196.5175094 340.081826 195.7209226 340.081826 194.9122704L340.081826 92.739564C340.081826 90.841804 339.00745 89.107626 337.308208 88.262598L204.493676 22.214346C201.689 20.819588 198.3928272 20.819588 195.5881508 22.214346L62.7736186 88.262598C61.074377 89.107626 60 90.841804 60 92.739564L60 194.909653C60 197.6710768 62.2385762 199.909653 65 199.909653C65.8091264 199.909653 66.606166 199.7132888 67.3226902 199.3374188z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Learning.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Learning.displayName = `Blueprint5.Icon.Learning`;
 export default Learning;