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

package/src/generated/components/right-join.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 RightJoin: 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
-                    ? "M174 306C148 280 130 242 130 200S146 120 174 94C158 84 140 80 120 80C54 80 0 134 0 200S54 320 120 320C140 320 158 316 174 306zM107.2 121C96.2 145 90 171.8 90 200S96.2 255 107.2 279C69 272.8 40 239.8 40 200S69 127.2 107.2 121zM280 320C346 320 400 266 400 200S346 80 280 80C260 80 242 84 226 94C252.0000000000001 120 270 158 270 200S254 278 226 306C242 316 260 320 280 320zM200 290C176 266 160 236 160 200S176 134 200 112C224 134 240 166 240 202S224 268 200 290z"
-                    : "M132 254C106 232 90 198 90 160S106 88 132 66C122 62 112 60 100 60C44 60 0 104 0 160S44 260 100 260C112 260 122 258 132 254zM92.8 80.4C78.4 103.4 70 130.8 70 160S78.4 216.6 92.8 239.6C52 236 20 201.8 20 160S52 84 92.8 80.4zM160 240C136 222 120 192 120 160S136 98 160 80C184 98 200 126 200 160S184 222 160 240zM220 260C276 260 320 216 320 160S276 60 220 60C208 60 198 62 188 66C214 88 230 124 230 160S214 230 188 254.0000000000001C198 258 208 260 220 260z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="right-join"
-                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}-right-join`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="right-join" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const RightJoin: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="right-join" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M132 254C106 232 90 198 90 160S106 88 132 66C122 62 112 60 100 60C44 60 0 104 0 160S44 260 100 260C112 260 122 258 132 254zM92.8 80.4C78.4 103.4 70 130.8 70 160S78.4 216.6 92.8 239.6C52 236 20 201.8 20 160S52 84 92.8 80.4zM160 240C136 222 120 192 120 160S136 98 160 80C184 98 200 126 200 160S184 222 160 240zM220 260C276 260 320 216 320 160S276 60 220 60C208 60 198 62 188 66C214 88 230 124 230 160S214 230 188 254.0000000000001C198 258 208 260 220 260z"
+                        : "M174 306C148 280 130 242 130 200S146 120 174 94C158 84 140 80 120 80C54 80 0 134 0 200S54 320 120 320C140 320 158 316 174 306zM107.2 121C96.2 145 90 171.8 90 200S96.2 255 107.2 279C69 272.8 40 239.8 40 200S69 127.2 107.2 121zM280 320C346 320 400 266 400 200S346 80 280 80C260 80 242 84 226 94C252.0000000000001 120 270 158 270 200S254 278 226 306C242 316 260 320 280 320zM200 290C176 266 160 236 160 200S176 134 200 112C224 134 240 166 240 202S224 268 200 290z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+RightJoin.defaultProps = {
+    size: IconSize.STANDARD,
+};
 RightJoin.displayName = `Blueprint5.Icon.RightJoin`;
 export default RightJoin;

package/src/generated/components/ring.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 Ring: 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 400C89.6 400 0 310.4 0 200C0 89.6 89.6 0 200 0S400 89.6 400 200C400 310.4 310.4 400 200 400zM200 100C144.8 100 100 144.8 100 200S144.8 300 200 300S300 255.2 300 200S255.2 100 200 100z"
-                    : "M160 320C71.6 320 0 248.4 0 160S71.6 0 160 0S320 71.6 320 160S248.4 320 160 320zM160 80C115.8 80 80 115.8 80 160C80 204.2 115.8 240 160 240S240 204.2 240 160C240 115.8 204.2 80 160 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="ring"
-                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}-ring`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="ring" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Ring: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="ring" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M160 320C71.6 320 0 248.4 0 160S71.6 0 160 0S320 71.6 320 160S248.4 320 160 320zM160 80C115.8 80 80 115.8 80 160C80 204.2 115.8 240 160 240S240 204.2 240 160C240 115.8 204.2 80 160 80z"
+                        : "M200 400C89.6 400 0 310.4 0 200C0 89.6 89.6 0 200 0S400 89.6 400 200C400 310.4 310.4 400 200 400zM200 100C144.8 100 100 144.8 100 200S144.8 300 200 300S300 255.2 300 200S255.2 100 200 100z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Ring.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Ring.displayName = `Blueprint5.Icon.Ring`;
 export default Ring;

package/src/generated/components/rocket-slant.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 RocketSlant: 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 300C242.426 342.4264 326.16 358.4848 360 360C358.484 326.1598 342.4260000000001 242.4264 300 200C276.1520000000001 176.152 249.13 163.548 225.04 152.31C216.198 148.184 207.75 144.244 200 140C195.9396 137.776 188.0536 133.96 180.2852 130.202L180.2842 130.202L180.284 130.202C171.406 125.906 162.6824 121.684 160 120L120 160C123.1584 165.03 140 200 140 200C140 200 167.3996 267.3996 200 300zM300 280C300 268.9544 291.046 260 280 260C268.954 260 260 268.9544 260 280C260 291.0456 268.954 300 280 300C291.046 300 300 291.0456 300 280zM60 60C60 60 60 100 100 140L140 100C100 60 60 60 60 60zM280 100L200 20L174.0488 104.664C194.696 115.86 211.664 123.892 226.906 131.108C252.392 143.17 273.044 152.946 297.98 171.404L280 100zM20 200L100 280L171.1356 297.9796C152.678 273.0436000000001 142.9024 252.3912 130.839 226.9058C123.625 211.6652 115.5928 194.696 104.3966 174.05L20 200z"
-                    : "M79.8404 120.0022C119.8402 220.0008 179.8404 299.9988 299.8400000000001 299.9992C299.8400000000001 180 219.84 120.0024 119.8402 80.002L79.8404 120.0022zM234.124 205.6954C226.314 197.885 213.65 197.885 205.84 205.6954C198.0298 213.5058 198.0298 226.1692 205.84 233.9796C213.65 241.7902 226.314 241.7902 234.124 233.9796C241.936 226.1692 241.936 213.5058 234.124 205.6954zM103.0196 210.0584L59.841 199.9962L-0.1590884 159.9962L64.8064 136.093C75.6488 162.1286 88.1222 187.217 103.0196 210.0584zM159.8406 -0.002L135.1286 64.634C161.1118 75.414 186.1668 87.806 209.004 102.6L199.8406 59.998L159.8406 -0.002zM61.217 98.794L61.2172 98.794L100.004 60.008L100.0038 60.008C80.1754 40.18 56.3058 36.914 39.9996 40.002C36.9124 56.308 41.3886 78.966 61.217 98.794z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="rocket-slant"
-                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}-rocket-slant`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="rocket-slant" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const RocketSlant: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="rocket-slant" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M79.8404 120.0022C119.8402 220.0008 179.8404 299.9988 299.8400000000001 299.9992C299.8400000000001 180 219.84 120.0024 119.8402 80.002L79.8404 120.0022zM234.124 205.6954C226.314 197.885 213.65 197.885 205.84 205.6954C198.0298 213.5058 198.0298 226.1692 205.84 233.9796C213.65 241.7902 226.314 241.7902 234.124 233.9796C241.936 226.1692 241.936 213.5058 234.124 205.6954zM103.0196 210.0584L59.841 199.9962L-0.1590884 159.9962L64.8064 136.093C75.6488 162.1286 88.1222 187.217 103.0196 210.0584zM159.8406 -0.002L135.1286 64.634C161.1118 75.414 186.1668 87.806 209.004 102.6L199.8406 59.998L159.8406 -0.002zM61.217 98.794L61.2172 98.794L100.004 60.008L100.0038 60.008C80.1754 40.18 56.3058 36.914 39.9996 40.002C36.9124 56.308 41.3886 78.966 61.217 98.794z"
+                        : "M200 300C242.426 342.4264 326.16 358.4848 360 360C358.484 326.1598 342.4260000000001 242.4264 300 200C276.1520000000001 176.152 249.13 163.548 225.04 152.31C216.198 148.184 207.75 144.244 200 140C195.9396 137.776 188.0536 133.96 180.2852 130.202L180.2842 130.202L180.284 130.202C171.406 125.906 162.6824 121.684 160 120L120 160C123.1584 165.03 140 200 140 200C140 200 167.3996 267.3996 200 300zM300 280C300 268.9544 291.046 260 280 260C268.954 260 260 268.9544 260 280C260 291.0456 268.954 300 280 300C291.046 300 300 291.0456 300 280zM60 60C60 60 60 100 100 140L140 100C100 60 60 60 60 60zM280 100L200 20L174.0488 104.664C194.696 115.86 211.664 123.892 226.906 131.108C252.392 143.17 273.044 152.946 297.98 171.404L280 100zM20 200L100 280L171.1356 297.9796C152.678 273.0436000000001 142.9024 252.3912 130.839 226.9058C123.625 211.6652 115.5928 194.696 104.3966 174.05L20 200z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+RocketSlant.defaultProps = {
+    size: IconSize.STANDARD,
+};
 RocketSlant.displayName = `Blueprint5.Icon.RocketSlant`;
 export default RocketSlant;

package/src/generated/components/rocket.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 Rocket: 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
-                    ? "M140 250C140 310 177.1428 375 200 400C222.858 375 260 310 260 250C260 190 245.714 125 240 100H160C154.2858 125 140 190 140 250zM276.802 200.0174C274.02 167.594 267.4 131.908 260 99.79L340 80L320 160L276.802 200.0174zM180.1668 80C180 77.222 180 74.326 180 71.428C180 57.142 180 50 200 0C220 50 220 57.142 220 71.428C220 74.326 220 77.222 219.834 80H180.1668zM140 99.774C132.599 131.89 125.98 167.576 123.1982 200L80 159.982L60 80L140 99.774zM200 300.0002C188.9544 300.0002 180 291.0458 180 280.0002C180 268.9544 188.9544 260.0002 200 260.0002C211.046 260.0002 220 268.9544 220 280.0002C220 291.0458 211.046 300.0002 200 300.0002z"
-                    : "M120.0002 80C87.9498 170.8134 88.296 230.6902 159.9998 320C231.704 230.3054 232.036 170.395 200 80H120.0002zM180 220C180 208.9544 171.0456 200 160 200C148.9542 200 140 208.9544 140 220C140 231.0456 148.9542 240 160 240C171.0456 240 180 231.0456 180 220zM40 59.552L100 79.552L98.9222 82.714C92.7074 100.916 81.5282 133.6578 80 160L60 140L40 59.552zM220 79.552L280 59.552L260 140L240 160C238.472 133.6578 227.292 100.916 221.078 82.714L220 79.552zM140 59.998V60H180V59.998C180 29.998 170 10 160 0C150 10 140 29.998 140 59.998z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="rocket"
-                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}-rocket`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="rocket" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Rocket: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="rocket" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M120.0002 80C87.9498 170.8134 88.296 230.6902 159.9998 320C231.704 230.3054 232.036 170.395 200 80H120.0002zM180 220C180 208.9544 171.0456 200 160 200C148.9542 200 140 208.9544 140 220C140 231.0456 148.9542 240 160 240C171.0456 240 180 231.0456 180 220zM40 59.552L100 79.552L98.9222 82.714C92.7074 100.916 81.5282 133.6578 80 160L60 140L40 59.552zM220 79.552L280 59.552L260 140L240 160C238.472 133.6578 227.292 100.916 221.078 82.714L220 79.552zM140 59.998V60H180V59.998C180 29.998 170 10 160 0C150 10 140 29.998 140 59.998z"
+                        : "M140 250C140 310 177.1428 375 200 400C222.858 375 260 310 260 250C260 190 245.714 125 240 100H160C154.2858 125 140 190 140 250zM276.802 200.0174C274.02 167.594 267.4 131.908 260 99.79L340 80L320 160L276.802 200.0174zM180.1668 80C180 77.222 180 74.326 180 71.428C180 57.142 180 50 200 0C220 50 220 57.142 220 71.428C220 74.326 220 77.222 219.834 80H180.1668zM140 99.774C132.599 131.89 125.98 167.576 123.1982 200L80 159.982L60 80L140 99.774zM200 300.0002C188.9544 300.0002 180 291.0458 180 280.0002C180 268.9544 188.9544 260.0002 200 260.0002C211.046 260.0002 220 268.9544 220 280.0002C220 291.0458 211.046 300.0002 200 300.0002z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Rocket.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Rocket.displayName = `Blueprint5.Icon.Rocket`;
 export default Rocket;

package/src/generated/components/rotate-document.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 RotateDocument: 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
-                    ? "M174.2 274.2C170.6 277.8 165.6 280 160 280H60C49 280 40 271 40 260V20C40 9 49 0 60 0H240C251 0 260 9 260 20V180C260 185.6 257.8 190.6 254.2 194.2L174.2 274.2zM220 40H80V240H140V180C140 169 149 160 160 160H220V40zM280 360H248.2L254 365.8C257.8 369.4 260 374.4 260 380C260 391 251 400 240 400C234.4 400 229.4 397.8 225.8 394.2L185.8 354.2C182.2 350.6 180 345.6 180 340C180 334.4 182.2 329.4 185.8 325.8L225.8 285.8C229.4 282.2 234.4 280 240 280C251 280 260 289 260 300C260 305.6 257.8 310.6 254.2 314.2L248.2 320H280C302 320 320 302 320 280V220C320 209 329 200 340 200S360 209 360 220V280C360 324.2 324.2000000000001 360 280 360z"
-                    : "M240 280H208.2L214 285.8C217.8 289.4 220 294.4 220 300C220 311 211 320 200 320C194.4 320 189.4 317.8 185.8 314.2L145.8 274.2C142.2 270.6 140 265.6 140 260C140 254.4 142.2 249.4 145.8 245.8L185.8 205.8C189.4 202.2 194.4 200 200 200C211 200 220 209 220 220C220 225.6 217.8 230.6 214.2 234.2L208.2 240H240C251 240 260 231 260 220V160C260 149 269 140 280 140S300 149 300 160V220C300 253.2 273.2 280 240 280zM114.2 214.2C110.6 217.8 105.6 220 100 220H20C9 220 0 211 0 200V20C0 9 9 0 20 0H160C171 0 180 9 180 20V140C180 145.6 177.8 150.6 174.2 154.2L114.2 214.2zM140 40H40V180H80V140C80 129 89 120 100 120H140V40z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="rotate-document"
-                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}-rotate-document`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="rotate-document" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const RotateDocument: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="rotate-document" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M240 280H208.2L214 285.8C217.8 289.4 220 294.4 220 300C220 311 211 320 200 320C194.4 320 189.4 317.8 185.8 314.2L145.8 274.2C142.2 270.6 140 265.6 140 260C140 254.4 142.2 249.4 145.8 245.8L185.8 205.8C189.4 202.2 194.4 200 200 200C211 200 220 209 220 220C220 225.6 217.8 230.6 214.2 234.2L208.2 240H240C251 240 260 231 260 220V160C260 149 269 140 280 140S300 149 300 160V220C300 253.2 273.2 280 240 280zM114.2 214.2C110.6 217.8 105.6 220 100 220H20C9 220 0 211 0 200V20C0 9 9 0 20 0H160C171 0 180 9 180 20V140C180 145.6 177.8 150.6 174.2 154.2L114.2 214.2zM140 40H40V180H80V140C80 129 89 120 100 120H140V40z"
+                        : "M174.2 274.2C170.6 277.8 165.6 280 160 280H60C49 280 40 271 40 260V20C40 9 49 0 60 0H240C251 0 260 9 260 20V180C260 185.6 257.8 190.6 254.2 194.2L174.2 274.2zM220 40H80V240H140V180C140 169 149 160 160 160H220V40zM280 360H248.2L254 365.8C257.8 369.4 260 374.4 260 380C260 391 251 400 240 400C234.4 400 229.4 397.8 225.8 394.2L185.8 354.2C182.2 350.6 180 345.6 180 340C180 334.4 182.2 329.4 185.8 325.8L225.8 285.8C229.4 282.2 234.4 280 240 280C251 280 260 289 260 300C260 305.6 257.8 310.6 254.2 314.2L248.2 320H280C302 320 320 302 320 280V220C320 209 329 200 340 200S360 209 360 220V280C360 324.2 324.2000000000001 360 280 360z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+RotateDocument.defaultProps = {
+    size: IconSize.STANDARD,
+};
 RotateDocument.displayName = `Blueprint5.Icon.RotateDocument`;
 export default RotateDocument;

package/src/generated/components/rotate-page.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 RotatePage: 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
-                    ? "M280 360H248.2L254 365.8C257.8 369.4 260 374.4 260 380C260 391 251 400 240 400C234.4 400 229.4 397.8 225.8 394.2L185.8 354.2C182.2 350.6 180 345.6 180 340C180 334.4 182.2 329.4 185.8 325.8L225.8 285.8C229.4 282.2 234.4 280 240 280C251 280 260 289 260 300C260 305.6 257.8 310.6 254.2 314.2L248.2 320H280C302 320 320 302 320 280V220C320 209 329 200 340 200S360 209 360 220V280C360 324.2 324.2000000000001 360 280 360zM240 260H60C49 260 40 251 40 240V20C40 9 49 0 60 0H240C251 0 260 9 260 20V240C260 251 251 260 240 260zM220 40H80V220H220V40z"
-                    : "M160 200H40C29 200 20 191 20 180V20C20 9 29 0 40 0H160C171 0 180 9 180 20V180C180 191 171 200 160 200zM140 40H60V160H140V40zM240 280H208.2L214 285.8C217.8 289.4 220 294.4 220 300C220 311 211 320 200 320C194.4 320 189.4 317.8 185.8 314.2L145.8 274.2C142.2 270.6 140 265.6 140 260C140 254.4 142.2 249.4 145.8 245.8L185.8 205.8C189.4 202.2 194.4 200 200 200C211 200 220 209 220 220C220 225.6 217.8 230.6 214.2 234.2L208.2 240H240C251 240 260 231 260 220V160C260 149 269 140 280 140S300 149 300 160V220C300 253.2 273.2 280 240 280z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="rotate-page"
-                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}-rotate-page`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="rotate-page" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const RotatePage: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="rotate-page" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M160 200H40C29 200 20 191 20 180V20C20 9 29 0 40 0H160C171 0 180 9 180 20V180C180 191 171 200 160 200zM140 40H60V160H140V40zM240 280H208.2L214 285.8C217.8 289.4 220 294.4 220 300C220 311 211 320 200 320C194.4 320 189.4 317.8 185.8 314.2L145.8 274.2C142.2 270.6 140 265.6 140 260C140 254.4 142.2 249.4 145.8 245.8L185.8 205.8C189.4 202.2 194.4 200 200 200C211 200 220 209 220 220C220 225.6 217.8 230.6 214.2 234.2L208.2 240H240C251 240 260 231 260 220V160C260 149 269 140 280 140S300 149 300 160V220C300 253.2 273.2 280 240 280z"
+                        : "M280 360H248.2L254 365.8C257.8 369.4 260 374.4 260 380C260 391 251 400 240 400C234.4 400 229.4 397.8 225.8 394.2L185.8 354.2C182.2 350.6 180 345.6 180 340C180 334.4 182.2 329.4 185.8 325.8L225.8 285.8C229.4 282.2 234.4 280 240 280C251 280 260 289 260 300C260 305.6 257.8 310.6 254.2 314.2L248.2 320H280C302 320 320 302 320 280V220C320 209 329 200 340 200S360 209 360 220V280C360 324.2 324.2000000000001 360 280 360zM240 260H60C49 260 40 251 40 240V20C40 9 49 0 60 0H240C251 0 260 9 260 20V240C260 251 251 260 240 260zM220 40H80V220H220V40z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+RotatePage.defaultProps = {
+    size: IconSize.STANDARD,
+};
 RotatePage.displayName = `Blueprint5.Icon.RotatePage`;
 export default RotatePage;