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

package/src/generated/components/wrench.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 Wrench: 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
-                    ? "M396 311.2L322.6 238L251.6 252.2L237.4 322.8L310.8 395.8C270.6 406.4 226.2 396.4 194.8 365.2C157.6 328.2 150.2 273.2 172 228.6L11.8 68.2C4.4 61 0 51 0 40C0 18 17.8 0 40 0C51 0 61 4.4 68.2 11.8L228.8 172.6C273.4 151.6 328.2 159.2 365.2 195.8C396.6 227 406.6 271.2 396 311.2z"
-                    : "M316.6 246L255.4 185L198.6 199L184.6 255.6L245.8 316.6C212.4 325.4 175.4 317 149.2 290.8C120 261.8 112.6 219.4 126.8 183.6L11.6 68.4C4.4 61.2 0 51.2 0 40.2C0 18.2 18 0.2 40 0.2C51 0.2 61 4.6 68.2 12V12L183.6 127.4C219.4 113.6 261.8 120.8 290.6 149.8C317 175.8 325.4 212.8 316.6 246z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="wrench"
-                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}-wrench`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="wrench" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Wrench: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="wrench" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M316.6 246L255.4 185L198.6 199L184.6 255.6L245.8 316.6C212.4 325.4 175.4 317 149.2 290.8C120 261.8 112.6 219.4 126.8 183.6L11.6 68.4C4.4 61.2 0 51.2 0 40.2C0 18.2 18 0.2 40 0.2C51 0.2 61 4.6 68.2 12V12L183.6 127.4C219.4 113.6 261.8 120.8 290.6 149.8C317 175.8 325.4 212.8 316.6 246z"
+                        : "M396 311.2L322.6 238L251.6 252.2L237.4 322.8L310.8 395.8C270.6 406.4 226.2 396.4 194.8 365.2C157.6 328.2 150.2 273.2 172 228.6L11.8 68.2C4.4 61 0 51 0 40C0 18 17.8 0 40 0C51 0 61 4.4 68.2 11.8L228.8 172.6C273.4 151.6 328.2 159.2 365.2 195.8C396.6 227 406.6 271.2 396 311.2z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Wrench.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Wrench.displayName = `Blueprint5.Icon.Wrench`;
 export default Wrench;

package/src/generated/components/zoom-in.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 ZoomIn: 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
-                    ? "M391.2 51.2L292.4 150C309.8 175.8 320 206.6 320 240C320 328.4 248.4 400 160 400S0 328.4 0 240S71.6 80 160 80C193.4 80 224.2 90.2 250 107.6L348.8 8.8C354.2000000000001 3.4 361.8 0 370 0C386.6 0 400 13.4 400 30C400 38.2 396.6 45.8 391.2 51.2zM160 120C93.8 120 40 173.8 40 240S93.8 360 160 360S280 306.2000000000001 280 240S226.2 120 160 120zM220 260H180V300C180 311 171 320 160 320S140 311 140 300V260H100C89 260 80 251 80 240C80 229 89 220 100 220H140V180C140 169 149 160 160 160S180 169 180 180V220H220C231 220 240 229 240 240C240 251 231 260 220 260z"
-                    : "M159.8 200.2V240.2C159.8 251.2 150.8 260.2 139.8 260.2S119.8 251.2 119.8 240.2V200.2H79.8C68.8 200.2 59.8 191.2 59.8 180.2S68.8 160.2 79.8 160.2H119.8V120.2C119.8 109.2 128.8 100.2 139.8 100.2S159.8 109.2 159.8 120.2V160.2H199.8C210.8 160.2 219.8 169.2 219.8 180.2S210.8 200.2 199.8 200.2H159.8zM311 51.4L257.6 105C271.6 126.8 279.8 152.6 279.8 180.2C279.8 257.6 217.2 320.2 139.8 320.2S-0.2 257.6 -0.2 180.2S62.4 40.2 139.8 40.2C167.6 40.2 193.4 48.6 215 62.4L268.6 9C274 3.6 281.6 0.2 289.8 0.2C306.4 0.2 319.8 13.6 319.8 30.2C319.8 38.4 316.4 46 311 51.4zM139.8 80.2C84.6 80.2 39.8 125 39.8 180.2S84.6 280.2 139.8 280.2S239.8 235.4 239.8 180.2S195 80.2 139.8 80.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="zoom-in"
-                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}-zoom-in`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="zoom-in" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const ZoomIn: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="zoom-in" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M159.8 200.2V240.2C159.8 251.2 150.8 260.2 139.8 260.2S119.8 251.2 119.8 240.2V200.2H79.8C68.8 200.2 59.8 191.2 59.8 180.2S68.8 160.2 79.8 160.2H119.8V120.2C119.8 109.2 128.8 100.2 139.8 100.2S159.8 109.2 159.8 120.2V160.2H199.8C210.8 160.2 219.8 169.2 219.8 180.2S210.8 200.2 199.8 200.2H159.8zM311 51.4L257.6 105C271.6 126.8 279.8 152.6 279.8 180.2C279.8 257.6 217.2 320.2 139.8 320.2S-0.2 257.6 -0.2 180.2S62.4 40.2 139.8 40.2C167.6 40.2 193.4 48.6 215 62.4L268.6 9C274 3.6 281.6 0.2 289.8 0.2C306.4 0.2 319.8 13.6 319.8 30.2C319.8 38.4 316.4 46 311 51.4zM139.8 80.2C84.6 80.2 39.8 125 39.8 180.2S84.6 280.2 139.8 280.2S239.8 235.4 239.8 180.2S195 80.2 139.8 80.2z"
+                        : "M391.2 51.2L292.4 150C309.8 175.8 320 206.6 320 240C320 328.4 248.4 400 160 400S0 328.4 0 240S71.6 80 160 80C193.4 80 224.2 90.2 250 107.6L348.8 8.8C354.2000000000001 3.4 361.8 0 370 0C386.6 0 400 13.4 400 30C400 38.2 396.6 45.8 391.2 51.2zM160 120C93.8 120 40 173.8 40 240S93.8 360 160 360S280 306.2000000000001 280 240S226.2 120 160 120zM220 260H180V300C180 311 171 320 160 320S140 311 140 300V260H100C89 260 80 251 80 240C80 229 89 220 100 220H140V180C140 169 149 160 160 160S180 169 180 180V220H220C231 220 240 229 240 240C240 251 231 260 220 260z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+ZoomIn.defaultProps = {
+    size: IconSize.STANDARD,
+};
 ZoomIn.displayName = `Blueprint5.Icon.ZoomIn`;
 export default ZoomIn;

package/src/generated/components/zoom-out.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 ZoomOut: 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
-                    ? "M220 260H100C89 260 80 251 80 240C80 229 89 220 100 220H220C231 220 240 229 240 240C240 251 231 260 220 260zM391.2 51.2L292.4 150C309.8 175.8 320 206.6 320 240C320 328.4 248.4 400 160 400S0 328.4 0 240S71.6 80 160 80C193.4 80 224.2 90.2 250 107.6L348.8 8.8C354.2000000000001 3.4 361.8 0 370 0C386.6 0 400 13.4 400 30C400 38.2 396.6 45.8 391.2 51.2zM160 120C93.8 120 40 173.8 40 240S93.8 360 160 360S280 306.2000000000001 280 240S226.2 120 160 120z"
-                    : "M79.8 200.2C68.8 200.2 59.8 191.2 59.8 180.2S68.8 160.2 79.8 160.2H199.8C210.8 160.2 219.8 169.2 219.8 180.2S210.8 200.2 199.8 200.2H79.8zM311 51.4L257.6 105C271.6 126.8 279.8 152.6 279.8 180.2C279.8 257.6 217.2 320.2 139.8 320.2S-0.2 257.6 -0.2 180.2S62.4 40.2 139.8 40.2C167.6 40.2 193.4 48.6 215 62.4L268.6 9C274 3.6 281.6 0.2 289.8 0.2C306.4 0.2 319.8 13.6 319.8 30.2C319.8 38.4 316.4 46 311 51.4zM139.8 80.2C84.6 80.2 39.8 125 39.8 180.2S84.6 280.2 139.8 280.2S239.8 235.4 239.8 180.2S195 80.2 139.8 80.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="zoom-out"
-                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}-zoom-out`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="zoom-out" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const ZoomOut: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="zoom-out" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M79.8 200.2C68.8 200.2 59.8 191.2 59.8 180.2S68.8 160.2 79.8 160.2H199.8C210.8 160.2 219.8 169.2 219.8 180.2S210.8 200.2 199.8 200.2H79.8zM311 51.4L257.6 105C271.6 126.8 279.8 152.6 279.8 180.2C279.8 257.6 217.2 320.2 139.8 320.2S-0.2 257.6 -0.2 180.2S62.4 40.2 139.8 40.2C167.6 40.2 193.4 48.6 215 62.4L268.6 9C274 3.6 281.6 0.2 289.8 0.2C306.4 0.2 319.8 13.6 319.8 30.2C319.8 38.4 316.4 46 311 51.4zM139.8 80.2C84.6 80.2 39.8 125 39.8 180.2S84.6 280.2 139.8 280.2S239.8 235.4 239.8 180.2S195 80.2 139.8 80.2z"
+                        : "M220 260H100C89 260 80 251 80 240C80 229 89 220 100 220H220C231 220 240 229 240 240C240 251 231 260 220 260zM391.2 51.2L292.4 150C309.8 175.8 320 206.6 320 240C320 328.4 248.4 400 160 400S0 328.4 0 240S71.6 80 160 80C193.4 80 224.2 90.2 250 107.6L348.8 8.8C354.2000000000001 3.4 361.8 0 370 0C386.6 0 400 13.4 400 30C400 38.2 396.6 45.8 391.2 51.2zM160 120C93.8 120 40 173.8 40 240S93.8 360 160 360S280 306.2000000000001 280 240S226.2 120 160 120z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+ZoomOut.defaultProps = {
+    size: IconSize.STANDARD,
+};
 ZoomOut.displayName = `Blueprint5.Icon.ZoomOut`;
 export default ZoomOut;

package/src/generated/components/zoom-to-fit.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 ZoomToFit: 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 260C31 260 40 269 40 280V360H120C131 360 140 369 140 380C140 391 131 400 120 400H20C9 400 0 391 0 380V280C0 269 9 260 20 260zM120 240C120 251 111 260 100 260C94.4 260 89.4 257.8 85.8 254.2L45.8 214.2C42.2 210.6 40 205.6 40 200C40 194.4 42.2 189.4 45.8 185.8L85.8 145.8C89.4 142.2 94.4 140 100 140C111 140 120 149 120 160C120 165.6 117.8 170.6 114.2 174.2L88.2 200L114 225.8C117.8 229.4 120 234.4 120 240zM160 280C165.6 280 170.6 282.2 174.2 285.8L200 311.8L225.8 286C229.4 282.2 234.4 280 240 280C251 280 260 289 260 300C260 305.6 257.8 310.6 254.2 314.2L214.2 354.2C210.6 357.8 205.6 360 200 360S189.4 357.8 185.8 354.2L145.8 314.2C142.2 310.6 140 305.6 140 300C140 289 149 280 160 280zM120 40H40V120C40 131 31 140 20 140S0 131 0 120V20C0 9 9 0 20 0H120C131 0 140 9 140 20C140 31 131 40 120 40zM280 160C280 149 289 140 300 140C305.6 140 310.6 142.2 314.2000000000001 145.8L354.2000000000001 185.8C357.8 189.4 360 194.4 360 200C360 205.6 357.8 210.6 354.2000000000001 214.2L314.2000000000001 254.2C310.6 257.8 305.6 260 300 260C289 260 280 251 280 240C280 234.4 282.2 229.4 285.8 225.8L311.8 200L286 174.2C282.2 170.6 280 165.6 280 160zM380 400H280C269 400 260 391 260 380C260 369 269 360 280 360H360V280C360 269 369 260 380 260S400 269 400 280V380C400 391 391 400 380 400zM240 120C234.4 120 229.4 117.8 225.8 114.2000000000001L200 88.2L174.2 114C170.6 117.8 165.6 120 160 120C149 120 140 111 140 100C140 94.4 142.2 89.4 145.8 85.8L185.8 45.8C189.4 42.2 194.4 40 200 40S210.6 42.2 214.2 45.8L254.2 85.8C257.8 89.4 260 94.4 260 100C260 111 251 120 240 120zM380 140C369 140 360 131 360 120V40H280C269 40 260 31 260 20C260 9 269 0 280 0H380C391 0 400 9 400 20V120C400 131 391 140 380 140z"
-                    : "M220 120C220 109 229 100 240 100C245.6 100 250.6 102.2 254.2 105.8L294.2000000000001 145.8C297.8 149.4 300 154.4 300 160C300 165.6 297.8 170.6 294.2000000000001 174.2L254.2 214.2C250.6 217.8 245.6 220 240 220C229 220 220 211 220 200C220 194.4 222.2 189.4 225.8 185.8L251.8 160L226 134.2C222.2 130.6 220 125.6 220 120zM20 220C31 220 40 229 40 240V280H80C91 280 100 289 100 300C100 311 91 320 80 320H20C9 320 0 311 0 300V240C0 229 9 220 20 220zM100 200C100 211 91 220 80 220C74.4 220 69.4 217.8 65.8 214.2L25.8 174.2C22.2 170.6 20 165.6 20 160C20 154.4 22.2 149.4 25.8 145.8L65.8 105.8C69.4 102.2 74.4 100 80 100C91 100 100 109 100 120C100 125.6 97.8 130.6 94.2 134.2L68.2 160L94 185.8C97.8 189.4 100 194.4 100 200zM120 220C125.6 220 130.6 222.2 134.2 225.8L160 251.8L185.8 226C189.4 222.2 194.4 220 200 220C211 220 220 229 220 240C220 245.6 217.8 250.6 214.2 254.2L174.2 294.2C170.6 297.8 165.6 300 160 300S149.4 297.8 145.8 294.2L105.8 254.2C102.2 250.6 100 245.6 100 240C100 229 109 220 120 220zM300 100C289 100 280 91 280 80V40H240C229 40 220 31 220 20C220 9 229 0 240 0H300C311 0 320 9 320 20V80C320 91 311 100 300 100zM300 320H240C229 320 220 311 220 300C220 289 229 280 240 280H280V240C280 229 289 220 300 220S320 229 320 240V300C320 311 311 320 300 320zM80 40H40V80C40 91 31 100 20 100S0 91 0 80V20C0 9 9 0 20 0H80C91 0 100 9 100 20C100 31 91 40 80 40zM200 100C194.4 100 189.4 97.8 185.8 94.2L160 68.2L134.2 94C130.6 97.8 125.6 100 120 100C109 100 100 91 100 80C100 74.4 102.2 69.4 105.8 65.8L145.8 25.8C149.4 22.2 154.4 20 160 20S170.6 22.2 174.2 25.8L214.2 65.8C217.8 69.4 220 74.4 220 80C220 91 211 100 200 100z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="zoom-to-fit"
-                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}-zoom-to-fit`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="zoom-to-fit" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const ZoomToFit: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="zoom-to-fit" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M220 120C220 109 229 100 240 100C245.6 100 250.6 102.2 254.2 105.8L294.2000000000001 145.8C297.8 149.4 300 154.4 300 160C300 165.6 297.8 170.6 294.2000000000001 174.2L254.2 214.2C250.6 217.8 245.6 220 240 220C229 220 220 211 220 200C220 194.4 222.2 189.4 225.8 185.8L251.8 160L226 134.2C222.2 130.6 220 125.6 220 120zM20 220C31 220 40 229 40 240V280H80C91 280 100 289 100 300C100 311 91 320 80 320H20C9 320 0 311 0 300V240C0 229 9 220 20 220zM100 200C100 211 91 220 80 220C74.4 220 69.4 217.8 65.8 214.2L25.8 174.2C22.2 170.6 20 165.6 20 160C20 154.4 22.2 149.4 25.8 145.8L65.8 105.8C69.4 102.2 74.4 100 80 100C91 100 100 109 100 120C100 125.6 97.8 130.6 94.2 134.2L68.2 160L94 185.8C97.8 189.4 100 194.4 100 200zM120 220C125.6 220 130.6 222.2 134.2 225.8L160 251.8L185.8 226C189.4 222.2 194.4 220 200 220C211 220 220 229 220 240C220 245.6 217.8 250.6 214.2 254.2L174.2 294.2C170.6 297.8 165.6 300 160 300S149.4 297.8 145.8 294.2L105.8 254.2C102.2 250.6 100 245.6 100 240C100 229 109 220 120 220zM300 100C289 100 280 91 280 80V40H240C229 40 220 31 220 20C220 9 229 0 240 0H300C311 0 320 9 320 20V80C320 91 311 100 300 100zM300 320H240C229 320 220 311 220 300C220 289 229 280 240 280H280V240C280 229 289 220 300 220S320 229 320 240V300C320 311 311 320 300 320zM80 40H40V80C40 91 31 100 20 100S0 91 0 80V20C0 9 9 0 20 0H80C91 0 100 9 100 20C100 31 91 40 80 40zM200 100C194.4 100 189.4 97.8 185.8 94.2L160 68.2L134.2 94C130.6 97.8 125.6 100 120 100C109 100 100 91 100 80C100 74.4 102.2 69.4 105.8 65.8L145.8 25.8C149.4 22.2 154.4 20 160 20S170.6 22.2 174.2 25.8L214.2 65.8C217.8 69.4 220 74.4 220 80C220 91 211 100 200 100z"
+                        : "M20 260C31 260 40 269 40 280V360H120C131 360 140 369 140 380C140 391 131 400 120 400H20C9 400 0 391 0 380V280C0 269 9 260 20 260zM120 240C120 251 111 260 100 260C94.4 260 89.4 257.8 85.8 254.2L45.8 214.2C42.2 210.6 40 205.6 40 200C40 194.4 42.2 189.4 45.8 185.8L85.8 145.8C89.4 142.2 94.4 140 100 140C111 140 120 149 120 160C120 165.6 117.8 170.6 114.2 174.2L88.2 200L114 225.8C117.8 229.4 120 234.4 120 240zM160 280C165.6 280 170.6 282.2 174.2 285.8L200 311.8L225.8 286C229.4 282.2 234.4 280 240 280C251 280 260 289 260 300C260 305.6 257.8 310.6 254.2 314.2L214.2 354.2C210.6 357.8 205.6 360 200 360S189.4 357.8 185.8 354.2L145.8 314.2C142.2 310.6 140 305.6 140 300C140 289 149 280 160 280zM120 40H40V120C40 131 31 140 20 140S0 131 0 120V20C0 9 9 0 20 0H120C131 0 140 9 140 20C140 31 131 40 120 40zM280 160C280 149 289 140 300 140C305.6 140 310.6 142.2 314.2000000000001 145.8L354.2000000000001 185.8C357.8 189.4 360 194.4 360 200C360 205.6 357.8 210.6 354.2000000000001 214.2L314.2000000000001 254.2C310.6 257.8 305.6 260 300 260C289 260 280 251 280 240C280 234.4 282.2 229.4 285.8 225.8L311.8 200L286 174.2C282.2 170.6 280 165.6 280 160zM380 400H280C269 400 260 391 260 380C260 369 269 360 280 360H360V280C360 269 369 260 380 260S400 269 400 280V380C400 391 391 400 380 400zM240 120C234.4 120 229.4 117.8 225.8 114.2000000000001L200 88.2L174.2 114C170.6 117.8 165.6 120 160 120C149 120 140 111 140 100C140 94.4 142.2 89.4 145.8 85.8L185.8 45.8C189.4 42.2 194.4 40 200 40S210.6 42.2 214.2 45.8L254.2 85.8C257.8 89.4 260 94.4 260 100C260 111 251 120 240 120zM380 140C369 140 360 131 360 120V40H280C269 40 260 31 260 20C260 9 269 0 280 0H380C391 0 400 9 400 20V120C400 131 391 140 380 140z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+ZoomToFit.defaultProps = {
+    size: IconSize.STANDARD,
+};
 ZoomToFit.displayName = `Blueprint5.Icon.ZoomToFit`;
 export default ZoomToFit;

package/src/iconLoader.ts

@@ -14,36 +14,33 @@
  * limitations under the License.
  */
 
-import * as React from "react";
-
 import { IconName, IconNames } from "./iconNames";
+import { IconSize } from "./iconSize";
+import type { IconPaths } from "./iconSvgPaths";
 import { wrapWithTimer } from "./loaderUtils";
-import { SVGIconProps } from "./svgIconProps";
-
-export type IconComponent = React.FC<SVGIconProps>;
 
-/** Given an icon name and size, loads the icon component from the generated source module in this package. */
-export type IconComponentLoader = (iconName: IconName) => Promise<IconComponent>;
+/** Given an icon name and size, loads the icon paths that define it. */
+export type IconPathsLoader = (iconName: IconName, iconSize: IconSize) => Promise<IconPaths>;
 
 export interface IconLoaderOptions {
     /*
-     * Optional custom loader for icon contents, useful if the default loader which uses a
+     * Optional custom loader for icon path, useful if the default loader which uses a
      * webpack-configured dynamic import() is not suitable for some reason.
      */
-    loader?: IconComponentLoader;
+    loader?: IconPathsLoader;
 }
 
 /**
- * The default icon contents loader implementation, optimized for webpack.
+ * The default icon paths loader implementation, optimized for webpack.
  *
  * @see https://webpack.js.org/api/module-methods/#magic-comments for dynamic import() reference
  */
-const defaultIconContentsLoader: IconComponentLoader = async name => {
+const defaultIconPathsLoader: IconPathsLoader = async (name, size) => {
     return (
         await import(
             /* webpackInclude: /\.js$/ */
             /* webpackMode: "lazy-once" */
-            `./generated/components/${name}`
+            `./generated/${size}px/paths/${name}`
         )
     ).default;
 };
@@ -53,24 +50,27 @@ const defaultIconContentsLoader: IconComponentLoader = async name => {
  */
 export class Icons {
     /** @internal */
-    public loadedIcons: Map<IconName, IconComponent> = new Map();
+    public loadedIconPaths16: Map<IconName, IconPaths> = new Map();
+
+    /** @internal */
+    public loadedIconPaths20: Map<IconName, IconPaths> = new Map();
 
     /**
      * Load a single icon for use in Blueprint components.
      */
-    public static async load(icon: IconName, options?: IconLoaderOptions): Promise<void>;
+    public static async load(icon: IconName, size: IconSize, options?: IconLoaderOptions): Promise<void>;
     /**
      * Load a set of icons for use in Blueprint components.
      */
     // buggy rule implementation for TS
     // eslint-disable-next-line @typescript-eslint/unified-signatures
-    public static async load(icons: IconName[], options?: IconLoaderOptions): Promise<void>;
-    public static async load(icons: IconName | IconName[], options?: IconLoaderOptions) {
+    public static async load(icons: IconName[], size: number, options?: IconLoaderOptions): Promise<void>;
+    public static async load(icons: IconName | IconName[], size: number, options?: IconLoaderOptions) {
         if (!Array.isArray(icons)) {
             icons = [icons];
         }
 
-        await Promise.all(icons.map(icon => this.loadImpl(icon, options)));
+        await Promise.all(icons.map(icon => this.loadImpl(icon, size, options)));
         return;
     }
 
@@ -79,39 +79,49 @@ export class Icons {
      */
     public static async loadAll(options?: IconLoaderOptions) {
         const allIcons = Object.values(IconNames);
-        wrapWithTimer(`[Blueprint] loading all icons`, () => this.load(allIcons, options));
+        wrapWithTimer(`[Blueprint] loading all icons`, async () => {
+            await Promise.all([
+                this.load(allIcons, IconSize.STANDARD, options),
+                this.load(allIcons, IconSize.LARGE, options),
+            ]);
+        });
     }
 
     /**
-     * Get the icon SVG component. Returns `undefined` if the icon has not been loaded yet.
+     * Get the icon SVG paths. Returns `undefined` if the icon has not been loaded yet.
      */
-    public static getComponent(icon: IconName): IconComponent | undefined {
+    public static getPaths(icon: IconName, size: IconSize): IconPaths | undefined {
         if (!this.isValidIconName(icon)) {
             // don't warn, since this.load() will have warned already
             return undefined;
         }
 
-        return singleton.loadedIcons.get(icon);
+        const loadedIcons = size < IconSize.LARGE ? singleton.loadedIconPaths16 : singleton.loadedIconPaths20;
+        return loadedIcons.get(icon);
     }
 
-    private static async loadImpl(icon: IconName, options?: IconLoaderOptions) {
+    private static async loadImpl(icon: IconName, size: number, options?: IconLoaderOptions) {
         if (!this.isValidIconName(icon)) {
             console.error(`[Blueprint] Unknown icon '${icon}'`);
             return;
-        } else if (singleton.loadedIcons.has(icon)) {
+        }
+
+        const loadedIcons = size < IconSize.LARGE ? singleton.loadedIconPaths16 : singleton.loadedIconPaths20;
+
+        if (loadedIcons.has(icon)) {
             // already loaded, no-op
             return;
         }
 
         // use a custom loader if specified, otherwise use the default one
-        const load = options?.loader ?? defaultIconContentsLoader;
+        const load = options?.loader ?? defaultIconPathsLoader;
 
         try {
-            // load both sizes in parallel
-            const component = await load(icon);
-            singleton.loadedIcons.set(icon, component);
+            const supportedSize = size < IconSize.LARGE ? IconSize.STANDARD : IconSize.LARGE;
+            const paths = await load(icon, supportedSize);
+            loadedIcons.set(icon, paths);
         } catch (e) {
-            console.error(`[Blueprint] Unable to load icon '${icon}'`, e);
+            console.error(`[Blueprint] Unable to load ${size}px icon '${icon}'`, e);
         }
     }
 

package/src/iconSvgPaths.ts

@@ -19,10 +19,13 @@ import { pascalCase } from "change-case";
 import * as IconSvgPaths16 from "./generated/16px/paths";
 import * as IconSvgPaths20 from "./generated/20px/paths";
 import type { IconName } from "./iconNames";
+import { IconSize } from "./iconSize";
 import type { PascalCase } from "./type-utils";
 
 export { IconSvgPaths16, IconSvgPaths20 };
 
+export type IconPaths = string[];
+
 /**
  * Type safe string literal conversion of snake-case icon names to PascalCase icon names.
  * This is useful for indexing into the SVG paths record to extract a single icon's SVG path definition.
@@ -30,3 +33,17 @@ export { IconSvgPaths16, IconSvgPaths20 };
 export function iconNameToPathsRecordKey(name: IconName): PascalCase<IconName> {
     return pascalCase(name) as PascalCase<IconName>;
 }
+
+/**
+ * Get the list of vector paths that define a given icon. These path strings are used to render `<path>`
+ * elements inside an `<svg>` icon element. For full implementation details and nuances, see the icon component
+ * handlebars template and `generate-icon-components` script in the __@blueprintjs/icons__ package.
+ *
+ * Note: this function loads all icon definitions __statically__, which means every icon is included in your
+ * JS bundle. If you are looking for a dynamic icon loader which loads icon definitions on-demand, use
+ * `{ Icons } from "@blueprintjs/icons"`.
+ */
+export function getIconPaths(name: IconName, size: IconSize): IconPaths {
+    const key = iconNameToPathsRecordKey(name);
+    return size === IconSize.STANDARD ? IconSvgPaths16[key] : IconSvgPaths20[key];
+}

package/src/index.ts

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-export { Icons, IconComponent, IconLoaderOptions, IconComponentLoader } from "./iconLoader";
+export { Icons, IconLoaderOptions, IconPathsLoader } from "./iconLoader";
 export { SVGIconProps } from "./svgIconProps";
+export { SVGIconContainer, SVGIconContainerProps } from "./svgIconContainer";
 export { getIconContentString, IconCodepoints } from "./iconCodepoints";
 export { IconName, IconNames } from "./iconNames";
 export { IconSize } from "./iconSize";
-export { IconSvgPaths16, IconSvgPaths20, iconNameToPathsRecordKey } from "./iconSvgPaths";
+export { getIconPaths, IconPaths, IconSvgPaths16, IconSvgPaths20, iconNameToPathsRecordKey } from "./iconSvgPaths";

package/src/loading-icons.md

@@ -64,7 +64,7 @@ The following strategies assume you are bundling with Webpack; if you are using
 to its available APIs.
 </div>
 
-1. Load all icons statically, similar to behavior in Blueprint versions prior to v5.x. This results in the largest bundle size for your main chunk.
+1. Load all icon paths statically, similar to behavior in Blueprint versions prior to v5.x. This results in the largest bundle size for your main chunk.
 
     In the entry point for your bundle, use `Icons.loadAll()` with its default annotated icon loader function _or_ specify
     a custom one. This will to ensure that webpack will bundle all the icon modules in your main chunk
@@ -76,19 +76,19 @@ to its available APIs.
 
     // or, optionally specify a custom loader function optimized for loading all icons statically
     Icons.loadAll({
-        loader: async name => {
+        loader: async (name, size) => {
             return (
                 await import(
                     /* webpackInclude: /\.js$/ */
                     /* webpackMode: "eager" */
-                    `@blueprintjs/icons/lib/esm/generated/components/${name}`
+                    `@blueprintjs/icons/lib/esm/generated/${size}px/paths/${name}`
                 )
             ).default;
         },
     });
     ```
 
-2. Load some icons up front (but still dynamically) with network requests, and the rest lazily/on-demand.
+2. Load some icon paths up front (but still dynamically) with network requests, and the rest lazily/on-demand.
 
     In the entry point for your bundle: