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

package/src/generated/components/align-center.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 AlignCenter: 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
-                    ? "M100 300C89 300 80 291 80 280C80 269 89 260 100 260H300C311 260 320 269 320 280C320 291 311 300 300 300H100zM20 340H380C391 340 400 349 400 360C400 371 391 380 380 380H20C9 380 0 371 0 360C0 349 9 340 20 340zM260 100C271 100 280 109 280 120C280 131 271 140 260 140H140C129 140 120 131 120 120C120 109 129 100 140 100H260zM340 60H60C49 60 40 51 40 40C40 29 49 20 60 20H340C351 20 360 29 360 40C360 51 351 60 340 60zM380 220H20C9 220 0 211 0 200C0 189 9 180 20 180H380C391 180 400 189 400 200C400 211 391 220 380 220z"
-                    : "M80 240C69 240 60 231 60 220C60 209 69 200 80 200H240C251 200 260 209 260 220C260 231 251 240 240 240H80zM20 260H300C311 260 320 269 320 280C320 291 311 300 300 300H20C9 300 0 291 0 280C0 269 9 260 20 260zM280 60H40C29 60 20 51 20 40C20 29 29 20 40 20H280C291 20 300 29 300 40C300 51 291 60 280 60zM300 180H20C9 180 0 171 0 160C0 149 9 140 20 140H300C311 140 320 149 320 160C320 171 311 180 300 180zM200 80C211 80 220 89 220 100C220 111 211 120 200 120H120C109 120 100 111 100 100C100 89 109 80 120 80H200z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="align-center"
-                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}-align-center`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="align-center" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignCenter: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="align-center" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M80 240C69 240 60 231 60 220C60 209 69 200 80 200H240C251 200 260 209 260 220C260 231 251 240 240 240H80zM20 260H300C311 260 320 269 320 280C320 291 311 300 300 300H20C9 300 0 291 0 280C0 269 9 260 20 260zM280 60H40C29 60 20 51 20 40C20 29 29 20 40 20H280C291 20 300 29 300 40C300 51 291 60 280 60zM300 180H20C9 180 0 171 0 160C0 149 9 140 20 140H300C311 140 320 149 320 160C320 171 311 180 300 180zM200 80C211 80 220 89 220 100C220 111 211 120 200 120H120C109 120 100 111 100 100C100 89 109 80 120 80H200z"
+                        : "M100 300C89 300 80 291 80 280C80 269 89 260 100 260H300C311 260 320 269 320 280C320 291 311 300 300 300H100zM20 340H380C391 340 400 349 400 360C400 371 391 380 380 380H20C9 380 0 371 0 360C0 349 9 340 20 340zM260 100C271 100 280 109 280 120C280 131 271 140 260 140H140C129 140 120 131 120 120C120 109 129 100 140 100H260zM340 60H60C49 60 40 51 40 40C40 29 49 20 60 20H340C351 20 360 29 360 40C360 51 351 60 340 60zM380 220H20C9 220 0 211 0 200C0 189 9 180 20 180H380C391 180 400 189 400 200C400 211 391 220 380 220z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignCenter.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignCenter.displayName = `Blueprint5.Icon.AlignCenter`;
 export default AlignCenter;

package/src/generated/components/align-justify.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 AlignJustify: 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 340H380C391 340 400 349 400 360C400 371 391 380 380 380H20C9 380 0 371 0 360C0 349 9 340 20 340zM380 60H20C9 60 0 51 0 40C0 29 9 20 20 20H380C391 20 400 29 400 40C400 51 391 60 380 60zM380 300H20C9 300 0 291 0 280C0 269 9 260 20 260H380C391 260 400 269 400 280C400 291 391 300 380 300zM380 220H20C9 220 0 211 0 200C0 189 9 180 20 180H380C391 180 400 189 400 200C400 211 391 220 380 220zM380 140H20C9 140 0 131 0 120C0 109 9 100 20 100H380C391 100 400 109 400 120C400 131 391 140 380 140z"
-                    : "M300 60.4H20C9 60.4 0 51.4 0 40.4C0 29.4 9 20.4 20 20.4H300C311 20.4 320 29.4 320 40.4C320 51.4 311 60.4 300 60.4zM20 260.4H300C311 260.4 320 269.4 320 280.4C320 291.4 311 300.4 300 300.4H20C9 300.4 0 291.4 0 280.4C0 269.2 9 260.4 20 260.4zM300 180.4H20C9 180.4 0 171.4 0 160.4C0 149.4 9 140.4 20 140.4H300C311 140.4 320 149.4 320 160.4C320 171.4 311 180.4 300 180.4zM300 240.4H20C9 240.4 0 231.4 0 220.4C0 209.4 9 200.4 20 200.4H300C311 200.4 320 209.4 320 220.4C320 231.4 311 240.4 300 240.4zM300 120.4H20C9 120.4 0 111.4 0 100.4C0 89.4 9 80.4 20 80.4H300C311 80.4 320 89.4 320 100.4C320 111.4 311 120.4 300 120.4z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="align-justify"
-                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}-align-justify`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="align-justify" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignJustify: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="align-justify" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 60.4H20C9 60.4 0 51.4 0 40.4C0 29.4 9 20.4 20 20.4H300C311 20.4 320 29.4 320 40.4C320 51.4 311 60.4 300 60.4zM20 260.4H300C311 260.4 320 269.4 320 280.4C320 291.4 311 300.4 300 300.4H20C9 300.4 0 291.4 0 280.4C0 269.2 9 260.4 20 260.4zM300 180.4H20C9 180.4 0 171.4 0 160.4C0 149.4 9 140.4 20 140.4H300C311 140.4 320 149.4 320 160.4C320 171.4 311 180.4 300 180.4zM300 240.4H20C9 240.4 0 231.4 0 220.4C0 209.4 9 200.4 20 200.4H300C311 200.4 320 209.4 320 220.4C320 231.4 311 240.4 300 240.4zM300 120.4H20C9 120.4 0 111.4 0 100.4C0 89.4 9 80.4 20 80.4H300C311 80.4 320 89.4 320 100.4C320 111.4 311 120.4 300 120.4z"
+                        : "M20 340H380C391 340 400 349 400 360C400 371 391 380 380 380H20C9 380 0 371 0 360C0 349 9 340 20 340zM380 60H20C9 60 0 51 0 40C0 29 9 20 20 20H380C391 20 400 29 400 40C400 51 391 60 380 60zM380 300H20C9 300 0 291 0 280C0 269 9 260 20 260H380C391 260 400 269 400 280C400 291 391 300 380 300zM380 220H20C9 220 0 211 0 200C0 189 9 180 20 180H380C391 180 400 189 400 200C400 211 391 220 380 220zM380 140H20C9 140 0 131 0 120C0 109 9 100 20 100H380C391 100 400 109 400 120C400 131 391 140 380 140z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignJustify.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignJustify.displayName = `Blueprint5.Icon.AlignJustify`;
 export default AlignJustify;

package/src/generated/components/align-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 AlignLeft: 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 260H220C231 260 240 269 240 280C240 291 231 300 220 300H20C9 300 0 291 0 280C0 269 9 260 20 260zM20 340H380C391 340 400 349 400 360C400 371 391 380 380 380H20C9 380 0 371 0 360C0 349 9 340 20 340zM300 60H20C9 60 0 51 0 40C0 29 9 20 20 20H300C311 20 320 29 320 40C320 51 311 60 300 60zM380 220H20C9 220 0 211 0 200C0 189 9 180 20 180H380C391 180 400 189 400 200C400 211 391 220 380 220zM20 100H140C151 100 160 109 160 120C160 131 151 140 140 140H20C9 140 0 131 0 120C0 109 9 100 20 100z"
-                    : "M260 60H20C9 60 0 51 0 40C0 29 9 20 20 20H260C271 20 280 29 280 40C280 51 271 60 260 60zM20 260H300C311 260 320 269 320 280C320 291 311 300 300 300H20C9 300 0 291 0 280C0 269 9 260 20 260zM20 200H180C191 200 200 209 200 220C200 231 191 240 180 240H20C9 240 0 231 0 220C0 209 9 200 20 200zM300 180H20C9 180 0 171 0 160C0 149 9 140 20 140H300C311 140 320 149 320 160C320 171 311 180 300 180zM20 80H100C111 80 120 89 120 100C120 111 111 120 100 120H20C9 120 0 111 0 100C0 89 9 80 20 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="align-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}-align-left`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="align-left" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignLeft: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="align-left" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M260 60H20C9 60 0 51 0 40C0 29 9 20 20 20H260C271 20 280 29 280 40C280 51 271 60 260 60zM20 260H300C311 260 320 269 320 280C320 291 311 300 300 300H20C9 300 0 291 0 280C0 269 9 260 20 260zM20 200H180C191 200 200 209 200 220C200 231 191 240 180 240H20C9 240 0 231 0 220C0 209 9 200 20 200zM300 180H20C9 180 0 171 0 160C0 149 9 140 20 140H300C311 140 320 149 320 160C320 171 311 180 300 180zM20 80H100C111 80 120 89 120 100C120 111 111 120 100 120H20C9 120 0 111 0 100C0 89 9 80 20 80z"
+                        : "M20 260H220C231 260 240 269 240 280C240 291 231 300 220 300H20C9 300 0 291 0 280C0 269 9 260 20 260zM20 340H380C391 340 400 349 400 360C400 371 391 380 380 380H20C9 380 0 371 0 360C0 349 9 340 20 340zM300 60H20C9 60 0 51 0 40C0 29 9 20 20 20H300C311 20 320 29 320 40C320 51 311 60 300 60zM380 220H20C9 220 0 211 0 200C0 189 9 180 20 180H380C391 180 400 189 400 200C400 211 391 220 380 220zM20 100H140C151 100 160 109 160 120C160 131 151 140 140 140H20C9 140 0 131 0 120C0 109 9 100 20 100z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignLeft.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignLeft.displayName = `Blueprint5.Icon.AlignLeft`;
 export default AlignLeft;

package/src/generated/components/align-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 { SVGIconContainer } from "../../svgIconContainer";
 
-export const AlignRight: 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 60H100C89 60 80 51 80 40C80 29 89 20 100 20H380C391 20 400 29 400 40C400 51 391 60 380 60zM20 340H380C391 340 400 349 400 360C400 371 391 380 380 380H20C9 380 0 371 0 360C0 349 9 340 20 340zM380 140H260C249 140 240 131 240 120C240 109 249 100 260 100H380C391 100 400 109 400 120C400 131 391 140 380 140zM380 220H20C9 220 0 211 0 200C0 189 9 180 20 180H380C391 180 400 189 400 200C400 211 391 220 380 220zM380 300H180C169 300 160 291 160 280C160 269 169 260 180 260H380C391 260 400 269 400 280C400 291 391 300 380 300z"
-                    : "M300 60.4H60C49 60.4 40 51.4 40 40.4C40 29.4 49 20.4 60 20.4H300C311 20.4 320 29.4 320 40.4C320 51.4 311 60.4 300 60.4zM20 260.4H300C311 260.4 320 269.4 320 280.4C320 291.4 311 300.4 300 300.4H20C9 300.4 0 291.4 0 280.4C0 269.2 9 260.4 20 260.4zM300 240.4H140C129 240.4 120 231.4 120 220.4C120 209.4 129 200.4 140 200.4H300C311 200.4 320 209.4 320 220.4C320 231.4 311 240.4 300 240.4zM300 120.4H220C209 120.4 200 111.4 200 100.4C200 89.4 209 80.4 220 80.4H300C311 80.4 320 89.4 320 100.4C320 111.4 311 120.4 300 120.4zM300 180.4H20C9 180.4 0 171.4 0 160.4C0 149.4 9 140.4 20 140.4H300C311 140.4 320 149.4 320 160.4C320 171.4 311 180.4 300 180.4z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="align-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}-align-right`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="align-right" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignRight: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="align-right" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 60.4H60C49 60.4 40 51.4 40 40.4C40 29.4 49 20.4 60 20.4H300C311 20.4 320 29.4 320 40.4C320 51.4 311 60.4 300 60.4zM20 260.4H300C311 260.4 320 269.4 320 280.4C320 291.4 311 300.4 300 300.4H20C9 300.4 0 291.4 0 280.4C0 269.2 9 260.4 20 260.4zM300 240.4H140C129 240.4 120 231.4 120 220.4C120 209.4 129 200.4 140 200.4H300C311 200.4 320 209.4 320 220.4C320 231.4 311 240.4 300 240.4zM300 120.4H220C209 120.4 200 111.4 200 100.4C200 89.4 209 80.4 220 80.4H300C311 80.4 320 89.4 320 100.4C320 111.4 311 120.4 300 120.4zM300 180.4H20C9 180.4 0 171.4 0 160.4C0 149.4 9 140.4 20 140.4H300C311 140.4 320 149.4 320 160.4C320 171.4 311 180.4 300 180.4z"
+                        : "M380 60H100C89 60 80 51 80 40C80 29 89 20 100 20H380C391 20 400 29 400 40C400 51 391 60 380 60zM20 340H380C391 340 400 349 400 360C400 371 391 380 380 380H20C9 380 0 371 0 360C0 349 9 340 20 340zM380 140H260C249 140 240 131 240 120C240 109 249 100 260 100H380C391 100 400 109 400 120C400 131 391 140 380 140zM380 220H20C9 220 0 211 0 200C0 189 9 180 20 180H380C391 180 400 189 400 200C400 211 391 220 380 220zM380 300H180C169 300 160 291 160 280C160 269 169 260 180 260H380C391 260 400 269 400 280C400 291 391 300 380 300z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignRight.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignRight.displayName = `Blueprint5.Icon.AlignRight`;
 export default AlignRight;

package/src/generated/components/alignment-bottom.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 AlignmentBottom: 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 80H320C331 80 340 89 340 100V240C340 251 331 260 320 260H240C229 260 220 251 220 240V100C220 89 229 80 240 80zM380 40H20C9 40 0 31 0 20S9 0 20 0H380C391 0 400 9 400 20S391 40 380 40zM80 80H160C171 80 180 89 180 100V380C180 391 171 400 160 400H80C69 400 60 391 60 380V100C60 89 69 80 80 80z"
-                    : "M200 80H260C271 80 280 89 280 100V180C280 191 271 200 260 200H200C189 200 180 191 180 180V100C180 89 189 80 200 80zM300 40H20C9 40 0 31 0 20S9 0 20 0H300C311 0 320 9 320 20S311 40 300 40zM60 80H120C131 80 140 89 140 100V280C140 291 131 300 120 300H60C49 300 40 291 40 280V100C40 89 49 80 60 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="alignment-bottom"
-                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}-alignment-bottom`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="alignment-bottom" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignmentBottom: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="alignment-bottom" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M200 80H260C271 80 280 89 280 100V180C280 191 271 200 260 200H200C189 200 180 191 180 180V100C180 89 189 80 200 80zM300 40H20C9 40 0 31 0 20S9 0 20 0H300C311 0 320 9 320 20S311 40 300 40zM60 80H120C131 80 140 89 140 100V280C140 291 131 300 120 300H60C49 300 40 291 40 280V100C40 89 49 80 60 80z"
+                        : "M240 80H320C331 80 340 89 340 100V240C340 251 331 260 320 260H240C229 260 220 251 220 240V100C220 89 229 80 240 80zM380 40H20C9 40 0 31 0 20S9 0 20 0H380C391 0 400 9 400 20S391 40 380 40zM80 80H160C171 80 180 89 180 100V380C180 391 171 400 160 400H80C69 400 60 391 60 380V100C60 89 69 80 80 80z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignmentBottom.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignmentBottom.displayName = `Blueprint5.Icon.AlignmentBottom`;
 export default AlignmentBottom;

package/src/generated/components/alignment-horizontal-center.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 AlignmentHorizontalCenter: 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 220H340V260C340 271 331 280 320 280H240C229 280 220 271 220 260V220H180V340C180 351 171 360 160 360H80C69 360 60 351 60 340V220H20C9 220 0 211 0 200C0 189 9 180 20 180H60V60C60 49 69 40 80 40H160C171 40 180 49 180 60V180H220V140C220 129 229 120 240 120H320C331 120 340 129 340 140V180H380C391 180 400 189 400 200C400 211 391 220 380 220z"
-                    : "M300 180H280V200C280 211 271 220 260 220H200C189 220 180 211 180 200V180H140V260C140 271 131 280 120 280H60C49 280 40 271 40 260V180H20C9 180 0 171 0 160C0 149 9 140 20 140H40V60C40 49 49 40 60 40H120C131 40 140 49 140 60V140H180V120C180 109 189 100 200 100H260C271 100 280 109 280 120V140H300C311 140 320 149 320 160C320 171 311 180 300 180z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="alignment-horizontal-center"
-                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}-alignment-horizontal-center`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="alignment-horizontal-center" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignmentHorizontalCenter: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="alignment-horizontal-center" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 180H280V200C280 211 271 220 260 220H200C189 220 180 211 180 200V180H140V260C140 271 131 280 120 280H60C49 280 40 271 40 260V180H20C9 180 0 171 0 160C0 149 9 140 20 140H40V60C40 49 49 40 60 40H120C131 40 140 49 140 60V140H180V120C180 109 189 100 200 100H260C271 100 280 109 280 120V140H300C311 140 320 149 320 160C320 171 311 180 300 180z"
+                        : "M380 220H340V260C340 271 331 280 320 280H240C229 280 220 271 220 260V220H180V340C180 351 171 360 160 360H80C69 360 60 351 60 340V220H20C9 220 0 211 0 200C0 189 9 180 20 180H60V60C60 49 69 40 80 40H160C171 40 180 49 180 60V180H220V140C220 129 229 120 240 120H320C331 120 340 129 340 140V180H380C391 180 400 189 400 200C400 211 391 220 380 220z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignmentHorizontalCenter.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignmentHorizontalCenter.displayName = `Blueprint5.Icon.AlignmentHorizontalCenter`;
 export default AlignmentHorizontalCenter;