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

package/src/generated/components/volume-down.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 VolumeDown: 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
-                    ? "M318.4 321.4L286.4 297.8C307.4 270.8 320 236.8 320 200C320 163.2 307.4 129.2000000000001 286.4 102.2L318.4 78.6C344.4 112.2 360 154.2 360 200C360 245.8 344.4 287.8 318.4 321.4zM220 340C214.4 340 209.4 337.8 205.8 334.2L151.8 280H60C49 280 40 271 40 260V140C40 129 49 120 60 120H151.8L206 65.8C209.4 62.2 214.4 60 220 60C231 60 240 69 240 80V320C240 331 231 340 220 340z"
-                    : "M180 280C174.4 280 169.4 277.8 165.8 274.2L111.8 220H60C49 220 40 211 40 200V120C40 109 49 100 60 100H111.8L166 45.8C169.4 42.2 174.4 40 180 40C191 40 200 49 200 60V260C200 271 191 280 180 280zM251.4 251.2L219.6 226.8C232.4 207.8 240 184.8 240 160S232.4 112.2 219.6 93.2L251.4 68.8C269.4000000000001 94.6 280 126 280 160C280 194 269.4000000000001 225.4 251.4 251.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="volume-down"
-                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}-volume-down`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="volume-down" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const VolumeDown: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="volume-down" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M180 280C174.4 280 169.4 277.8 165.8 274.2L111.8 220H60C49 220 40 211 40 200V120C40 109 49 100 60 100H111.8L166 45.8C169.4 42.2 174.4 40 180 40C191 40 200 49 200 60V260C200 271 191 280 180 280zM251.4 251.2L219.6 226.8C232.4 207.8 240 184.8 240 160S232.4 112.2 219.6 93.2L251.4 68.8C269.4000000000001 94.6 280 126 280 160C280 194 269.4000000000001 225.4 251.4 251.2z"
+                        : "M318.4 321.4L286.4 297.8C307.4 270.8 320 236.8 320 200C320 163.2 307.4 129.2000000000001 286.4 102.2L318.4 78.6C344.4 112.2 360 154.2 360 200C360 245.8 344.4 287.8 318.4 321.4zM220 340C214.4 340 209.4 337.8 205.8 334.2L151.8 280H60C49 280 40 271 40 260V140C40 129 49 120 60 120H151.8L206 65.8C209.4 62.2 214.4 60 220 60C231 60 240 69 240 80V320C240 331 231 340 220 340z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+VolumeDown.defaultProps = {
+    size: IconSize.STANDARD,
+};
 VolumeDown.displayName = `Blueprint5.Icon.VolumeDown`;
 export default VolumeDown;

package/src/generated/components/volume-off.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 VolumeOff: 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
-                    ? "M280 340C274.4000000000001 340 269.4000000000001 337.8 265.8 334.2L211.8 280H120C109 280 100 271 100 260V140C100 129 109 120 120 120H211.8L266 65.8C269.4000000000001 62.2 274.4000000000001 60 280 60C291 60 300 69 300 80V320C300 331 291 340 280 340z"
-                    : "M220 280C214.4 280 209.4 277.8 205.8 274.2L151.8 220H100C89 220 80 211 80 200V120C80 109 89 100 100 100H151.8L206 45.8C209.4 42.2 214.4 40 220 40C231 40 240 49 240 60V260C240 271 231 280 220 280z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="volume-off"
-                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}-volume-off`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="volume-off" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const VolumeOff: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="volume-off" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M220 280C214.4 280 209.4 277.8 205.8 274.2L151.8 220H100C89 220 80 211 80 200V120C80 109 89 100 100 100H151.8L206 45.8C209.4 42.2 214.4 40 220 40C231 40 240 49 240 60V260C240 271 231 280 220 280z"
+                        : "M280 340C274.4000000000001 340 269.4000000000001 337.8 265.8 334.2L211.8 280H120C109 280 100 271 100 260V140C100 129 109 120 120 120H211.8L266 65.8C269.4000000000001 62.2 274.4000000000001 60 280 60C291 60 300 69 300 80V320C300 331 291 340 280 340z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+VolumeOff.defaultProps = {
+    size: IconSize.STANDARD,
+};
 VolumeOff.displayName = `Blueprint5.Icon.VolumeOff`;
 export default VolumeOff;

package/src/generated/components/volume-up.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 VolumeUp: 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
-                    ? "M180 331.4C174.4 331.4 169.4 329.2 165.8 325.6L111.8 271.4H20C9 271.4 0 262.4 0 251.4V131.4C0 120.4 9 111.4 20 111.4H111.8L166 57.2C169.6 53.6 174.6 51.4 180.2000000000001 51.4C191.2000000000001 51.4 200.2000000000001 60.4 200.2000000000001 71.4V311.4C200 322.4 191 331.4 180 331.4zM346.2 362.6L313.8 338.6C342.8 296.8 360 246.2 360 191.4C360 136.6 342.8 86 313.8 44L346.2 20C380 68.6 400 127.6 400 191.4C400 255 380 314 346.2 362.6zM278.4 312.8L246.4 289.2C267.4 262.2000000000001 280 228.2 280 191.4C280 154.6 267.4 120.6 246.4 93.6L278.4 70C304.2000000000001 103.6 320 145.6 320 191.4C320 237 304.4000000000001 279 278.4 312.8z"
-                    : "M140 282.8C134.4 282.8 129.4 280.6 125.8 277L71.8 222.8H20C9 222.8 0 213.8 0 202.8V122.8C0 111.8 9 102.8 20 102.8H71.8L126 48.6C129.6 45 134.6 42.8 140.2 42.8C151.2 42.8 160.2 51.8 160.2 62.8V262.8C160 273.8 151 282.8 140 282.8zM274.8 302.6L243.2 278.2C266.2 245.6 280 205.8 280 162.8C280 119.6 266.2 79.8 243 47.2L274.6 22.8C303 62.2 319.8 110.4 319.8 162.8C320 215 303 263.2 274.8 302.6zM179.6 229.6C192.4 210.4 200 187.4 200 162.8S192.4 115 179.6 96L211.4 71.6C229.4 97.4 240 128.8 240 162.8C240 196.8 229.4 228.2 211.4 254L179.6 229.6z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="volume-up"
-                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}-volume-up`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="volume-up" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const VolumeUp: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="volume-up" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M140 282.8C134.4 282.8 129.4 280.6 125.8 277L71.8 222.8H20C9 222.8 0 213.8 0 202.8V122.8C0 111.8 9 102.8 20 102.8H71.8L126 48.6C129.6 45 134.6 42.8 140.2 42.8C151.2 42.8 160.2 51.8 160.2 62.8V262.8C160 273.8 151 282.8 140 282.8zM274.8 302.6L243.2 278.2C266.2 245.6 280 205.8 280 162.8C280 119.6 266.2 79.8 243 47.2L274.6 22.8C303 62.2 319.8 110.4 319.8 162.8C320 215 303 263.2 274.8 302.6zM179.6 229.6C192.4 210.4 200 187.4 200 162.8S192.4 115 179.6 96L211.4 71.6C229.4 97.4 240 128.8 240 162.8C240 196.8 229.4 228.2 211.4 254L179.6 229.6z"
+                        : "M180 331.4C174.4 331.4 169.4 329.2 165.8 325.6L111.8 271.4H20C9 271.4 0 262.4 0 251.4V131.4C0 120.4 9 111.4 20 111.4H111.8L166 57.2C169.6 53.6 174.6 51.4 180.2000000000001 51.4C191.2000000000001 51.4 200.2000000000001 60.4 200.2000000000001 71.4V311.4C200 322.4 191 331.4 180 331.4zM346.2 362.6L313.8 338.6C342.8 296.8 360 246.2 360 191.4C360 136.6 342.8 86 313.8 44L346.2 20C380 68.6 400 127.6 400 191.4C400 255 380 314 346.2 362.6zM278.4 312.8L246.4 289.2C267.4 262.2000000000001 280 228.2 280 191.4C280 154.6 267.4 120.6 246.4 93.6L278.4 70C304.2000000000001 103.6 320 145.6 320 191.4C320 237 304.4000000000001 279 278.4 312.8z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+VolumeUp.defaultProps = {
+    size: IconSize.STANDARD,
+};
 VolumeUp.displayName = `Blueprint5.Icon.VolumeUp`;
 export default VolumeUp;

package/src/generated/components/walk.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 Walk: 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
-                    ? "M320 200H280C275.4 200 271.6 201.8 268.2 204.2L268 204L234.2 229.4L221.6 166.6L274 114.1999999999999L274 114.1999999999999C277.8 110.6 280 105.6 280 100V20C280 9 271 0 260 0C249 0 240 9 240 20V91.8L187.8 144L138.8 13L138.6 13C135.8 5.4 128.6 0 120 0C109 0 100 9 100 20C100 22.4 100.6 24.8 101.4 27L101.2 27L188.6 260H130.6L96.6 209L96.4 209.2C92.8 203.8 87 200 80 200C69 200 60 209 60 220C60 224.2 61.6 227.8 63.6 230.8L63.4 231L103.4 291L103.8 290.8C107.2 296.2 113 300 120 300H203.6L210.8 319.2C204.2 327.8 200 338.4 200 350C200 377.6 222.4 400 250 400S300 377.6 300 350S277.6 300 250 300C248.8 300 247.6 300.2 246.4 300.4L237.6 276.8L286.6 240H320C331 240 340 231 340 220C340 209 331 200 320 200z"
-                    : "M260 160H220C216.8 160 213.8 161 211.2 162.2L211.2 162L190.8 172.2L183.4 135L211 116.6L210.8 116.2C216.2 112.8 220 107 220 100V20C220 9 211 0 200 0S180 9 180 20V89.2L154.6 106.2L118.6 12.8L118.4 12.8C115.6 5.4 108.6 0 100 0C89 0 80 9 80 20C80 22.6 80.6 25 81.4 27.2L81.2 27.2L147.8 200H112.4L97.8 171L97.6 171C94.4 164.6 87.8 160 80 160C69 160 60 169 60 180C60 183.2 61 186.2 62.2 188.8L62 188.8L82 228.8L82.2 228.8C85.6 235.4 92.2 240 100 240H163.2L169 255C163.4 262 160 270.6 160 280C160 302 178 320 200 320S240 302 240 280C240 260 225.4 243.6 206.2 240.6L196.2 214.2L224.8 200H260C271 200 280 191 280 180S271 160 260 160z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="walk"
-                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}-walk`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="walk" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Walk: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="walk" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M260 160H220C216.8 160 213.8 161 211.2 162.2L211.2 162L190.8 172.2L183.4 135L211 116.6L210.8 116.2C216.2 112.8 220 107 220 100V20C220 9 211 0 200 0S180 9 180 20V89.2L154.6 106.2L118.6 12.8L118.4 12.8C115.6 5.4 108.6 0 100 0C89 0 80 9 80 20C80 22.6 80.6 25 81.4 27.2L81.2 27.2L147.8 200H112.4L97.8 171L97.6 171C94.4 164.6 87.8 160 80 160C69 160 60 169 60 180C60 183.2 61 186.2 62.2 188.8L62 188.8L82 228.8L82.2 228.8C85.6 235.4 92.2 240 100 240H163.2L169 255C163.4 262 160 270.6 160 280C160 302 178 320 200 320S240 302 240 280C240 260 225.4 243.6 206.2 240.6L196.2 214.2L224.8 200H260C271 200 280 191 280 180S271 160 260 160z"
+                        : "M320 200H280C275.4 200 271.6 201.8 268.2 204.2L268 204L234.2 229.4L221.6 166.6L274 114.1999999999999L274 114.1999999999999C277.8 110.6 280 105.6 280 100V20C280 9 271 0 260 0C249 0 240 9 240 20V91.8L187.8 144L138.8 13L138.6 13C135.8 5.4 128.6 0 120 0C109 0 100 9 100 20C100 22.4 100.6 24.8 101.4 27L101.2 27L188.6 260H130.6L96.6 209L96.4 209.2C92.8 203.8 87 200 80 200C69 200 60 209 60 220C60 224.2 61.6 227.8 63.6 230.8L63.4 231L103.4 291L103.8 290.8C107.2 296.2 113 300 120 300H203.6L210.8 319.2C204.2 327.8 200 338.4 200 350C200 377.6 222.4 400 250 400S300 377.6 300 350S277.6 300 250 300C248.8 300 247.6 300.2 246.4 300.4L237.6 276.8L286.6 240H320C331 240 340 231 340 220C340 209 331 200 320 200z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Walk.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Walk.displayName = `Blueprint5.Icon.Walk`;
 export default Walk;

package/src/generated/components/warning-sign.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 WarningSign: 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
-                    ? "M397.2 49.6C397.2 49.6 397.4000000000001 49.8000000000001 397.4000000000001 49.8000000000001L217.4 369.8000000000001C217.4 369.8000000000001 217.2 369.6 217.2 369.6C213.8 375.8 207.4 380 200 380S186.2 375.8 182.8 369.6L182.6 369.8L2.6 49.8L2.8 49.5999999999999C1.2 46.8 0 43.6 0 40C0 29 9 20 20 20H380C391 20 400 29 400 40C400 43.6 398.8 46.8 397.2 49.6zM220 60H180V100H220V60zM220 120H180V280H220V120z"
-                    : "M316.8 50L317 50.2L177 290.2L176.8 290C173.4 296 167.2 300 159.8 300S146.4 296 142.8 290C142.8 290 142.6 290.2 142.6 290.2L2.6 50.2L2.8 50C1 47 -0.2 43.8 -0.2 40C-0.2 29 8.8 20 19.8 20H299.8C310.8 20 319.8 29 319.8 40C319.8 43.8 318.6 47 316.8 50zM179.8 60.2H139.8V100.2H179.8V60.2zM179.8 120.2H139.8V220.2H179.8V120.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="warning-sign"
-                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}-warning-sign`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="warning-sign" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const WarningSign: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="warning-sign" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M316.8 50L317 50.2L177 290.2L176.8 290C173.4 296 167.2 300 159.8 300S146.4 296 142.8 290C142.8 290 142.6 290.2 142.6 290.2L2.6 50.2L2.8 50C1 47 -0.2 43.8 -0.2 40C-0.2 29 8.8 20 19.8 20H299.8C310.8 20 319.8 29 319.8 40C319.8 43.8 318.6 47 316.8 50zM179.8 60.2H139.8V100.2H179.8V60.2zM179.8 120.2H139.8V220.2H179.8V120.2z"
+                        : "M397.2 49.6C397.2 49.6 397.4000000000001 49.8000000000001 397.4000000000001 49.8000000000001L217.4 369.8000000000001C217.4 369.8000000000001 217.2 369.6 217.2 369.6C213.8 375.8 207.4 380 200 380S186.2 375.8 182.8 369.6L182.6 369.8L2.6 49.8L2.8 49.5999999999999C1.2 46.8 0 43.6 0 40C0 29 9 20 20 20H380C391 20 400 29 400 40C400 43.6 398.8 46.8 397.2 49.6zM220 60H180V100H220V60zM220 120H180V280H220V120z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+WarningSign.defaultProps = {
+    size: IconSize.STANDARD,
+};
 WarningSign.displayName = `Blueprint5.Icon.WarningSign`;
 export default WarningSign;

package/src/generated/components/waterfall-chart.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
 import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const WaterfallChart: 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
-                    ? "M260 260H300C311 260 320 269 320 280V300C320 311 311 320 300 320H260C249 320 240 311 240 300V280C240 269 249 260 260 260zM80 100H100C111 100 120 109 120 120V200C120 211 111 220 100 220H80C69 220 60 211 60 200V120C60 109 69 100 80 100zM160 220H200C211 220 220 229 220 240C220 251 211 260 200 260H160C149 260 140 251 140 240C140 229 149 220 160 220zM380 320H360C349 320 340 311 340 300V120C340 109 349 100 360 100H380C391 100 400 109 400 120V300C400 311 391 320 380 320zM380 80H40V340C40 351 31 360 20 360S0 351 0 340V60C0 57.2 0.6 54.6 1.6 52.2C4.6 45 11.8 40 20 40H380C391 40 400 49 400 60C400 71 391 80 380 80z"
-                    : "M160 180C171 180 180 189 180 200C180 211 171 220 160 220S140 211 140 200C140 189 149 180 160 180zM80 100H100C111 100 120 109 120 120V160C120 171 111 180 100 180H80C69 180 60 171 60 160V120C60 109 69 100 80 100zM220 220C231 220 240 229 240 240V260C240 271 231 280 220 280S200 271 200 260V240C200 229 209 220 220 220zM300 280H280C269 280 260 271 260 260V120C260 109 269 100 280 100H300C311 100 320 109 320 120V260C320 271 311 280 300 280zM300 80H40V260C40 271 31 280 20 280S0 271 0 260V60C0 49 9 40 20 40H300C311 40 320 49 320 60C320 71 311 80 300 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="waterfall-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}-waterfall-chart`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="waterfall-chart" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const WaterfallChart: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="waterfall-chart" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M160 180C171 180 180 189 180 200C180 211 171 220 160 220S140 211 140 200C140 189 149 180 160 180zM80 100H100C111 100 120 109 120 120V160C120 171 111 180 100 180H80C69 180 60 171 60 160V120C60 109 69 100 80 100zM220 220C231 220 240 229 240 240V260C240 271 231 280 220 280S200 271 200 260V240C200 229 209 220 220 220zM300 280H280C269 280 260 271 260 260V120C260 109 269 100 280 100H300C311 100 320 109 320 120V260C320 271 311 280 300 280zM300 80H40V260C40 271 31 280 20 280S0 271 0 260V60C0 49 9 40 20 40H300C311 40 320 49 320 60C320 71 311 80 300 80z"
+                        : "M260 260H300C311 260 320 269 320 280V300C320 311 311 320 300 320H260C249 320 240 311 240 300V280C240 269 249 260 260 260zM80 100H100C111 100 120 109 120 120V200C120 211 111 220 100 220H80C69 220 60 211 60 200V120C60 109 69 100 80 100zM160 220H200C211 220 220 229 220 240C220 251 211 260 200 260H160C149 260 140 251 140 240C140 229 149 220 160 220zM380 320H360C349 320 340 311 340 300V120C340 109 349 100 360 100H380C391 100 400 109 400 120V300C400 311 391 320 380 320zM380 80H40V340C40 351 31 360 20 360S0 351 0 340V60C0 57.2 0.6 54.6 1.6 52.2C4.6 45 11.8 40 20 40H380C391 40 400 49 400 60C400 71 391 80 380 80z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+WaterfallChart.defaultProps = {
+    size: IconSize.STANDARD,
+};
 WaterfallChart.displayName = `Blueprint5.Icon.WaterfallChart`;
 export default WaterfallChart;