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

package/src/generated/components/lifesaver.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 Lifesaver: 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
-                    ? "M162.851055 107.127638L140.561688 51.40422C158.9376584 44.047172 178.9961952 40 200 40C221.003804 40 241.062342 44.047172 259.438312 51.40422L237.148946 107.127638C225.663964 102.529484 213.127378 100 200 100C186.872622 100 174.3360364 102.529484 162.851055 107.127638zM107.1276374 162.851054C102.529483 174.336036 100 186.872622 100 200C100 213.127378 102.529483 225.6639636 107.1276374 237.148945L51.4042198 259.438312C44.0471728 241.0623416 40 221.0038048 40 200C40 178.996196 44.0471728 158.937658 51.4042198 140.561688L107.1276374 162.851054zM162.851055 292.8723626C174.3360364 297.470517 186.872622 300 200 300C213.127378 300 225.663964 297.470517 237.148946 292.8723626L259.438312 348.5957802C241.062342 355.9528272 221.003804 360 200 360C178.9961952 360 158.9376584 355.9528272 140.561688 348.5957802L162.851055 292.8723626zM292.872362 237.148945C297.470516 225.6639636 300 213.127378 300 200C300 186.872622 297.470516 174.336036 292.872362 162.851054L348.59578 140.561688C355.952828 158.937658 360 178.996196 360 200C360 221.0038048 355.952828 241.0623416 348.59578 259.438312L292.872362 237.148945zM200 140C233.137084 140 260 166.862916 260 200C260 233.137085 233.137084 260 200 260C166.862915 260 140 233.137085 140 200C140 166.862916 166.862915 140 200 140zM200 0C89.54305 0 0 89.54305 0 200C0 310.45695 89.54305 400 200 400C310.45695 400 400 310.45695 400 200C400 89.54305 310.45695 0 200 0z"
-                    : "M188.0974886 85.073364C179.3556866 81.793668 169.8873102 80 160 80C150.1126898 80 140.6443134 81.793668 131.9025114 85.073364L117.8537672 47.610046C130.9664702 42.690502 145.1690348 40 160 40C174.8309652 40 189.0335298 42.690502 202.146232 47.610046L188.0974886 85.073364zM234.926636 131.9025114L272.389954 117.853768C277.309498 130.9664702 280 145.1690348 280 160C280 174.8309652 277.309498 189.0335298 272.389954 202.1462328L234.926636 188.0974886C238.206332 179.3556866 240 169.8873102 240 160C240 150.1126898 238.206332 140.6443134 234.926636 131.9025114zM188.0974886 234.9266362L202.146232 272.3899542000001C189.0335298 277.3094976 174.8309652 280 160 280C145.1690348 280 130.9664702 277.3094976 117.8537672 272.3899542000001L131.9025114 234.9266362C140.6443134 238.2063318 150.1126898 240 160 240C169.8873102 240 179.3556866 238.2063318 188.0974886 234.9266362zM85.0733638 188.0974886L47.6100458 202.1462328C42.6905024 189.0335298 40 174.8309652 40 160C40 145.1690348 42.6905024 130.9664702 47.6100458 117.853768L85.0733638 131.9025114C81.7936682 140.6443134 80 150.1126898 80 160C80 169.8873102 81.7936682 179.3556866 85.0733638 188.0974886zM160 0C71.63444 0 0 71.63444 0 160C0 248.36556 71.63444 320 160 320C248.36556 320 320 248.36556 320 160C320 71.63444 248.36556 0 160 0zM160 120C182.09139 120 200 137.90861 200 160C200 182.09139 182.09139 200 160 200C137.90861 200 120 182.09139 120 160C120 137.90861 137.90861 120 160 120z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="lifesaver"
-                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}-lifesaver`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="lifesaver" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Lifesaver: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="lifesaver" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M188.0974886 85.073364C179.3556866 81.793668 169.8873102 80 160 80C150.1126898 80 140.6443134 81.793668 131.9025114 85.073364L117.8537672 47.610046C130.9664702 42.690502 145.1690348 40 160 40C174.8309652 40 189.0335298 42.690502 202.146232 47.610046L188.0974886 85.073364zM234.926636 131.9025114L272.389954 117.853768C277.309498 130.9664702 280 145.1690348 280 160C280 174.8309652 277.309498 189.0335298 272.389954 202.1462328L234.926636 188.0974886C238.206332 179.3556866 240 169.8873102 240 160C240 150.1126898 238.206332 140.6443134 234.926636 131.9025114zM188.0974886 234.9266362L202.146232 272.3899542000001C189.0335298 277.3094976 174.8309652 280 160 280C145.1690348 280 130.9664702 277.3094976 117.8537672 272.3899542000001L131.9025114 234.9266362C140.6443134 238.2063318 150.1126898 240 160 240C169.8873102 240 179.3556866 238.2063318 188.0974886 234.9266362zM85.0733638 188.0974886L47.6100458 202.1462328C42.6905024 189.0335298 40 174.8309652 40 160C40 145.1690348 42.6905024 130.9664702 47.6100458 117.853768L85.0733638 131.9025114C81.7936682 140.6443134 80 150.1126898 80 160C80 169.8873102 81.7936682 179.3556866 85.0733638 188.0974886zM160 0C71.63444 0 0 71.63444 0 160C0 248.36556 71.63444 320 160 320C248.36556 320 320 248.36556 320 160C320 71.63444 248.36556 0 160 0zM160 120C182.09139 120 200 137.90861 200 160C200 182.09139 182.09139 200 160 200C137.90861 200 120 182.09139 120 160C120 137.90861 137.90861 120 160 120z"
+                        : "M162.851055 107.127638L140.561688 51.40422C158.9376584 44.047172 178.9961952 40 200 40C221.003804 40 241.062342 44.047172 259.438312 51.40422L237.148946 107.127638C225.663964 102.529484 213.127378 100 200 100C186.872622 100 174.3360364 102.529484 162.851055 107.127638zM107.1276374 162.851054C102.529483 174.336036 100 186.872622 100 200C100 213.127378 102.529483 225.6639636 107.1276374 237.148945L51.4042198 259.438312C44.0471728 241.0623416 40 221.0038048 40 200C40 178.996196 44.0471728 158.937658 51.4042198 140.561688L107.1276374 162.851054zM162.851055 292.8723626C174.3360364 297.470517 186.872622 300 200 300C213.127378 300 225.663964 297.470517 237.148946 292.8723626L259.438312 348.5957802C241.062342 355.9528272 221.003804 360 200 360C178.9961952 360 158.9376584 355.9528272 140.561688 348.5957802L162.851055 292.8723626zM292.872362 237.148945C297.470516 225.6639636 300 213.127378 300 200C300 186.872622 297.470516 174.336036 292.872362 162.851054L348.59578 140.561688C355.952828 158.937658 360 178.996196 360 200C360 221.0038048 355.952828 241.0623416 348.59578 259.438312L292.872362 237.148945zM200 140C233.137084 140 260 166.862916 260 200C260 233.137085 233.137084 260 200 260C166.862915 260 140 233.137085 140 200C140 166.862916 166.862915 140 200 140zM200 0C89.54305 0 0 89.54305 0 200C0 310.45695 89.54305 400 200 400C310.45695 400 400 310.45695 400 200C400 89.54305 310.45695 0 200 0z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Lifesaver.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Lifesaver.displayName = `Blueprint5.Icon.Lifesaver`;
 export default Lifesaver;

package/src/generated/components/lightbulb.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 Lightbulb: 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
-                    ? "M126.6 132.2C126.6 125.4 132 120 138.6 120H261.2C267.8 120 273.2 125.4 273.2 132.2C280.6 204.4 320 212 320 278.2C320 345.6 266.2 400 200 400S80 345.6 80 278.2C80 212 119.4 204.4 126.6 132.2L126.6 132.2zM260 100H140C129 100 120 91 120 80C120 69 129 60 140 60H260C271 60 280 69 280 80C280 91 271 100 260 100zM240 40H160C149 40 140 31 140 20C140 9 149 0 160 0H240C251 0 260 9 260 20C260 31 251 40 240 40z"
-                    : "M180.2 40H140.2C129.2 40 120.2 31 120.2 20C120.2 9 129.2 0 140.2 0H180.2C191.2 0 200.2 9 200.2 20C200.2 31 191.4 40 180.2 40zM200.2 100H120.2C109.2 100 100.2 91 100.2 80C100.2 69 109.2 60 120.2 60H200.2C211.2 60 220.2 69 220.2 80C220.2 91 211.4 100 200.2 100zM160.2 320C105.2 320 60.6 281 60.6 233C60.6 185.6 93.2 180.2 99.4 128.6H99.4C99.4 123.8 103.8 119.8 109.4 119.8H211.2C216.8 119.8 221.2 123.6 221.2 128.6C227.4 180.2 260 185.6 260 233C260 281 215.4 320 160.2 320z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="lightbulb"
-                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}-lightbulb`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="lightbulb" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Lightbulb: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="lightbulb" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M180.2 40H140.2C129.2 40 120.2 31 120.2 20C120.2 9 129.2 0 140.2 0H180.2C191.2 0 200.2 9 200.2 20C200.2 31 191.4 40 180.2 40zM200.2 100H120.2C109.2 100 100.2 91 100.2 80C100.2 69 109.2 60 120.2 60H200.2C211.2 60 220.2 69 220.2 80C220.2 91 211.4 100 200.2 100zM160.2 320C105.2 320 60.6 281 60.6 233C60.6 185.6 93.2 180.2 99.4 128.6H99.4C99.4 123.8 103.8 119.8 109.4 119.8H211.2C216.8 119.8 221.2 123.6 221.2 128.6C227.4 180.2 260 185.6 260 233C260 281 215.4 320 160.2 320z"
+                        : "M126.6 132.2C126.6 125.4 132 120 138.6 120H261.2C267.8 120 273.2 125.4 273.2 132.2C280.6 204.4 320 212 320 278.2C320 345.6 266.2 400 200 400S80 345.6 80 278.2C80 212 119.4 204.4 126.6 132.2L126.6 132.2zM260 100H140C129 100 120 91 120 80C120 69 129 60 140 60H260C271 60 280 69 280 80C280 91 271 100 260 100zM240 40H160C149 40 140 31 140 20C140 9 149 0 160 0H240C251 0 260 9 260 20C260 31 251 40 240 40z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Lightbulb.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Lightbulb.displayName = `Blueprint5.Icon.Lightbulb`;
 export default Lightbulb;

package/src/generated/components/lightning.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 Lightning: 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 180H120C108.9544 180 100 188.954 100 200L118.199 381.99006C119.2214 392.2141 127.8248 400 138.0998 400H263.23C272.492 400 280 392.49166 280 383.22966C280 381.09616 279.592 378.9822 278.8 377.0014L224 240H283.56C292.64 240 300 232.64 300 223.5608C300 221.2142 299.498 218.8946 298.526 216.7584L203.242 7.132C201.268 2.788 196.937 0 192.166 0C185.447 0 180 5.446 180 12.166V180z"
-                    : "M140 140H100C88.9544 140 80 148.9542 80 160L97.81 302.4807C99.0612 312.48928 107.5692 320 117.6556 320H203.07C212.42 320 220 312.42018 220 303.07C220 301.03988 219.634 299.0264 218.922 297.1254L182.5 200H223.502C232.614 200 240 192.6132 240 183.5012C240 181.1928 239.516 178.91 238.578 176.8004L163.1996 7.198C161.2538 2.822 156.9126 0 152.1222 0C145.4272 0 140 5.428 140 12.122V140z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="lightning"
-                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}-lightning`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="lightning" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Lightning: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="lightning" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M140 140H100C88.9544 140 80 148.9542 80 160L97.81 302.4807C99.0612 312.48928 107.5692 320 117.6556 320H203.07C212.42 320 220 312.42018 220 303.07C220 301.03988 219.634 299.0264 218.922 297.1254L182.5 200H223.502C232.614 200 240 192.6132 240 183.5012C240 181.1928 239.516 178.91 238.578 176.8004L163.1996 7.198C161.2538 2.822 156.9126 0 152.1222 0C145.4272 0 140 5.428 140 12.122V140z"
+                        : "M180 180H120C108.9544 180 100 188.954 100 200L118.199 381.99006C119.2214 392.2141 127.8248 400 138.0998 400H263.23C272.492 400 280 392.49166 280 383.22966C280 381.09616 279.592 378.9822 278.8 377.0014L224 240H283.56C292.64 240 300 232.64 300 223.5608C300 221.2142 299.498 218.8946 298.526 216.7584L203.242 7.132C201.268 2.788 196.937 0 192.166 0C185.447 0 180 5.446 180 12.166V180z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Lightning.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Lightning.displayName = `Blueprint5.Icon.Lightning`;
 export default Lightning;

package/src/generated/components/link.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 Link: 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
-                    ? "M217 160.4L128.2 71.6L108.2 51.6C101 44.4 91 40 80 40C58 40 40 58 40 80C40 91 44.4 101 51.8 108.2L160.6 217C153.8 218.8 147.2 220 140 220C117.8 220 98.2 210.8 83.6 196.4L83.4 196.6L23.4 136.6L23.6 136.4C9.2 121.8 0 102.2 0 80C0 35.8 35.8 0 80 0C102.2 0 121.8 9.2 136.4 23.6L136.6 23.4L196.6 83.4L196.4 83.6C210.8 98.2 220 117.8 220 140C220 147.2 218.8 153.8 217 160.4zM400 320C400 364.2 364.2000000000001 400 320 400C297.8 400 278.2 390.8 263.6 376.4L263.4 376.6L203.4 316.6L203.6 316.4C189.2 301.8 180 282.2 180 260C180 252.8 181.2 246.2 183 239.6L271.8 328.4000000000001L291.8 348.4000000000001C299 355.6 309 360 320 360C342 360 360 342 360 320C360 309 355.6 299 348.2 291.8L239.4 183C246.2 181.2 252.8 180 260 180C282.2 180 301.8 189.2 316.4 203.6L316.6 203.4L376.6 263.4L376.3999999999999 263.6C390.8 278.2 400 297.8 400 320zM100 120C100 109 109 100 120 100C125.6 100 130.6 102.2 134.2 105.8L294.2000000000001 265.8C297.8 269.4 300 274.4 300 280C300 291 291 300 280 300C274.4000000000001 300 269.4000000000001 297.8 265.8 294.2L225.8 254.2L185.8 214.2L145.8 174.2L105.8 134.2000000000001C102.2 130.6 100 125.6 100 120z"
-                    : "M99.8 80.2C105.4 80.2 110.4 82.4 114 86L234 206C237.6 209.6 239.8 214.6 239.8 220.2C239.8 231.2 230.8 240.2 219.8 240.2C214.2 240.2 209.2 238 205.6 234.4L85.6 114.4C82 110.8 79.8 105.8 79.8 100.2C79.8 89.2 88.8 80.2 99.8 80.2zM176.8 120.6L128 71.8L108 51.8L107.8 52C100.6 44.8 90.8 40 79.8 40C57.8 40 39.8 58 39.8 80C39.8 91 44.6 100.8 51.8 108L51.6 108.2L71.6 128.2L120.4 177C113.8 179 107 180.2 99.8 180.2C77.8 180.2 58 171 43.6 156.4L43.2 156.8L23.2 136.8L23.6 136.4C9 122 -0.2 102.2 -0.2 80.2C-0.2 36 35.6 0.2 79.8 0.2C101.8 0.2 121.6 9.4 136 24L136.4 23.6L156.4 43.6L156 44C170.6 58.4 179.8 78.2 179.8 100.2C179.8 107.2 178.6 114 176.8 120.6zM319.8 240.2C319.8 284.4 284 320.2 239.8 320.2C217.8 320.2 198 311 183.6 296.4L183.2 296.8L163.2 276.8L163.6 276.4C149.2 262 139.8 242.2 139.8 220.2C139.8 213 141 206.4 142.8 199.8L191.6 248.6L211.6 268.6L211.8 268.4C219 275.6 228.8 280.4 239.8 280.4C261.8 280.4 279.8 262.4000000000001 279.8 240.4C279.8 229.4 275 219.6 267.8 212.4L268 212.2L248 192.2L199.4 143.2C206 141.4 212.8 140.2 219.8 140.2C241.8 140.2 261.6 149.4 276 164L276.4 163.6L296.4 183.6L296 184C310.6 198.4 319.8 218 319.8 240.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="link"
-                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}-link`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="link" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Link: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="link" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M99.8 80.2C105.4 80.2 110.4 82.4 114 86L234 206C237.6 209.6 239.8 214.6 239.8 220.2C239.8 231.2 230.8 240.2 219.8 240.2C214.2 240.2 209.2 238 205.6 234.4L85.6 114.4C82 110.8 79.8 105.8 79.8 100.2C79.8 89.2 88.8 80.2 99.8 80.2zM176.8 120.6L128 71.8L108 51.8L107.8 52C100.6 44.8 90.8 40 79.8 40C57.8 40 39.8 58 39.8 80C39.8 91 44.6 100.8 51.8 108L51.6 108.2L71.6 128.2L120.4 177C113.8 179 107 180.2 99.8 180.2C77.8 180.2 58 171 43.6 156.4L43.2 156.8L23.2 136.8L23.6 136.4C9 122 -0.2 102.2 -0.2 80.2C-0.2 36 35.6 0.2 79.8 0.2C101.8 0.2 121.6 9.4 136 24L136.4 23.6L156.4 43.6L156 44C170.6 58.4 179.8 78.2 179.8 100.2C179.8 107.2 178.6 114 176.8 120.6zM319.8 240.2C319.8 284.4 284 320.2 239.8 320.2C217.8 320.2 198 311 183.6 296.4L183.2 296.8L163.2 276.8L163.6 276.4C149.2 262 139.8 242.2 139.8 220.2C139.8 213 141 206.4 142.8 199.8L191.6 248.6L211.6 268.6L211.8 268.4C219 275.6 228.8 280.4 239.8 280.4C261.8 280.4 279.8 262.4000000000001 279.8 240.4C279.8 229.4 275 219.6 267.8 212.4L268 212.2L248 192.2L199.4 143.2C206 141.4 212.8 140.2 219.8 140.2C241.8 140.2 261.6 149.4 276 164L276.4 163.6L296.4 183.6L296 184C310.6 198.4 319.8 218 319.8 240.2z"
+                        : "M217 160.4L128.2 71.6L108.2 51.6C101 44.4 91 40 80 40C58 40 40 58 40 80C40 91 44.4 101 51.8 108.2L160.6 217C153.8 218.8 147.2 220 140 220C117.8 220 98.2 210.8 83.6 196.4L83.4 196.6L23.4 136.6L23.6 136.4C9.2 121.8 0 102.2 0 80C0 35.8 35.8 0 80 0C102.2 0 121.8 9.2 136.4 23.6L136.6 23.4L196.6 83.4L196.4 83.6C210.8 98.2 220 117.8 220 140C220 147.2 218.8 153.8 217 160.4zM400 320C400 364.2 364.2000000000001 400 320 400C297.8 400 278.2 390.8 263.6 376.4L263.4 376.6L203.4 316.6L203.6 316.4C189.2 301.8 180 282.2 180 260C180 252.8 181.2 246.2 183 239.6L271.8 328.4000000000001L291.8 348.4000000000001C299 355.6 309 360 320 360C342 360 360 342 360 320C360 309 355.6 299 348.2 291.8L239.4 183C246.2 181.2 252.8 180 260 180C282.2 180 301.8 189.2 316.4 203.6L316.6 203.4L376.6 263.4L376.3999999999999 263.6C390.8 278.2 400 297.8 400 320zM100 120C100 109 109 100 120 100C125.6 100 130.6 102.2 134.2 105.8L294.2000000000001 265.8C297.8 269.4 300 274.4 300 280C300 291 291 300 280 300C274.4000000000001 300 269.4000000000001 297.8 265.8 294.2L225.8 254.2L185.8 214.2L145.8 174.2L105.8 134.2000000000001C102.2 130.6 100 125.6 100 120z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Link.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Link.displayName = `Blueprint5.Icon.Link`;
 export default Link;

package/src/generated/components/list-columns.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 ListColumns: 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
-                    ? "M0 340.5315614L0 359.269103C0 370.63122924 9.18978912 379.8006644518 20.5771366 380L159.4228634 380C170.8102108 380 180 370.63122924 180 359.4684386L180 340.5315614C180 329.1694352 170.6104328 320 159.4228634 320L20.5771366 320C9.18978912 320 0 329.1694352 0 340.5315614zM0 240.5315614L0 259.269103C0 270.6312292 9.18978912 279.8006644 20.5771366 280L159.4228634 280C170.8102108 280 180 270.6312292 180 259.4684386L180 240.5315614C180 229.1694352 170.6104328 220 159.4228634 220L20.5771366 220C9.18978912 220 0 229.1694352 0 240.5315614zM0 140.531562L0 159.269102C0 170.63123 9.18978912 179.800664 20.5771366 180L159.4228634 180C170.8102108 180 180 170.63123 180 159.468438L180 140.531562C180 129.169436 170.6104328 120 159.4228634 120L20.5771366 120C9.18978912 120 0 129.169436 0 140.531562zM0 40.531562L0 59.269102C0 70.6312300000001 9.18978912 79.800664 20.5771366 80L159.4228634 80C170.8102108 80 180 70.6312300000001 180 59.4684380000001L180 40.531562C180 29.169436 170.6104328 20 159.4228634 20L20.5771366 20C9.18978912 20 0 29.169436 0 40.531562zM220 340.5315614L220 359.269103C220 370.63122924 229.18979 379.8006644518 240.577136 380L379.422864 380C390.81021 380 400 370.63122924 400 359.4684386L400 340.5315614C400 329.1694352 390.610432 320 379.422864 320L240.577136 320C229.18979 320 220 329.1694352 220 340.5315614zM220 240.5315614L220 259.269103C220 270.6312292 229.18979 279.8006644 240.577136 280L379.422864 280C390.81021 280 400 270.6312292 400 259.4684386L400 240.5315614C400 229.1694352 390.610432 220 379.422864 220L240.577136 220C229.18979 220 220 229.1694352 220 240.5315614zM220 140.531562L220 159.269102C220 170.63123 229.18979 179.800664 240.577136 180L379.422864 180C390.81021 180 400 170.63123 400 159.468438L400 140.531562C400 129.169436 390.610432 120 379.422864 120L240.577136 120C229.18979 120 220 129.169436 220 140.531562zM220 40.531562L220 59.269102C220 70.6312300000001 229.18979 79.800664 240.577136 80L379.422864 80C390.81021 80 400 70.6312300000001 400 59.4684380000001L400 40.531562C400 29.169436 390.610432 20 379.422864 20L240.577136 20C229.18979 20 220 29.169436 220 40.531562z"
-                    : "M120 300C131 300 140 291 140 280C140 269 131 260 120 260L20 260C9 260 0 269 0 280C0 291 9 300 20 300L120 300zM120 220C131 220 140 211 140 200C140 189 131 180 120 180L20 180C9 180 0 189 0 200C0 211 9 220 20 220L120 220zM120 140C131 140 140 131 140 120C140 109 131 100 120 100L20 100C9 100 0 109 0 120C0 131 9 140 20 140L120 140zM120 60C131 60 140 51 140 40C140 29 131 20 120 20L20 20C9 20 0 29 0 40C0 51 9 60 20 60L120 60zM300 300C311 300 320 291 320 280C320 269 311 260 300 260L200 260C189 260 180 269 180 280C180 291 189 300 200 300L300 300zM300 220C311 220 320 211 320 200C320 189 311 180 300 180L200 180C189 180 180 189 180 200C180 211 189 220 200 220L300 220zM300 140C311 140 320 131 320 120C320 109 311 100 300 100L200 100C189 100 180 109 180 120C180 131 189 140 200 140L300 140zM300 60C311 60 320 51 320 40C320 29 311 20 300 20L200 20C189 20 180 29 180 40C180 51 189 60 200 60L300 60z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="list-columns"
-                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}-list-columns`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="list-columns" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const ListColumns: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="list-columns" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M120 300C131 300 140 291 140 280C140 269 131 260 120 260L20 260C9 260 0 269 0 280C0 291 9 300 20 300L120 300zM120 220C131 220 140 211 140 200C140 189 131 180 120 180L20 180C9 180 0 189 0 200C0 211 9 220 20 220L120 220zM120 140C131 140 140 131 140 120C140 109 131 100 120 100L20 100C9 100 0 109 0 120C0 131 9 140 20 140L120 140zM120 60C131 60 140 51 140 40C140 29 131 20 120 20L20 20C9 20 0 29 0 40C0 51 9 60 20 60L120 60zM300 300C311 300 320 291 320 280C320 269 311 260 300 260L200 260C189 260 180 269 180 280C180 291 189 300 200 300L300 300zM300 220C311 220 320 211 320 200C320 189 311 180 300 180L200 180C189 180 180 189 180 200C180 211 189 220 200 220L300 220zM300 140C311 140 320 131 320 120C320 109 311 100 300 100L200 100C189 100 180 109 180 120C180 131 189 140 200 140L300 140zM300 60C311 60 320 51 320 40C320 29 311 20 300 20L200 20C189 20 180 29 180 40C180 51 189 60 200 60L300 60z"
+                        : "M0 340.5315614L0 359.269103C0 370.63122924 9.18978912 379.8006644518 20.5771366 380L159.4228634 380C170.8102108 380 180 370.63122924 180 359.4684386L180 340.5315614C180 329.1694352 170.6104328 320 159.4228634 320L20.5771366 320C9.18978912 320 0 329.1694352 0 340.5315614zM0 240.5315614L0 259.269103C0 270.6312292 9.18978912 279.8006644 20.5771366 280L159.4228634 280C170.8102108 280 180 270.6312292 180 259.4684386L180 240.5315614C180 229.1694352 170.6104328 220 159.4228634 220L20.5771366 220C9.18978912 220 0 229.1694352 0 240.5315614zM0 140.531562L0 159.269102C0 170.63123 9.18978912 179.800664 20.5771366 180L159.4228634 180C170.8102108 180 180 170.63123 180 159.468438L180 140.531562C180 129.169436 170.6104328 120 159.4228634 120L20.5771366 120C9.18978912 120 0 129.169436 0 140.531562zM0 40.531562L0 59.269102C0 70.6312300000001 9.18978912 79.800664 20.5771366 80L159.4228634 80C170.8102108 80 180 70.6312300000001 180 59.4684380000001L180 40.531562C180 29.169436 170.6104328 20 159.4228634 20L20.5771366 20C9.18978912 20 0 29.169436 0 40.531562zM220 340.5315614L220 359.269103C220 370.63122924 229.18979 379.8006644518 240.577136 380L379.422864 380C390.81021 380 400 370.63122924 400 359.4684386L400 340.5315614C400 329.1694352 390.610432 320 379.422864 320L240.577136 320C229.18979 320 220 329.1694352 220 340.5315614zM220 240.5315614L220 259.269103C220 270.6312292 229.18979 279.8006644 240.577136 280L379.422864 280C390.81021 280 400 270.6312292 400 259.4684386L400 240.5315614C400 229.1694352 390.610432 220 379.422864 220L240.577136 220C229.18979 220 220 229.1694352 220 240.5315614zM220 140.531562L220 159.269102C220 170.63123 229.18979 179.800664 240.577136 180L379.422864 180C390.81021 180 400 170.63123 400 159.468438L400 140.531562C400 129.169436 390.610432 120 379.422864 120L240.577136 120C229.18979 120 220 129.169436 220 140.531562zM220 40.531562L220 59.269102C220 70.6312300000001 229.18979 79.800664 240.577136 80L379.422864 80C390.81021 80 400 70.6312300000001 400 59.4684380000001L400 40.531562C400 29.169436 390.610432 20 379.422864 20L240.577136 20C229.18979 20 220 29.169436 220 40.531562z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+ListColumns.defaultProps = {
+    size: IconSize.STANDARD,
+};
 ListColumns.displayName = `Blueprint5.Icon.ListColumns`;
 export default ListColumns;

package/src/generated/components/list-detail-view.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 ListDetailView: 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 280H20C9 280 0 271 0 260V240C0 229 9 220 20 220H160C171 220 180 229 180 240V260C180 271 171 280 160 280zM160 180H20C9 180 0 171 0 160V140C0 129 9 120 20 120H160C171 120 180 129 180 140V160C180 171 171 180 160 180zM160 80H20C9 80 0 71 0 60V40C0 29 9 20 20 20H160C171 20 180 29 180 40V60C180 71 171 80 160 80zM160 380H20C9 380 0 371 0 360V340C0 329 9 320 20 320H160C171 320 180 329 180 340V360C180 371 171 380 160 380zM380 380H240C229 380 220 371 220 360V40C220 29 229 20 240 20H380C391 20 400 29 400 40V360C400 371 391 380 380 380z"
-                    : "M120 140H20C9 140 0 131 0 120S9 100 20 100H120C131 100 140 109 140 120S131 140 120 140zM120 60H20C9 60 0 51 0 40S9 20 20 20H120C131 20 140 29 140 40S131 60 120 60zM300 300H200C189 300 180 291 180 280V40C180 29 189 20 200 20H300C311 20 320 29 320 40V280C320 291 311 300 300 300zM120 220H20C9 220 0 211 0 200S9 180 20 180H120C131 180 140 189 140 200S131 220 120 220zM120 300H20C9 300 0 291 0 280S9 260 20 260H120C131 260 140 269 140 280S131 300 120 300z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="list-detail-view"
-                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}-list-detail-view`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="list-detail-view" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const ListDetailView: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="list-detail-view" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M120 140H20C9 140 0 131 0 120S9 100 20 100H120C131 100 140 109 140 120S131 140 120 140zM120 60H20C9 60 0 51 0 40S9 20 20 20H120C131 20 140 29 140 40S131 60 120 60zM300 300H200C189 300 180 291 180 280V40C180 29 189 20 200 20H300C311 20 320 29 320 40V280C320 291 311 300 300 300zM120 220H20C9 220 0 211 0 200S9 180 20 180H120C131 180 140 189 140 200S131 220 120 220zM120 300H20C9 300 0 291 0 280S9 260 20 260H120C131 260 140 269 140 280S131 300 120 300z"
+                        : "M160 280H20C9 280 0 271 0 260V240C0 229 9 220 20 220H160C171 220 180 229 180 240V260C180 271 171 280 160 280zM160 180H20C9 180 0 171 0 160V140C0 129 9 120 20 120H160C171 120 180 129 180 140V160C180 171 171 180 160 180zM160 80H20C9 80 0 71 0 60V40C0 29 9 20 20 20H160C171 20 180 29 180 40V60C180 71 171 80 160 80zM160 380H20C9 380 0 371 0 360V340C0 329 9 320 20 320H160C171 320 180 329 180 340V360C180 371 171 380 160 380zM380 380H240C229 380 220 371 220 360V40C220 29 229 20 240 20H380C391 20 400 29 400 40V360C400 371 391 380 380 380z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+ListDetailView.defaultProps = {
+    size: IconSize.STANDARD,
+};
 ListDetailView.displayName = `Blueprint5.Icon.ListDetailView`;
 export default ListDetailView;