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

package/src/generated/components/home.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 Home: 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 160V20C40 9 49 0 60 0H160V140H240V0H340C351 0 360 9 360 20V160L200 320L40 160zM394.2000000000001 214.2L340 268.2V340C340 351 331 360 320 360S300 351 300 340V308.2L214.2 394C210.6 397.8 205.6 400 200 400S189.4 397.8 185.8 394.2L5.8 214.2C2.2 210.6 0 205.6 0 200C0 189 9 180 20 180C25.6 180 30.6 182.2 34.2 185.8L200 351.8L365.8 186C369.4 182.2 374.4 180 380 180C391 180 400 189 400 200C400 205.6 397.8 210.6 394.2000000000001 214.2z"
-                    : "M40 120V100C40 100 40 91.4 40 80V60.2C40 40.2 40 20 40 20C40 9 49 0 60 0H120V100H200V0H260C271 0 280 9 280 20V120L160 240L40 120zM314.2000000000001 174.2L280 208.2V280C280 291 271 300 260 300S240 291 240 280V248.2L174.2 314.2C170.6 317.8 165.6 320 160 320S149.4 317.8 145.8 314.2L5.8 174.2C2.2 170.6 0 165.6 0 160C0 149 9 140 20 140C25.6 140 30.6 142.2 34.2 145.8L160 271.8L285.8 146C289.4000000000001 142.2 294.4000000000001 140 300 140C311 140 320 149 320 160C320 165.6 317.8 170.6 314.2000000000001 174.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="home"
-                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}-home`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="home" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Home: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="home" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M40 120V100C40 100 40 91.4 40 80V60.2C40 40.2 40 20 40 20C40 9 49 0 60 0H120V100H200V0H260C271 0 280 9 280 20V120L160 240L40 120zM314.2000000000001 174.2L280 208.2V280C280 291 271 300 260 300S240 291 240 280V248.2L174.2 314.2C170.6 317.8 165.6 320 160 320S149.4 317.8 145.8 314.2L5.8 174.2C2.2 170.6 0 165.6 0 160C0 149 9 140 20 140C25.6 140 30.6 142.2 34.2 145.8L160 271.8L285.8 146C289.4000000000001 142.2 294.4000000000001 140 300 140C311 140 320 149 320 160C320 165.6 317.8 170.6 314.2000000000001 174.2z"
+                        : "M40 160V20C40 9 49 0 60 0H160V140H240V0H340C351 0 360 9 360 20V160L200 320L40 160zM394.2000000000001 214.2L340 268.2V340C340 351 331 360 320 360S300 351 300 340V308.2L214.2 394C210.6 397.8 205.6 400 200 400S189.4 397.8 185.8 394.2L5.8 214.2C2.2 210.6 0 205.6 0 200C0 189 9 180 20 180C25.6 180 30.6 182.2 34.2 185.8L200 351.8L365.8 186C369.4 182.2 374.4 180 380 180C391 180 400 189 400 200C400 205.6 397.8 210.6 394.2000000000001 214.2z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Home.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Home.displayName = `Blueprint5.Icon.Home`;
 export default Home;

package/src/generated/components/horizontal-bar-chart-asc.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 HorizontalBarChartAsc: 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 220H240C251 220 260 229 260 240V260C260 271 251 280 240 280H20C9 280 0 271 0 260V240C0 229 9 220 20 220zM20 320H200C211 320 220 329 220 340V360C220 371 211 380 200 380H20C9 380 0 371 0 360V340C0 329 9 320 20 320zM380 80H20C9 80 0 71 0 60V40C0 29 9 20 20 20H380C391 20 400 29 400 40V60C400 71 391 80 380 80zM20 120H300C311 120 320 129 320 140V160C320 171 311 180 300 180H20C9 180 0 171 0 160V140C0 129 9 120 20 120z"
-                    : "M20 260H120C131 260 140 269 140 280S131 300 120 300H20C9 300 0 291 0 280S9 260 20 260zM20 180H160C171 180 180 189 180 200S171 220 160 220H20C9 220 0 211 0 200S9 180 20 180zM300 60H20C9 60 0 51 0 40S9 20 20 20H300C311 20 320 29 320 40S311 60 300 60zM20 100H220C231 100 240 109 240 120S231 140 220 140H20C9 140 0 131 0 120S9 100 20 100z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="horizontal-bar-chart-asc"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-horizontal-bar-chart-asc`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="horizontal-bar-chart-asc" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HorizontalBarChartAsc: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="horizontal-bar-chart-asc" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M20 260H120C131 260 140 269 140 280S131 300 120 300H20C9 300 0 291 0 280S9 260 20 260zM20 180H160C171 180 180 189 180 200S171 220 160 220H20C9 220 0 211 0 200S9 180 20 180zM300 60H20C9 60 0 51 0 40S9 20 20 20H300C311 20 320 29 320 40S311 60 300 60zM20 100H220C231 100 240 109 240 120S231 140 220 140H20C9 140 0 131 0 120S9 100 20 100z"
+                        : "M20 220H240C251 220 260 229 260 240V260C260 271 251 280 240 280H20C9 280 0 271 0 260V240C0 229 9 220 20 220zM20 320H200C211 320 220 329 220 340V360C220 371 211 380 200 380H20C9 380 0 371 0 360V340C0 329 9 320 20 320zM380 80H20C9 80 0 71 0 60V40C0 29 9 20 20 20H380C391 20 400 29 400 40V60C400 71 391 80 380 80zM20 120H300C311 120 320 129 320 140V160C320 171 311 180 300 180H20C9 180 0 171 0 160V140C0 129 9 120 20 120z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HorizontalBarChartAsc.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HorizontalBarChartAsc.displayName = `Blueprint5.Icon.HorizontalBarChartAsc`;
 export default HorizontalBarChartAsc;

package/src/generated/components/horizontal-bar-chart-desc.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 HorizontalBarChartDesc: 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
-                    ? "M200 80H20C9 80 0 71 0 60V40C0 29 9 20 20 20H200C211 20 220 29 220 40V60C220 71 211 80 200 80zM240 180H20C9 180 0 171 0 160V140C0 129 9 120 20 120H240C251 120 260 129 260 140V160C260 171 251 180 240 180zM300 280H20C9 280 0 271 0 260V240C0 229 9 220 20 220H300C311 220 320 229 320 240V260C320 271 311 280 300 280zM380 380H20C9 380 0 371 0 360V340C0 329 9 320 20 320H380C391 320 400 329 400 340V360C400 371 391 380 380 380z"
-                    : "M300 300H20C9 300 0 291 0 280C0 269 9 260 20 260H300C311 260 320 269 320 280C320 291 311 300 300 300zM160 140H20C9 140 0 131 0 120C0 109 9 100 20 100H160C171 100 180 109 180 120C180 131 171 140 160 140zM120 60H20C9 60 0 51 0 40C0 29 9 20 20 20H120C131 20 140 29 140 40C140 51 131 60 120 60zM220 220H20C9 220 0 211 0 200C0 189 9 180 20 180H220C231 180 240 189 240 200C240 211 231 220 220 220z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="horizontal-bar-chart-desc"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-horizontal-bar-chart-desc`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="horizontal-bar-chart-desc" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HorizontalBarChartDesc: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="horizontal-bar-chart-desc" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 300H20C9 300 0 291 0 280C0 269 9 260 20 260H300C311 260 320 269 320 280C320 291 311 300 300 300zM160 140H20C9 140 0 131 0 120C0 109 9 100 20 100H160C171 100 180 109 180 120C180 131 171 140 160 140zM120 60H20C9 60 0 51 0 40C0 29 9 20 20 20H120C131 20 140 29 140 40C140 51 131 60 120 60zM220 220H20C9 220 0 211 0 200C0 189 9 180 20 180H220C231 180 240 189 240 200C240 211 231 220 220 220z"
+                        : "M200 80H20C9 80 0 71 0 60V40C0 29 9 20 20 20H200C211 20 220 29 220 40V60C220 71 211 80 200 80zM240 180H20C9 180 0 171 0 160V140C0 129 9 120 20 120H240C251 120 260 129 260 140V160C260 171 251 180 240 180zM300 280H20C9 280 0 271 0 260V240C0 229 9 220 20 220H300C311 220 320 229 320 240V260C320 271 311 280 300 280zM380 380H20C9 380 0 371 0 360V340C0 329 9 320 20 320H380C391 320 400 329 400 340V360C400 371 391 380 380 380z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HorizontalBarChartDesc.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HorizontalBarChartDesc.displayName = `Blueprint5.Icon.HorizontalBarChartDesc`;
 export default HorizontalBarChartDesc;

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

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const HorizontalBarChart: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M20 380C9 380 0 371 0 360V40C0 29 9 20 20 20S40 29 40 40V360C40 371 31 380 20 380zM80 280H300C311 280 320 289 320 300V340C320 351 311 360 300 360H80C69 360 60 351 60 340V300C60 289 69 280 80 280zM240 120H80C69 120 60 111 60 100V60C60 49 69 40 80 40H240C251 40 260 49 260 60V100C260 111 251 120 240 120zM380 240H80C69 240 60 231 60 220V180C60 169 69 160 80 160H380C391 160 400 169 400 180V220C400 231 391 240 380 240z"
-                    : "M80 220H220C231 220 240 229 240 240V260C240 271 231 280 220 280H80C69 280 60 271 60 260V240C60 229 69 220 80 220zM20 300C9 300 0 291 0 280V20C0 9 9 0 20 0S40 9 40 20V280C40 291 31 300 20 300zM300 180H80C69 180 60 171 60 160V140C60 129 69 120 80 120H300C311 120 320 129 320 140V160C320 171 311 180 300 180zM180 80H80C69 80 60 71 60 60V40C60 29 69 20 80 20H180C191 20 200 29 200 40V60C200 71 191 80 180 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="horizontal-bar-chart"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-horizontal-bar-chart`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="horizontal-bar-chart" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HorizontalBarChart: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="horizontal-bar-chart" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M80 220H220C231 220 240 229 240 240V260C240 271 231 280 220 280H80C69 280 60 271 60 260V240C60 229 69 220 80 220zM20 300C9 300 0 291 0 280V20C0 9 9 0 20 0S40 9 40 20V280C40 291 31 300 20 300zM300 180H80C69 180 60 171 60 160V140C60 129 69 120 80 120H300C311 120 320 129 320 140V160C320 171 311 180 300 180zM180 80H80C69 80 60 71 60 60V40C60 29 69 20 80 20H180C191 20 200 29 200 40V60C200 71 191 80 180 80z"
+                        : "M20 380C9 380 0 371 0 360V40C0 29 9 20 20 20S40 29 40 40V360C40 371 31 380 20 380zM80 280H300C311 280 320 289 320 300V340C320 351 311 360 300 360H80C69 360 60 351 60 340V300C60 289 69 280 80 280zM240 120H80C69 120 60 111 60 100V60C60 49 69 40 80 40H240C251 40 260 49 260 60V100C260 111 251 120 240 120zM380 240H80C69 240 60 231 60 220V180C60 169 69 160 80 160H380C391 160 400 169 400 180V220C400 231 391 240 380 240z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HorizontalBarChart.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HorizontalBarChart.displayName = `Blueprint5.Icon.HorizontalBarChart`;
 export default HorizontalBarChart;

package/src/generated/components/horizontal-distribution.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const HorizontalDistribution: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M240 360H160C149 360 140 351 140 340V60C140 49 149 40 160 40H240C251 40 260 49 260 60V340C260 351 251 360 240 360zM20 400C9 400 0 391 0 380V20C0 9 9 0 20 0S40 9 40 20V380C40 391 31 400 20 400zM380 400C369 400 360 391 360 380V20C360 9 369 0 380 0S400 9 400 20V380C400 391 391 400 380 400z"
-                    : "M40 320C29 320 20 311 20 300V20C20 9 29 0 40 0S60 9 60 20V300C60 311 51 320 40 320zM300 320C289 320 280 311 280 300V20C280 9 289 0 300 0S320 9 320 20V300C320 311 311 320 300 320zM200 280H140C129 280 120 271 120 260V80C120 69 129 60 140 60H200C211 60 220 69 220 80V260C220 271 211 280 200 280z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="horizontal-distribution"
-                fill={color}
-                height={size}
-                ref={ref}
-                role="img"
-                viewBox={viewBox}
-                width={size}
-                {...svgProps}
-                {...htmlProps}
-            >
-                {title && <title id={titleId}>{title}</title>}
-                {path}
-            </svg>
-        );
-    } else {
-        return React.createElement(
-            tagName,
-            {
-                ...htmlProps,
-                "aria-hidden": title ? undefined : true,
-                className: classNames(Classes.ICON, `${Classes.ICON}-horizontal-distribution`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="horizontal-distribution" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const HorizontalDistribution: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="horizontal-distribution" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M40 320C29 320 20 311 20 300V20C20 9 29 0 40 0S60 9 60 20V300C60 311 51 320 40 320zM300 320C289 320 280 311 280 300V20C280 9 289 0 300 0S320 9 320 20V300C320 311 311 320 300 320zM200 280H140C129 280 120 271 120 260V80C120 69 129 60 140 60H200C211 60 220 69 220 80V260C220 271 211 280 200 280z"
+                        : "M240 360H160C149 360 140 351 140 340V60C140 49 149 40 160 40H240C251 40 260 49 260 60V340C260 351 251 360 240 360zM20 400C9 400 0 391 0 380V20C0 9 9 0 20 0S40 9 40 20V380C40 391 31 400 20 400zM380 400C369 400 360 391 360 380V20C360 9 369 0 380 0S400 9 400 20V380C400 391 391 400 380 400z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+HorizontalDistribution.defaultProps = {
+    size: IconSize.STANDARD,
+};
 HorizontalDistribution.displayName = `Blueprint5.Icon.HorizontalDistribution`;
 export default HorizontalDistribution;

package/src/generated/components/horizontal-inbetween.tsx

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