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

package/src/generated/components/issue-closed.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 IssueClosed: 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
-                    ? "M307.27922 282.0101012C302.160774 282.0101012 297.042328 283.9627228 293.137084 287.8679656L250.7106780000001 330.2943726C242.900192 338.1048584 242.900192 350.768158 250.7106780000001 358.5786438C258.521164 366.3891296 271.184464 366.3891296 278.99495 358.5786438L278.99495 358.5786438L307.27922 330.2943726L363.847764 386.86291502L363.847764 386.86291502C371.658248 394.67340084 384.321548 394.67340084 392.132034 386.86291502L392.132034 386.86291502L392.132034 386.86291502C399.9425200000001 379.0524292 399.9425200000001 366.3891296 392.132034 358.5786438L321.4213560000001 287.8679656C317.516114 283.9627228 312.397666 282.0101012 307.27922 282.0101012zM235.601426 396.84072574C230.880192 394.20219462 226.43975 390.87625772 222.426406 386.86291502C214.667826 379.1043336 209.478252 369.7495758 206.857684 359.8556876C204.583744 359.9515742 202.297526 360 200 360C111.63444 360 40 288.36556 40 200C40 111.63444 111.63444 40 200 40C288.36556 40 360 111.63444 360 200C360 220.7456014 356.0517200000001 240.569033 348.865602 258.759854C349.147896 259.031369 349.42792 259.3059872 349.7056280000001 259.5836944L379.144286 289.022353C392.492754 262.212331 400 231.9828712 400 200C400 89.54305 310.45695 0 200 0C89.54305 0 0 89.54305 0 200C0 310.45695 89.54305 400 200 400C212.150668 400 224.048262 398.916457076 235.601426 396.84072574zM220 80L180 80L180 120L220 120L220 80zM220 140L180 140L180 320L220 320L220 140z"
-                    : "M185.920271 317.9111775C178.6172174 314.9825308 171.773562 310.5603586 165.8578644 304.64466094C158.6293194 297.416116 153.6307622 288.8020344000001 150.8621926 279.6572852C88.8570008 274.9885608 40 223.1998624 40 160C40 93.72583 93.72583 40 160 40C226.2741700000001 40 280 93.72583 280 160C280 170.0364326 278.76788 179.7850882 276.446648 189.1029568C277.31587 189.8766984 278.165742 190.678368 278.99495 191.507576L308.114322 220.6269482C315.776066 201.9286014 320 181.4575772 320 160C320 71.63444 248.36556 0 160 0C71.63444 0 0 71.63444 0 160C0 248.36556 71.63444 320 160 320C168.8252026 320 177.4835236 319.285495176 185.920271 317.9111775zM236.568542 213.9339828C231.4500960000001 213.9339828 226.33165 215.8866042 222.426406 219.7918472L194.1421356 248.0761184C186.3316498 255.8866042 186.3316498 268.5499038 194.1421356 276.3603896C201.952622 284.1708756 214.615922 284.1708756 222.426406 276.3603896L236.568542 262.218254L271.923882 297.5735932C279.734368 305.38407896 292.397666 305.38407896 300.2081520000001 297.5735932C308.018638 289.7631072 308.018638 277.0998078 300.2081520000001 269.2893218L250.7106780000001 219.7918472C246.805436 215.8866042 241.686988 213.9339828 236.568542 213.9339828zM180 80L140 80L140 120L180 120L180 80zM180 140L140 140L140 240L180 240L180 140z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="issue-closed"
-                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}-issue-closed`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="issue-closed" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const IssueClosed: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="issue-closed" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M185.920271 317.9111775C178.6172174 314.9825308 171.773562 310.5603586 165.8578644 304.64466094C158.6293194 297.416116 153.6307622 288.8020344000001 150.8621926 279.6572852C88.8570008 274.9885608 40 223.1998624 40 160C40 93.72583 93.72583 40 160 40C226.2741700000001 40 280 93.72583 280 160C280 170.0364326 278.76788 179.7850882 276.446648 189.1029568C277.31587 189.8766984 278.165742 190.678368 278.99495 191.507576L308.114322 220.6269482C315.776066 201.9286014 320 181.4575772 320 160C320 71.63444 248.36556 0 160 0C71.63444 0 0 71.63444 0 160C0 248.36556 71.63444 320 160 320C168.8252026 320 177.4835236 319.285495176 185.920271 317.9111775zM236.568542 213.9339828C231.4500960000001 213.9339828 226.33165 215.8866042 222.426406 219.7918472L194.1421356 248.0761184C186.3316498 255.8866042 186.3316498 268.5499038 194.1421356 276.3603896C201.952622 284.1708756 214.615922 284.1708756 222.426406 276.3603896L236.568542 262.218254L271.923882 297.5735932C279.734368 305.38407896 292.397666 305.38407896 300.2081520000001 297.5735932C308.018638 289.7631072 308.018638 277.0998078 300.2081520000001 269.2893218L250.7106780000001 219.7918472C246.805436 215.8866042 241.686988 213.9339828 236.568542 213.9339828zM180 80L140 80L140 120L180 120L180 80zM180 140L140 140L140 240L180 240L180 140z"
+                        : "M307.27922 282.0101012C302.160774 282.0101012 297.042328 283.9627228 293.137084 287.8679656L250.7106780000001 330.2943726C242.900192 338.1048584 242.900192 350.768158 250.7106780000001 358.5786438C258.521164 366.3891296 271.184464 366.3891296 278.99495 358.5786438L278.99495 358.5786438L307.27922 330.2943726L363.847764 386.86291502L363.847764 386.86291502C371.658248 394.67340084 384.321548 394.67340084 392.132034 386.86291502L392.132034 386.86291502L392.132034 386.86291502C399.9425200000001 379.0524292 399.9425200000001 366.3891296 392.132034 358.5786438L321.4213560000001 287.8679656C317.516114 283.9627228 312.397666 282.0101012 307.27922 282.0101012zM235.601426 396.84072574C230.880192 394.20219462 226.43975 390.87625772 222.426406 386.86291502C214.667826 379.1043336 209.478252 369.7495758 206.857684 359.8556876C204.583744 359.9515742 202.297526 360 200 360C111.63444 360 40 288.36556 40 200C40 111.63444 111.63444 40 200 40C288.36556 40 360 111.63444 360 200C360 220.7456014 356.0517200000001 240.569033 348.865602 258.759854C349.147896 259.031369 349.42792 259.3059872 349.7056280000001 259.5836944L379.144286 289.022353C392.492754 262.212331 400 231.9828712 400 200C400 89.54305 310.45695 0 200 0C89.54305 0 0 89.54305 0 200C0 310.45695 89.54305 400 200 400C212.150668 400 224.048262 398.916457076 235.601426 396.84072574zM220 80L180 80L180 120L220 120L220 80zM220 140L180 140L180 320L220 320L220 140z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+IssueClosed.defaultProps = {
+    size: IconSize.STANDARD,
+};
 IssueClosed.displayName = `Blueprint5.Icon.IssueClosed`;
 export default IssueClosed;

package/src/generated/components/issue-new.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 IssueNew: 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
-                    ? "M263.331658 389.7651483800001C262.15757 386.3986238400001 261.275004 382.89542718 260.7142 379.2858008C245.915146 376.986566 232.905076 369.2788102 223.768152 358.246695C216.013146 359.401592 208.076456 360 200 360C111.63444 360 40 288.36556 40 200C40 111.63444 111.63444 40 200 40C288.36556 40 360 111.63444 360 200C360 208.0764558 359.401592 216.0131458 358.246694 223.768151C369.27881 232.9050762 376.986566 245.915146 379.2858 260.7141992C382.895428 261.275004 386.398624 262.157571 389.765148 263.3316578C396.4043000000001 243.4290932 400 222.134457 400 200C400 89.54305 310.45695 0 200 0C89.54305 0 0 89.54305 0 200C0 310.45695 89.54305 400 200 400C222.134456 400 243.429094 396.4042993 263.331658 389.7651483800001zM220 80L180 80L180 120L220 120L220 80zM220 140L180 140L180 320L220 320L220 140zM340 340L370 340C381.0456940000001 340 390 331.045695 390 320C390 308.954305 381.0456940000001 300 370 300L340 300L340 270C340 258.954305 331.0456940000001 250 320 250C308.9543060000001 250 300 258.954305 300 270L300 300L270 300C258.9543060000001 300 250 308.954305 250 320C250 331.045695 258.9543060000001 340 270 340L300 340L300 370C300 381.045695 308.9543060000001 390 320 390C331.0456940000001 390 340 381.045695 340 370L340 340z"
-                    : "M211.353824 311.58069588C211.16338 310.78072724 210.992216 309.97337186 210.84085 309.15914996C194.0910468 306.04531654 180.2470734 294.5528376 173.8379702 279.210753C169.2975554 279.7320842 164.6800652 280 160 280C93.72583 280 40 226.27417 40 160C40 93.72583 93.72583 40 160 40C226.2741700000001 40 280 93.72583 280 160C280 164.6485708 279.735678 169.2354058 279.221244 173.7462954C294.572066 180.1666064 306.059938 194.0399368 309.1644780000001 210.8418408C309.976894 210.9929628 310.782472 211.1637964 311.580696 211.3538244C317.039832 195.2347348 320 177.9630596 320 160C320 71.63444 248.36556 0 160 0C71.63444 0 0 71.63444 0 160C0 248.36556 71.63444 320 160 320C177.9630596 320 195.2347348 317.03983156 211.353824 311.58069588zM180 80L140 80L140 120L180 120L180 80zM180 140L140 140L140 240L180 240L180 140zM200 260C200 271 209 280 220 280L240 280L240 300C240 311 249 320 260 320C271 320 280 311 280 300L280 280L300 280C311 280 320 271 320 260C320 249 311 240 300 240L280 240L280 219.903193C280 208.903193 271 199.903193 260 199.903193C249 199.903193 240 208.903193 240 219.903193L240 240L220 240C209 240 200 249 200 260z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="issue-new"
-                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}-issue-new`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="issue-new" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const IssueNew: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="issue-new" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M211.353824 311.58069588C211.16338 310.78072724 210.992216 309.97337186 210.84085 309.15914996C194.0910468 306.04531654 180.2470734 294.5528376 173.8379702 279.210753C169.2975554 279.7320842 164.6800652 280 160 280C93.72583 280 40 226.27417 40 160C40 93.72583 93.72583 40 160 40C226.2741700000001 40 280 93.72583 280 160C280 164.6485708 279.735678 169.2354058 279.221244 173.7462954C294.572066 180.1666064 306.059938 194.0399368 309.1644780000001 210.8418408C309.976894 210.9929628 310.782472 211.1637964 311.580696 211.3538244C317.039832 195.2347348 320 177.9630596 320 160C320 71.63444 248.36556 0 160 0C71.63444 0 0 71.63444 0 160C0 248.36556 71.63444 320 160 320C177.9630596 320 195.2347348 317.03983156 211.353824 311.58069588zM180 80L140 80L140 120L180 120L180 80zM180 140L140 140L140 240L180 240L180 140zM200 260C200 271 209 280 220 280L240 280L240 300C240 311 249 320 260 320C271 320 280 311 280 300L280 280L300 280C311 280 320 271 320 260C320 249 311 240 300 240L280 240L280 219.903193C280 208.903193 271 199.903193 260 199.903193C249 199.903193 240 208.903193 240 219.903193L240 240L220 240C209 240 200 249 200 260z"
+                        : "M263.331658 389.7651483800001C262.15757 386.3986238400001 261.275004 382.89542718 260.7142 379.2858008C245.915146 376.986566 232.905076 369.2788102 223.768152 358.246695C216.013146 359.401592 208.076456 360 200 360C111.63444 360 40 288.36556 40 200C40 111.63444 111.63444 40 200 40C288.36556 40 360 111.63444 360 200C360 208.0764558 359.401592 216.0131458 358.246694 223.768151C369.27881 232.9050762 376.986566 245.915146 379.2858 260.7141992C382.895428 261.275004 386.398624 262.157571 389.765148 263.3316578C396.4043000000001 243.4290932 400 222.134457 400 200C400 89.54305 310.45695 0 200 0C89.54305 0 0 89.54305 0 200C0 310.45695 89.54305 400 200 400C222.134456 400 243.429094 396.4042993 263.331658 389.7651483800001zM220 80L180 80L180 120L220 120L220 80zM220 140L180 140L180 320L220 320L220 140zM340 340L370 340C381.0456940000001 340 390 331.045695 390 320C390 308.954305 381.0456940000001 300 370 300L340 300L340 270C340 258.954305 331.0456940000001 250 320 250C308.9543060000001 250 300 258.954305 300 270L300 300L270 300C258.9543060000001 300 250 308.954305 250 320C250 331.045695 258.9543060000001 340 270 340L300 340L300 370C300 381.045695 308.9543060000001 390 320 390C331.0456940000001 390 340 381.045695 340 370L340 340z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+IssueNew.defaultProps = {
+    size: IconSize.STANDARD,
+};
 IssueNew.displayName = `Blueprint5.Icon.IssueNew`;
 export default IssueNew;

package/src/generated/components/issue.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 Issue: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M200 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 0zM200 40C288.36556 40 360 111.63444 360 200C360 288.36556 288.36556 360 200 360C111.63444 360 40 288.36556 40 200C40 111.63444 111.63444 40 200 40zM220 80L180 80L180 120L220 120L220 80zM220 140L180 140L180 320L220 320L220 140z"
-                    : "M160 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 40C226.2741700000001 40 280 93.72583 280 160C280 226.27417 226.2741700000001 280 160 280C93.72583 280 40 226.27417 40 160C40 93.72583 93.72583 40 160 40zM180 80L140 80L140 120L180 120L180 80zM180 140L140 140L140 240L180 240L180 140z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="issue"
-                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}-issue`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="issue" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Issue: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="issue" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M160 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 40C226.2741700000001 40 280 93.72583 280 160C280 226.27417 226.2741700000001 280 160 280C93.72583 280 40 226.27417 40 160C40 93.72583 93.72583 40 160 40zM180 80L140 80L140 120L180 120L180 80zM180 140L140 140L140 240L180 240L180 140z"
+                        : "M200 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 0zM200 40C288.36556 40 360 111.63444 360 200C360 288.36556 288.36556 360 200 360C111.63444 360 40 288.36556 40 200C40 111.63444 111.63444 40 200 40zM220 80L180 80L180 120L220 120L220 80zM220 140L180 140L180 320L220 320L220 140z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Issue.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Issue.displayName = `Blueprint5.Icon.Issue`;
 export default Issue;

package/src/generated/components/italic.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 Italic: 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
-                    ? "M234 320H280C292 320 300 328 300 340C300 352 292 360 280 360H140C128 360 120 352 120 340C120 328 128 320 140 320H184L146 100H100C88 100 80 92 80 80C80 68 88 60 100 60H240C252 60 260 68 260 80C260 92 252 100 240 100H196L234 320z"
-                    : "M196 240H220C230 240 240 248 240 260C240 272 232 280 220 280H140C130 280 120 272 120 260C120 248 128 240 140 240H156L124 80H100C90 80 80 72 80 60C80 48 88 40 100 40H180C190 40 200 48 200 60C200 72 192 80 180 80H164L196 240z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="italic"
-                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}-italic`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="italic" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Italic: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="italic" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M196 240H220C230 240 240 248 240 260C240 272 232 280 220 280H140C130 280 120 272 120 260C120 248 128 240 140 240H156L124 80H100C90 80 80 72 80 60C80 48 88 40 100 40H180C190 40 200 48 200 60C200 72 192 80 180 80H164L196 240z"
+                        : "M234 320H280C292 320 300 328 300 340C300 352 292 360 280 360H140C128 360 120 352 120 340C120 328 128 320 140 320H184L146 100H100C88 100 80 92 80 80C80 68 88 60 100 60H240C252 60 260 68 260 80C260 92 252 100 240 100H196L234 320z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Italic.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Italic.displayName = `Blueprint5.Icon.Italic`;
 export default Italic;

package/src/generated/components/join-table.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 JoinTable: 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 280H300V360C300 371 291 380 280 380H20C9 380 0 371 0 360V140C0 129 9 120 20 120H100V40C100 29 109 20 120 20H380C391 20 400 29 400 40V260C400 271 391 280 380 280zM120 160H40V220H120V160zM120 240H40V300H120V240zM260 60H140V120H260V60zM260 140H140V220H260V140zM260 240H140V300H260V240zM360 60H280V120H360V60zM360 140H280V200H360V140z"
-                    : "M300 220H240V280C240 291 231 300 220 300H20C9 300 0 291 0 280V120C0 109 9 100 20 100H80V40C80 29 89 20 100 20H300C311 20 320 29 320 40V200C320 211 311 220 300 220zM200 240V200H120V240H200zM200 120H120V180H200V120zM40 240H100V200H40V240zM40 140V180H100V140H40zM120 60V100H200V60H120zM280 60H220V100H280V60zM280 120H220V160H280V120z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="join-table"
-                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}-join-table`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="join-table" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const JoinTable: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="join-table" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 220H240V280C240 291 231 300 220 300H20C9 300 0 291 0 280V120C0 109 9 100 20 100H80V40C80 29 89 20 100 20H300C311 20 320 29 320 40V200C320 211 311 220 300 220zM200 240V200H120V240H200zM200 120H120V180H200V120zM40 240H100V200H40V240zM40 140V180H100V140H40zM120 60V100H200V60H120zM280 60H220V100H280V60zM280 120H220V160H280V120z"
+                        : "M380 280H300V360C300 371 291 380 280 380H20C9 380 0 371 0 360V140C0 129 9 120 20 120H100V40C100 29 109 20 120 20H380C391 20 400 29 400 40V260C400 271 391 280 380 280zM120 160H40V220H120V160zM120 240H40V300H120V240zM260 60H140V120H260V60zM260 140H140V220H260V140zM260 240H140V300H260V240zM360 60H280V120H360V60zM360 140H280V200H360V140z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+JoinTable.defaultProps = {
+    size: IconSize.STANDARD,
+};
 JoinTable.displayName = `Blueprint5.Icon.JoinTable`;
 export default JoinTable;

package/src/generated/components/key-backspace.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 KeyBackspace: 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 340H140C134.4 340 129.4 337.8 125.8 334.2L5.8 214.2C2.2 210.6 0 205.6 0 200C0 194.4 2.2 189.4 5.8 185.8L125.8 65.8C129.4 62.2 134.4 60 140 60H380C391 60 400 69 400 80V320C400 331 391 340 380 340zM334.2000000000001 154.2C337.8 150.6 340 145.6 340 140C340 129 331 120 320 120C314.4000000000001 120 309.4000000000001 122.2 305.8 125.8L260 171.8L214.2 126C210.6 122.2 205.6 120 200 120C189 120 180 129 180 140C180 145.6 182.2 150.6 185.8 154.2L231.8 200L185.8 245.8C182.2 249.4 180 254.4 180 260C180 271 189 280 200 280C205.6 280 210.6 277.8 214.2 274.2L260 228.2L305.8 274C309.4000000000001 277.8 314.4000000000001 280 320 280C331 280 340 271 340 260C340 254.4 337.8 249.4 334.2000000000001 245.8L288.2 200L334.2000000000001 154.2z"
-                    : "M300 280H120C114.4 280 109.4 277.8 105.8 274.2L5.8 174.2C2.2 170.6 0 165.6 0 160C0 154.4 2.2 149.4 5.8 145.8L105.8 45.8C109.4 42.2 114.4 40 120 40H300C311 40 320 49 320 60V260C320 271 311 280 300 280zM254.2 134.2C257.8 130.6 260 125.6 260 120C260 109 251 100 240 100C234.4 100 229.4 102.2 225.8 105.8L200 131.8L174.2 106C170.6 102.2 165.6 100 160 100C149 100 140 109 140 120C140 125.6 142.2 130.6 145.8 134.2L171.8 160L145.8 185.8C142.2 189.4 140 194.4 140 200C140 211 149 220 160 220C165.6 220 170.6 217.8 174.2 214.2L200 188.2L225.8 214C229.4 217.8 234.4 220 240 220C251 220 260 211 260 200C260 194.4 257.8 189.4 254.2 185.8L228.2 160L254.2 134.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="key-backspace"
-                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}-key-backspace`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="key-backspace" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const KeyBackspace: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="key-backspace" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 280H120C114.4 280 109.4 277.8 105.8 274.2L5.8 174.2C2.2 170.6 0 165.6 0 160C0 154.4 2.2 149.4 5.8 145.8L105.8 45.8C109.4 42.2 114.4 40 120 40H300C311 40 320 49 320 60V260C320 271 311 280 300 280zM254.2 134.2C257.8 130.6 260 125.6 260 120C260 109 251 100 240 100C234.4 100 229.4 102.2 225.8 105.8L200 131.8L174.2 106C170.6 102.2 165.6 100 160 100C149 100 140 109 140 120C140 125.6 142.2 130.6 145.8 134.2L171.8 160L145.8 185.8C142.2 189.4 140 194.4 140 200C140 211 149 220 160 220C165.6 220 170.6 217.8 174.2 214.2L200 188.2L225.8 214C229.4 217.8 234.4 220 240 220C251 220 260 211 260 200C260 194.4 257.8 189.4 254.2 185.8L228.2 160L254.2 134.2z"
+                        : "M380 340H140C134.4 340 129.4 337.8 125.8 334.2L5.8 214.2C2.2 210.6 0 205.6 0 200C0 194.4 2.2 189.4 5.8 185.8L125.8 65.8C129.4 62.2 134.4 60 140 60H380C391 60 400 69 400 80V320C400 331 391 340 380 340zM334.2000000000001 154.2C337.8 150.6 340 145.6 340 140C340 129 331 120 320 120C314.4000000000001 120 309.4000000000001 122.2 305.8 125.8L260 171.8L214.2 126C210.6 122.2 205.6 120 200 120C189 120 180 129 180 140C180 145.6 182.2 150.6 185.8 154.2L231.8 200L185.8 245.8C182.2 249.4 180 254.4 180 260C180 271 189 280 200 280C205.6 280 210.6 277.8 214.2 274.2L260 228.2L305.8 274C309.4000000000001 277.8 314.4000000000001 280 320 280C331 280 340 271 340 260C340 254.4 337.8 249.4 334.2000000000001 245.8L288.2 200L334.2000000000001 154.2z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+KeyBackspace.defaultProps = {
+    size: IconSize.STANDARD,
+};
 KeyBackspace.displayName = `Blueprint5.Icon.KeyBackspace`;
 export default KeyBackspace;