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

package/src/generated/components/minimize.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 Minimize: 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
-                    ? "M160 180H60C49 180 40 171 40 160S49 140 60 140H111.8L6 34.2C2.2 30.6 0 25.6 0 20C0 9 9 0 20 0C25.6 0 30.6 2.2 34.2 5.8L140 111.8V60C140 49 149 40 160 40S180 49 180 60V160C180 171 171 180 160 180zM400 380C400 391 391 400 380 400C374.4 400 369.4 397.8 365.8 394.2L260 288.2V340C260 351 251 360 240 360S220 351 220 340V240C220 229 229 220 240 220H340C351 220 360 229 360 240S351 260 340 260H288.2L394 365.8C397.8 369.4 400 374.4 400 380z"
-                    : "M319.8 300.2C319.8 311.2 310.8 320.2 299.8 320.2C294.2000000000001 320.2 289.2000000000001 318 285.6 314.4L219.8000000000001 248.6V280.2C219.8000000000001 291.2 210.8000000000001 300.2 199.8000000000001 300.2S179.8000000000001 291.2 179.8000000000001 280.2V200.2C179.8000000000001 189.2 188.8 180.2 199.8000000000001 180.2H279.8000000000001C290.8000000000001 180.2 299.8000000000001 189.2 299.8000000000001 200.2S290.8000000000001 220.2 279.8000000000001 220.2H248.0000000000001L314 286C317.6 289.6 319.8 294.6 319.8 300.2zM119.8 140.2H39.8C28.8 140.2 19.8 131.2 19.8 120.2S28.8 100.2 39.8 100.2H71.6L5.8 34.4C2.2 30.8 0 25.8 0 20.1999999999999C0 9.1999999999999 9 0.1999999999999 20 0.1999999999999C25.6 0.1999999999999 30.6 2.4 34.2 5.9999999999999L100 71.7999999999999V39.9999999999999C100 28.9999999999999 109 19.9999999999999 120 19.9999999999999S140 28.9999999999999 140 39.9999999999999V120C139.8 131.2 130.8 140.2 119.8 140.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="minimize"
-                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}-minimize`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="minimize" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Minimize: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="minimize" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M319.8 300.2C319.8 311.2 310.8 320.2 299.8 320.2C294.2000000000001 320.2 289.2000000000001 318 285.6 314.4L219.8000000000001 248.6V280.2C219.8000000000001 291.2 210.8000000000001 300.2 199.8000000000001 300.2S179.8000000000001 291.2 179.8000000000001 280.2V200.2C179.8000000000001 189.2 188.8 180.2 199.8000000000001 180.2H279.8000000000001C290.8000000000001 180.2 299.8000000000001 189.2 299.8000000000001 200.2S290.8000000000001 220.2 279.8000000000001 220.2H248.0000000000001L314 286C317.6 289.6 319.8 294.6 319.8 300.2zM119.8 140.2H39.8C28.8 140.2 19.8 131.2 19.8 120.2S28.8 100.2 39.8 100.2H71.6L5.8 34.4C2.2 30.8 0 25.8 0 20.1999999999999C0 9.1999999999999 9 0.1999999999999 20 0.1999999999999C25.6 0.1999999999999 30.6 2.4 34.2 5.9999999999999L100 71.7999999999999V39.9999999999999C100 28.9999999999999 109 19.9999999999999 120 19.9999999999999S140 28.9999999999999 140 39.9999999999999V120C139.8 131.2 130.8 140.2 119.8 140.2z"
+                        : "M160 180H60C49 180 40 171 40 160S49 140 60 140H111.8L6 34.2C2.2 30.6 0 25.6 0 20C0 9 9 0 20 0C25.6 0 30.6 2.2 34.2 5.8L140 111.8V60C140 49 149 40 160 40S180 49 180 60V160C180 171 171 180 160 180zM400 380C400 391 391 400 380 400C374.4 400 369.4 397.8 365.8 394.2L260 288.2V340C260 351 251 360 240 360S220 351 220 340V240C220 229 229 220 240 220H340C351 220 360 229 360 240S351 260 340 260H288.2L394 365.8C397.8 369.4 400 374.4 400 380z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Minimize.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Minimize.displayName = `Blueprint5.Icon.Minimize`;
 export default Minimize;

package/src/generated/components/minus.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 Minus: 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 220H80C69 220 60 211 60 200C60 189 69 180 80 180H320C331 180 340 189 340 200C340 211 331 220 320 220z"
-                    : "M260 180H60C49 180 40 171 40 160C40 149 49 140 60 140H260C271 140 280 149 280 160C280 171 271 180 260 180z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="minus"
-                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}-minus`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="minus" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Minus: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="minus" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M260 180H60C49 180 40 171 40 160C40 149 49 140 60 140H260C271 140 280 149 280 160C280 171 271 180 260 180z"
+                        : "M320 220H80C69 220 60 211 60 200C60 189 69 180 80 180H320C331 180 340 189 340 200C340 211 331 220 320 220z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Minus.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Minus.displayName = `Blueprint5.Icon.Minus`;
 export default Minus;

package/src/generated/components/mobile-phone.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 MobilePhone: 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
-                    ? "M300 400H100C89 400 80 391 80 380V20C80 9 89 0 100 0H300C311 0 320 9 320 20V380C320 391 311 400 300 400zM200 20C189 20 180 29 180 40C180 51 189 60 200 60S220 51 220 40C220 29 211 20 200 20zM280 80H120V340H280V80z"
-                    : "M240 320H80C69 320 60 311 60 300V20C60 9 69 0 80 0H240C251 0 260 9 260 20V300C260 311 251 320 240 320zM160 20C149 20 140 29 140 40C140 51 149 60 160 60S180 51 180 40C180 29 171 20 160 20zM220 80H100V260H220V80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="mobile-phone"
-                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}-mobile-phone`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="mobile-phone" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const MobilePhone: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="mobile-phone" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M240 320H80C69 320 60 311 60 300V20C60 9 69 0 80 0H240C251 0 260 9 260 20V300C260 311 251 320 240 320zM160 20C149 20 140 29 140 40C140 51 149 60 160 60S180 51 180 40C180 29 171 20 160 20zM220 80H100V260H220V80z"
+                        : "M300 400H100C89 400 80 391 80 380V20C80 9 89 0 100 0H300C311 0 320 9 320 20V380C320 391 311 400 300 400zM200 20C189 20 180 29 180 40C180 51 189 60 200 60S220 51 220 40C220 29 211 20 200 20zM280 80H120V340H280V80z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+MobilePhone.defaultProps = {
+    size: IconSize.STANDARD,
+};
 MobilePhone.displayName = `Blueprint5.Icon.MobilePhone`;
 export default MobilePhone;

package/src/generated/components/mobile-video.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 MobileVideo: 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 300C374.4 300 369.4 297.8 365.8 294.2L300 228.2C300 267.2000000000001 300 300 300 300C300 311 291 320 280 320H20C9 320 0 311 0 300V100C0 89 9 80 20 80H280C291 80 300 89 300 100C300 100 300 132.8 300 171.8L365.8 106C369.4 102.2 374.4 100 380 100C391 100 400 109 400 120V280C400 291 391 300 380 300z"
-                    : "M300 240C294.4000000000001 240 289.4000000000001 237.8 285.8 234.2L240 188.2V240C240 251 231 260 220 260H20C9 260 0 251 0 240V80C0 69 9 60 20 60H220C231 60 240 69 240 80V131.8L285.8 86C289.4000000000001 82.2 294.4000000000001 80 300 80C311 80 320 89 320 100V220C320 231 311 240 300 240z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="mobile-video"
-                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}-mobile-video`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="mobile-video" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const MobileVideo: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="mobile-video" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 240C294.4000000000001 240 289.4000000000001 237.8 285.8 234.2L240 188.2V240C240 251 231 260 220 260H20C9 260 0 251 0 240V80C0 69 9 60 20 60H220C231 60 240 69 240 80V131.8L285.8 86C289.4000000000001 82.2 294.4000000000001 80 300 80C311 80 320 89 320 100V220C320 231 311 240 300 240z"
+                        : "M380 300C374.4 300 369.4 297.8 365.8 294.2L300 228.2C300 267.2000000000001 300 300 300 300C300 311 291 320 280 320H20C9 320 0 311 0 300V100C0 89 9 80 20 80H280C291 80 300 89 300 100C300 100 300 132.8 300 171.8L365.8 106C369.4 102.2 374.4 100 380 100C391 100 400 109 400 120V280C400 291 391 300 380 300z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+MobileVideo.defaultProps = {
+    size: IconSize.STANDARD,
+};
 MobileVideo.displayName = `Blueprint5.Icon.MobileVideo`;
 export default MobileVideo;

package/src/generated/components/modal-filled.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 ModalFilled: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M400 300L400 40C400 28.954306 391.0456940000001 20 380 20L20 20C8.954305 20 0 28.954306 0 40L0 300L400 300zM340 380L380 380C391.0456940000001 380 400 371.045695 400 360L400 340L340 340L340 380zM300 340L0 340L0 360C0 371.045695 8.954305 380 20 380L300 380L300 340z"
-                    : "M300 300L20 300C9 300 0 291 0 280L0 40C0 29 9 20 20 20L300 20C311 20 320 29 320 40L320 280C320 291 311 300 300 300zM320 220L0 220L0 260L320 260L320 220zM260 260L220 260L220 300L260 300L260 260z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="modal-filled"
-                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}-modal-filled`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="modal-filled" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const ModalFilled: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="modal-filled" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 300L20 300C9 300 0 291 0 280L0 40C0 29 9 20 20 20L300 20C311 20 320 29 320 40L320 280C320 291 311 300 300 300zM320 220L0 220L0 260L320 260L320 220zM260 260L220 260L220 300L260 300L260 260z"
+                        : "M400 300L400 40C400 28.954306 391.0456940000001 20 380 20L20 20C8.954305 20 0 28.954306 0 40L0 300L400 300zM340 380L380 380C391.0456940000001 380 400 371.045695 400 360L400 340L340 340L340 380zM300 340L0 340L0 360C0 371.045695 8.954305 380 20 380L300 380L300 340z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+ModalFilled.defaultProps = {
+    size: IconSize.STANDARD,
+};
 ModalFilled.displayName = `Blueprint5.Icon.ModalFilled`;
 export default ModalFilled;

package/src/generated/components/modal.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 Modal: 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
-                    ? "M379.999998 380C391.0456940000001 380 399.999998 371.045695 399.999998 360L399.999998 40C399.999998 28.954306 391.0456940000001 20 379.999998 20L19.999999 20C8.954304 20 -0.0000010000002 28.954306 -0.0000010000002 40L-0.0000010000002 360C-0.0000010000002 371.045695 8.954304 380 19.999999 380L379.999998 380zM360 300L40 300L40 60L360 60L360 300zM300 360L260 360L260 320L300 320L300 360zM360 360L320 360L320 320L360 320L360 360z"
-                    : "M300 300C311.045694 300 320 291.045695 320 280L320 40C320 28.954306 311.045694 20 300 20L20 20C8.954305 20 0 28.954306 0 40L0 280C0 291.045695 8.954305 300 20 300L300 300zM280 220L40 220L40 60L280 60L280 220zM220 280L180 280L180 240L220 240L220 280zM280 280L240 280L240 240L280 240L280 280z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="modal"
-                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}-modal`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="modal" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Modal: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="modal" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 300C311.045694 300 320 291.045695 320 280L320 40C320 28.954306 311.045694 20 300 20L20 20C8.954305 20 0 28.954306 0 40L0 280C0 291.045695 8.954305 300 20 300L300 300zM280 220L40 220L40 60L280 60L280 220zM220 280L180 280L180 240L220 240L220 280zM280 280L240 280L240 240L280 240L280 280z"
+                        : "M379.999998 380C391.0456940000001 380 399.999998 371.045695 399.999998 360L399.999998 40C399.999998 28.954306 391.0456940000001 20 379.999998 20L19.999999 20C8.954304 20 -0.0000010000002 28.954306 -0.0000010000002 40L-0.0000010000002 360C-0.0000010000002 371.045695 8.954304 380 19.999999 380L379.999998 380zM360 300L40 300L40 60L360 60L360 300zM300 360L260 360L260 320L300 320L300 360zM360 360L320 360L320 320L360 320L360 360z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Modal.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Modal.displayName = `Blueprint5.Icon.Modal`;
 export default Modal;