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

package/src/generated/components/pivot-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 { SVGIconContainer } from "../../svgIconContainer";
 
-export const PivotTable: 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
-                    ? "M60 300H20C9 300 0 291 0 280V20C0 9 9 0 20 0H60C71 0 80 9 80 20V280C80 291 71 300 60 300zM60 400H20C9 400 0 391 0 380V340C0 329 9 320 20 320H60C71 320 80 329 80 340V380C80 391 71 400 60 400zM334.2000000000001 294.2C330.6 297.8 325.6 300 320 300S309.4000000000001 297.8 305.8 294.2L245.8 234.2C242.2 230.6 240 225.6 240 220C240 209 249 200 260 200C265.6 200 270.6 202.2 274.2000000000001 205.8L300 231.8V180C300 135.8 264.2000000000001 100 220 100H168.2L194 125.8C197.8 129.4 200 134.4 200 140C200 151 191 160 180 160C174.4 160 169.4 157.8 165.8 154.2L105.8 94.2000000000001C102.2 90.6 100 85.6 100 80C100 74.4 102.2 69.4 105.8 65.8L165.8 5.8C169.4 2.2 174.4 0 180 0C191 0 200 9 200 20C200 25.6 197.8 30.6 194.2 34.2L168.2 60H220C286.2 60 340 113.8 340 180V231.8L365.8 206C369.4 202.2 374.4 200 380 200C391 200 400 209 400 220C400 225.6 397.8 230.6 394.2000000000001 234.2L334.2000000000001 294.2zM380 400H120C109 400 100 391 100 380V340C100 329 109 320 120 320H380C391 320 400 329 400 340V380C400 391 391 400 380 400z"
-                    : "M40 240H20C9 240 0 231 0 220V20C0 9 9 0 20 0H40C51 0 60 9 60 20V220C60 231 51 240 40 240zM40 320H20C9 320 0 311 0 300V280C0 269 9 260 20 260H40C51 260 60 269 60 280V300C60 311 51 320 40 320zM274.2000000000001 234.2C270.6 237.8 265.6 240 260 240S249.4 237.8 245.8 234.2L205.8 194.2C202.2 190.6 200 185.6 200 180C200 169 209 160 220 160C225.6 160 230.6 162.2 234.2 165.8L240 171.8V140C240 106.8 213.2 80 180 80H148.2L154 85.8C157.8 89.4 160 94.4 160 100C160 111 151 120 140 120C134.4 120 129.4 117.8 125.8 114.2L85.8 74.2C82.2 70.6 80 65.6 80 60C80 54.4 82.2 49.4 85.8 45.8L125.8 5.8C129.4 2.2 134.4 0 140 0C151 0 160 9 160 20C160 25.6 157.8 30.6 154.2 34.2L148.2 40H180C235.2 40 280 84.8 280 140V171.8L285.8 166C289.4000000000001 162.2 294.4000000000001 160 300 160C311 160 320 169 320 180C320 185.6 317.8 190.6 314.2000000000001 194.2L274.2000000000001 234.2zM300 320H100C89 320 80 311 80 300V280C80 269 89 260 100 260H300C311 260 320 269 320 280V300C320 311 311 320 300 320z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="pivot-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}-pivot-table`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="pivot-table" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const PivotTable: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="pivot-table" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M40 240H20C9 240 0 231 0 220V20C0 9 9 0 20 0H40C51 0 60 9 60 20V220C60 231 51 240 40 240zM40 320H20C9 320 0 311 0 300V280C0 269 9 260 20 260H40C51 260 60 269 60 280V300C60 311 51 320 40 320zM274.2000000000001 234.2C270.6 237.8 265.6 240 260 240S249.4 237.8 245.8 234.2L205.8 194.2C202.2 190.6 200 185.6 200 180C200 169 209 160 220 160C225.6 160 230.6 162.2 234.2 165.8L240 171.8V140C240 106.8 213.2 80 180 80H148.2L154 85.8C157.8 89.4 160 94.4 160 100C160 111 151 120 140 120C134.4 120 129.4 117.8 125.8 114.2L85.8 74.2C82.2 70.6 80 65.6 80 60C80 54.4 82.2 49.4 85.8 45.8L125.8 5.8C129.4 2.2 134.4 0 140 0C151 0 160 9 160 20C160 25.6 157.8 30.6 154.2 34.2L148.2 40H180C235.2 40 280 84.8 280 140V171.8L285.8 166C289.4000000000001 162.2 294.4000000000001 160 300 160C311 160 320 169 320 180C320 185.6 317.8 190.6 314.2000000000001 194.2L274.2000000000001 234.2zM300 320H100C89 320 80 311 80 300V280C80 269 89 260 100 260H300C311 260 320 269 320 280V300C320 311 311 320 300 320z"
+                        : "M60 300H20C9 300 0 291 0 280V20C0 9 9 0 20 0H60C71 0 80 9 80 20V280C80 291 71 300 60 300zM60 400H20C9 400 0 391 0 380V340C0 329 9 320 20 320H60C71 320 80 329 80 340V380C80 391 71 400 60 400zM334.2000000000001 294.2C330.6 297.8 325.6 300 320 300S309.4000000000001 297.8 305.8 294.2L245.8 234.2C242.2 230.6 240 225.6 240 220C240 209 249 200 260 200C265.6 200 270.6 202.2 274.2000000000001 205.8L300 231.8V180C300 135.8 264.2000000000001 100 220 100H168.2L194 125.8C197.8 129.4 200 134.4 200 140C200 151 191 160 180 160C174.4 160 169.4 157.8 165.8 154.2L105.8 94.2000000000001C102.2 90.6 100 85.6 100 80C100 74.4 102.2 69.4 105.8 65.8L165.8 5.8C169.4 2.2 174.4 0 180 0C191 0 200 9 200 20C200 25.6 197.8 30.6 194.2 34.2L168.2 60H220C286.2 60 340 113.8 340 180V231.8L365.8 206C369.4 202.2 374.4 200 380 200C391 200 400 209 400 220C400 225.6 397.8 230.6 394.2000000000001 234.2L334.2000000000001 294.2zM380 400H120C109 400 100 391 100 380V340C100 329 109 320 120 320H380C391 320 400 329 400 340V380C400 391 391 400 380 400z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+PivotTable.defaultProps = {
+    size: IconSize.STANDARD,
+};
 PivotTable.displayName = `Blueprint5.Icon.PivotTable`;
 export default PivotTable;

package/src/generated/components/pivot.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 Pivot: 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
-                    ? "M116.6 205L5.8 94.2000000000001C2.2 90.6 0 85.6 0 80C0 69 9 60 20 60C25.6 60 30.6 62.2 34.2 65.8L145 176.6C133.6 184 124 193.6 116.6 205zM380 180C369 180 360 171 360 160V128.2L283.4 204.8C276 193.6 266.4 184 255.2 176.6L331.8 100H300C289 100 280 91 280 80C280 69 289 60 300 60H380C391 60 400 69 400 80V160C400 171 391 180 380 180zM280 260C280 304.2 244.2 340 200 340S120 304.2 120 260C120 215.8 155.8 180 200 180S280 215.8 280 260zM200 220C178 220 160 238 160 260S178 300 200 300S240 282 240 260S222 220 200 220z"
-                    : "M91.4 179.6L6 94.2C2.2 90.6 0 85.6 0 80C0 69 9 60 20 60C25.6 60 30.6 62.2 34.2 65.8L119.6 151.2C108 158.2 98.2 168 91.4 179.6zM300 160C289 160 280 151 280 140V128.2L228.6 179.6C221.8 168 212 158.2 200.4 151.4L251.8 100H240C229 100 220 91 220 80C220 69 229 60 240 60H300C311 60 320 69 320 80V140C320 151 311 160 300 160zM220 220C220 253.2 193.2 280 160 280S100 253.2 100 220S126.8 160 160 160S220 186.8 220 220zM160 200C149 200 140 209 140 220C140 231 149 240 160 240S180 231 180 220C180 209 171 200 160 200z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="pivot"
-                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}-pivot`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="pivot" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Pivot: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="pivot" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M91.4 179.6L6 94.2C2.2 90.6 0 85.6 0 80C0 69 9 60 20 60C25.6 60 30.6 62.2 34.2 65.8L119.6 151.2C108 158.2 98.2 168 91.4 179.6zM300 160C289 160 280 151 280 140V128.2L228.6 179.6C221.8 168 212 158.2 200.4 151.4L251.8 100H240C229 100 220 91 220 80C220 69 229 60 240 60H300C311 60 320 69 320 80V140C320 151 311 160 300 160zM220 220C220 253.2 193.2 280 160 280S100 253.2 100 220S126.8 160 160 160S220 186.8 220 220zM160 200C149 200 140 209 140 220C140 231 149 240 160 240S180 231 180 220C180 209 171 200 160 200z"
+                        : "M116.6 205L5.8 94.2000000000001C2.2 90.6 0 85.6 0 80C0 69 9 60 20 60C25.6 60 30.6 62.2 34.2 65.8L145 176.6C133.6 184 124 193.6 116.6 205zM380 180C369 180 360 171 360 160V128.2L283.4 204.8C276 193.6 266.4 184 255.2 176.6L331.8 100H300C289 100 280 91 280 80C280 69 289 60 300 60H380C391 60 400 69 400 80V160C400 171 391 180 380 180zM280 260C280 304.2 244.2 340 200 340S120 304.2 120 260C120 215.8 155.8 180 200 180S280 215.8 280 260zM200 220C178 220 160 238 160 260S178 300 200 300S240 282 240 260S222 220 200 220z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Pivot.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Pivot.displayName = `Blueprint5.Icon.Pivot`;
 export default Pivot;

package/src/generated/components/play.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 Play: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M320 200C320 207.2 316 213.4 310.2 216.8L310.4 217L110.4 337L110.2 336.8C107.2 338.6 103.8 340 100 340C89 340 80 331 80 320V80C80 69 89 60 100 60C103.8 60 107.2 61.4 110.2 63.2L110.4 63L310.4 183L310.2 183.2C316 186.6 320 192.8 320 200z"
-                    : "M240 160C240 167 236.2 172.8 230.8 176.4L231 176.8L111 256.8L110.8 256.4C107.8 258.4 104.2 260 100 260C89 260 80 251 80 240V80C80 69 89 60 100 60C104.2 60 107.8 61.6 110.8 63.6L111 63.2L231 143.2L230.8 143.6C236.2 147.2 240 153 240 160z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="play"
-                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}-play`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="play" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Play: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="play" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M240 160C240 167 236.2 172.8 230.8 176.4L231 176.8L111 256.8L110.8 256.4C107.8 258.4 104.2 260 100 260C89 260 80 251 80 240V80C80 69 89 60 100 60C104.2 60 107.8 61.6 110.8 63.6L111 63.2L231 143.2L230.8 143.6C236.2 147.2 240 153 240 160z"
+                        : "M320 200C320 207.2 316 213.4 310.2 216.8L310.4 217L110.4 337L110.2 336.8C107.2 338.6 103.8 340 100 340C89 340 80 331 80 320V80C80 69 89 60 100 60C103.8 60 107.2 61.4 110.2 63.2L110.4 63L310.4 183L310.2 183.2C316 186.6 320 192.8 320 200z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Play.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Play.displayName = `Blueprint5.Icon.Play`;
 export default Play;

package/src/generated/components/playbook.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 Playbook: 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
-                    ? "M34.1422 394.14214C26.3316 401.952622 13.66834 401.952622 5.85786 394.14214C-1.952622 386.33166 -1.952622 373.6684 5.85786 365.8578L41.7158 330L5.85786 294.1422C-1.95262 286.3316 -1.95262 273.6684 5.85786 265.8578C13.66834 258.0474000000001 26.3316 258.0474000000001 34.1422 265.8578L70 301.7158L105.8578 265.8578C113.6684 258.0474000000001 126.3316 258.0474000000001 134.1422 265.8578C141.9526 273.6684 141.9526 286.3316 134.1422 294.1422L98.2842 330L134.1422 365.8578C141.9526 373.6684 141.9526 386.33166 134.1422 394.14214C126.3316 401.952622 113.6684 401.952622 105.8578 394.14214L70 358.2842L34.1422 394.14214zM320 0C364.182 0 400 35.818 400 80C400 124.182 364.182 160 320 160C275.818 160 240 124.182 240 80C240 35.818 275.818 0 320 0zM320 40C342.0920000000001 40 360 57.908 360 80C360 102.092 342.0920000000001 120 320 120C297.908 120 280 102.092 280 80C280 57.908 297.908 40 320 40zM365.8 286L320 331.8V240C320 206.863 293.1380000000001 180 260 180H80C68.9544 180 60 171.046 60 160V20C60 8.954 51.0456 0 40 0C28.9544 0 20 8.954 20 20V160C20 193.138 46.863 220 80 220H260C271.046 220 280 228.9544 280 240V331.8L234.2 285.8C230.6 282.2 225.6 280 220 280C209 280 200 289 200 300C200 305.6 202.2 310.6 205.8 314.2L285.8 394.2C289.4000000000001 397.8 294.4000000000001 399.999999701976 300 399.999999701976C305.6 399.999999701976 310.6 397.8 314.2000000000001 394.2L394.2000000000001 314.2C397.8 310.6 400 305.6 400 300C400 289 391 280 380 280C374.4 280 369.4 282.2 365.8 286z"
-                    : "M85.8578 314.14214C93.6684 321.952622 106.3316 321.952622 114.1422 314.14214C121.9526 306.33166 121.9526 293.6684 114.1422 285.8578L88.2842 260L114.1422 234.1422C121.9526 226.3316 121.9526 213.6684 114.1422 205.8578C106.3316 198.0474 93.6684 198.0474 85.8578 205.8578L60 231.7158L34.1422 205.8578C26.3316 198.0474 13.66836 198.0474 5.85786 205.8578C-1.952622 213.6684 -1.952622 226.3316 5.85786 234.1422L31.7158 260L5.85788 285.8578C-1.952614 293.6684 -1.952614 306.33166 5.85788 314.14214C13.66836 321.952622 26.3316 321.952622 34.1422 314.14214L60 288.2842L85.8578 314.14214zM285.8 225.8L260 251.8V200C260 166.863 233.138 140 200 140H80C68.9544 140 60 131.0456 60 120V20C60 8.954 51.0456 0 40 0C28.9544 0 20 8.954 20 20V120C20 153.137 46.863 180 80 180H200C211.046 180 220 188.9544 220 200V251.8L194.2 226C190.6 222.2 185.6 220 180 220C169 220 160 229 160 240C160 245.6 162.2 250.6 165.8 254.2L225.8 314.2C229.4 317.8 234.4 319.999999701976 240 319.999999701976C245.6 319.999999701976 250.6 317.8 254.2 314.2L314.2000000000001 254.2C317.8 250.6 320 245.6 320 240C320 229 311 220 300 220C294.4000000000001 220 289.4000000000001 222.2 285.8 225.8zM320 60C320 26.862 293.1380000000001 0 260 0C226.862 0 200 26.862 200 60C200 93.138 226.862 120 260 120C293.1380000000001 120 320 93.138 320 60zM280 60C280 48.954 271.046 40 260 40C248.954 40 240 48.954 240 60C240 71.046 248.954 80 260 80C271.046 80 280 71.046 280 60z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="playbook"
-                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}-playbook`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="playbook" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Playbook: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="playbook" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M85.8578 314.14214C93.6684 321.952622 106.3316 321.952622 114.1422 314.14214C121.9526 306.33166 121.9526 293.6684 114.1422 285.8578L88.2842 260L114.1422 234.1422C121.9526 226.3316 121.9526 213.6684 114.1422 205.8578C106.3316 198.0474 93.6684 198.0474 85.8578 205.8578L60 231.7158L34.1422 205.8578C26.3316 198.0474 13.66836 198.0474 5.85786 205.8578C-1.952622 213.6684 -1.952622 226.3316 5.85786 234.1422L31.7158 260L5.85788 285.8578C-1.952614 293.6684 -1.952614 306.33166 5.85788 314.14214C13.66836 321.952622 26.3316 321.952622 34.1422 314.14214L60 288.2842L85.8578 314.14214zM285.8 225.8L260 251.8V200C260 166.863 233.138 140 200 140H80C68.9544 140 60 131.0456 60 120V20C60 8.954 51.0456 0 40 0C28.9544 0 20 8.954 20 20V120C20 153.137 46.863 180 80 180H200C211.046 180 220 188.9544 220 200V251.8L194.2 226C190.6 222.2 185.6 220 180 220C169 220 160 229 160 240C160 245.6 162.2 250.6 165.8 254.2L225.8 314.2C229.4 317.8 234.4 319.999999701976 240 319.999999701976C245.6 319.999999701976 250.6 317.8 254.2 314.2L314.2000000000001 254.2C317.8 250.6 320 245.6 320 240C320 229 311 220 300 220C294.4000000000001 220 289.4000000000001 222.2 285.8 225.8zM320 60C320 26.862 293.1380000000001 0 260 0C226.862 0 200 26.862 200 60C200 93.138 226.862 120 260 120C293.1380000000001 120 320 93.138 320 60zM280 60C280 48.954 271.046 40 260 40C248.954 40 240 48.954 240 60C240 71.046 248.954 80 260 80C271.046 80 280 71.046 280 60z"
+                        : "M34.1422 394.14214C26.3316 401.952622 13.66834 401.952622 5.85786 394.14214C-1.952622 386.33166 -1.952622 373.6684 5.85786 365.8578L41.7158 330L5.85786 294.1422C-1.95262 286.3316 -1.95262 273.6684 5.85786 265.8578C13.66834 258.0474000000001 26.3316 258.0474000000001 34.1422 265.8578L70 301.7158L105.8578 265.8578C113.6684 258.0474000000001 126.3316 258.0474000000001 134.1422 265.8578C141.9526 273.6684 141.9526 286.3316 134.1422 294.1422L98.2842 330L134.1422 365.8578C141.9526 373.6684 141.9526 386.33166 134.1422 394.14214C126.3316 401.952622 113.6684 401.952622 105.8578 394.14214L70 358.2842L34.1422 394.14214zM320 0C364.182 0 400 35.818 400 80C400 124.182 364.182 160 320 160C275.818 160 240 124.182 240 80C240 35.818 275.818 0 320 0zM320 40C342.0920000000001 40 360 57.908 360 80C360 102.092 342.0920000000001 120 320 120C297.908 120 280 102.092 280 80C280 57.908 297.908 40 320 40zM365.8 286L320 331.8V240C320 206.863 293.1380000000001 180 260 180H80C68.9544 180 60 171.046 60 160V20C60 8.954 51.0456 0 40 0C28.9544 0 20 8.954 20 20V160C20 193.138 46.863 220 80 220H260C271.046 220 280 228.9544 280 240V331.8L234.2 285.8C230.6 282.2 225.6 280 220 280C209 280 200 289 200 300C200 305.6 202.2 310.6 205.8 314.2L285.8 394.2C289.4000000000001 397.8 294.4000000000001 399.999999701976 300 399.999999701976C305.6 399.999999701976 310.6 397.8 314.2000000000001 394.2L394.2000000000001 314.2C397.8 310.6 400 305.6 400 300C400 289 391 280 380 280C374.4 280 369.4 282.2 365.8 286z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Playbook.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Playbook.displayName = `Blueprint5.Icon.Playbook`;
 export default Playbook;

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

package/src/generated/components/polygon-filter.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 PolygonFilter: 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
-                    ? "M360 260C354.6 260 349.6 259 345 257L219.4 354.6C219.6 356.4 220 358.2 220 360C220 382 202 400 180 400S140 382 140 360C140 358.8 140.2 357.6 140.4 356.2L56.6 296.2000000000001C51.4 298.6 45.8 300 40 300C18 300 0 282 0 260C0 245.2 8 232.4000000000001 20 225.6V74.6C8 67.6 0 54.8 0 40C0 18 18 0 40 0C54.8 0 67.6 8 74.4 20H225.4C232.4 8 245 0 259.8 0C281.8 0 299.8 18 299.8 40C299.8 47.4 297.6 54.4 294 60.4L360.6 180C382.4000000000001 180.4 400 198 400 220C400 242 382 260 360 260zM259.4000000000001 80C245 79.8 232.4000000000001 71.8 225.6 60H74.4C71 66 66 71 60 74.4V225.6C72 232.4 80 245.2 80 260C80 261.2 79.8 262.4 79.6 263.8L163.4 323.8C168.6 321.4 174.2 320 180 320C185.4 320 190.4 321 195 323L320.6 225.4C320.4 223.6 320 221.8 320 220C320 212.6 322.2 205.6 325.8 199.6L259.4000000000001 80z"
-                    : "M280 220C275.2 220 270.6 219 266.4 217.4L199.4 273.2C199.6 275.4 200 277.6 200 280C200 302 182 320 160 320S120 302 120 280C120 279.2 120.2 278.4 120.2 277.6L57.6 235.8C52.2 238.4 46.4 240 40 240C18 240 0 222 0 200C0 185.2 8 172.4 20 165.6V74.6C8 67.6 0 54.8 0 40C0 18 18 0 40 0C54.8 0 67.6 8 74.4 20H165.4C172.4 8 185 0 199.8 0C221.8 0 239.8 18 239.8 40C239.8 47.4 237.6 54 234.2 60L280 140C302.2 140.2 320 158 320 180C320 202 302 220 280 220zM199.8 80C185.2 80 172.4 71.8 165.6 60H74.6C71 66 66 71 60 74.4V165.6C72 172.4 80 185.2 80 200C80 200.8 79.8 201.6 79.8 202.4L142.4 244.2C147.8 241.6 153.6 240 160 240C164.8 240 169.4 241 173.6 242.6L240.6 186.8C240.4 184.6 240 182.4 240 180C240 172.6 242.2 166 245.6 160L199.8 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="polygon-filter"
-                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}-polygon-filter`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="polygon-filter" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const PolygonFilter: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="polygon-filter" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M280 220C275.2 220 270.6 219 266.4 217.4L199.4 273.2C199.6 275.4 200 277.6 200 280C200 302 182 320 160 320S120 302 120 280C120 279.2 120.2 278.4 120.2 277.6L57.6 235.8C52.2 238.4 46.4 240 40 240C18 240 0 222 0 200C0 185.2 8 172.4 20 165.6V74.6C8 67.6 0 54.8 0 40C0 18 18 0 40 0C54.8 0 67.6 8 74.4 20H165.4C172.4 8 185 0 199.8 0C221.8 0 239.8 18 239.8 40C239.8 47.4 237.6 54 234.2 60L280 140C302.2 140.2 320 158 320 180C320 202 302 220 280 220zM199.8 80C185.2 80 172.4 71.8 165.6 60H74.6C71 66 66 71 60 74.4V165.6C72 172.4 80 185.2 80 200C80 200.8 79.8 201.6 79.8 202.4L142.4 244.2C147.8 241.6 153.6 240 160 240C164.8 240 169.4 241 173.6 242.6L240.6 186.8C240.4 184.6 240 182.4 240 180C240 172.6 242.2 166 245.6 160L199.8 80z"
+                        : "M360 260C354.6 260 349.6 259 345 257L219.4 354.6C219.6 356.4 220 358.2 220 360C220 382 202 400 180 400S140 382 140 360C140 358.8 140.2 357.6 140.4 356.2L56.6 296.2000000000001C51.4 298.6 45.8 300 40 300C18 300 0 282 0 260C0 245.2 8 232.4000000000001 20 225.6V74.6C8 67.6 0 54.8 0 40C0 18 18 0 40 0C54.8 0 67.6 8 74.4 20H225.4C232.4 8 245 0 259.8 0C281.8 0 299.8 18 299.8 40C299.8 47.4 297.6 54.4 294 60.4L360.6 180C382.4000000000001 180.4 400 198 400 220C400 242 382 260 360 260zM259.4000000000001 80C245 79.8 232.4000000000001 71.8 225.6 60H74.4C71 66 66 71 60 74.4V225.6C72 232.4 80 245.2 80 260C80 261.2 79.8 262.4 79.6 263.8L163.4 323.8C168.6 321.4 174.2 320 180 320C185.4 320 190.4 321 195 323L320.6 225.4C320.4 223.6 320 221.8 320 220C320 212.6 322.2 205.6 325.8 199.6L259.4000000000001 80z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+PolygonFilter.defaultProps = {
+    size: IconSize.STANDARD,
+};
 PolygonFilter.displayName = `Blueprint5.Icon.PolygonFilter`;
 export default PolygonFilter;