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

package/src/generated/components/blank.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 Blank: 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
-                    ? ""
-                    : ""
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="blank"
-                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}-blank`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="blank" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Blank: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="blank" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? ""
+                        : ""
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Blank.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Blank.displayName = `Blueprint5.Icon.Blank`;
 export default Blank;

package/src/generated/components/blocked-person.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 BlockedPerson: 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
-                    ? "M231 81.6C201.4 94.6 205.4 102.6 204.4 113.4C204.2 114.8 204.2 116.4 204.2 118C214.4 127 222.6 139.4 228 153.6C228 153.6 228.2 154.4 228.4 154.6C229.6 157.6 230.6 161 231.4 164.2C238.2 165.6 242.2 173 243.6 179.8C244.8 182 246.4 186.8 247 192.2C206.6 211.6 178.4 252.4 178.4 300C178.4 306 179.4 311.6 180.2 317.4C173.6 319 166.8 320 160.4 320C144.6 320 126.8 315 114.2 305.4C102 296 92.8 282.8 88.4 268.2C87.4 265 86.6 261.6 86.2 258.2C83.8 246.2 82.8 228 82.8 215.4C82.8 214.8 82.8 214.4 82.8 213.8C78 212 73.8 207.4 73 197.2C72.2 189.4 75.4 182.6 77 179.8C78.6 172.8 82.6 165.4 89.6 164.2C90.4 160.8 91.4 157.6 92.6 154.6C92.6 154.4 92.8 154.2 92.8 154L93 153.8C98.4 139.4 107 126.8 117.4 117.8C117.4 116.4 117.2 115 117.2 113.6C116.2 102.8 119.2 94.8 89.6 81.8C60 68.8 15.4 54.8 6.4 33.8C-3 12.4 0.8 0 0.8 0H319.8C319.8 0 323.4 12.4 314.4 33.4C305.2 54.6 260.6 68.4 231 81.6zM299.4000000000001 400C243.8 400 198.8 355.2 198.8 300S243.8 200 299.4000000000001 200S400 244.8 400 300S355 400 299.4000000000001 400zM238.8 300C238.8 333.2 265.8 360 299.2 360C308.6 360 317.2 357.8 325 354L244.8 274.2C241.2 282.2 238.8 290.8 238.8 300zM299.4000000000001 240C290 240 281.4 242.2 273.6 246L353.8 325.8C357.6 318 359.8 309.4 359.8 300C359.8 266.8 332.6 240 299.4000000000001 240z"
-                    : "M187.8 66.2C163.8 76.8 167 83.2 166.2 92C166 93.4 166 94.6 165.8 96C174 103.4 180.8 113.4 185.2 124.8C185.2 124.8 185.4 125.4 185.4 125.6C186.4 128.2 187.2 130.8 188 133.4C193.4 134.6 196.6 140.6 198 146C198.2 146.6 198.6 147.6 199 148.4C163.6 164 138.8 199.2 138.8 240C138.8 246.4 139.6 252.4 140.6 258.4C137.2 259 133.6 260 130.4 260C117.4 260 103 256 92.8 248.2C82.8 240.6 75.4 229.8 71.8 218C71 215.2 70.4 212.6 70 209.8C68.2 200.2 67.2 185.2 67.2 175C67.2 174.6 67.2 174.2 67.2 173.8C63.4 172.2 60 168.4 59.2 160.2C58.6 154 61.2 148.4 62.4 146.2C63.6 140.6 67 134.4 72.6 133.4C73.4 130.6 74.2 128 75.2 125.6C75.2 125.4 75.4 125.2 75.4 125.2L75.4 125C79.8 113.2 86.8 103 95.2 95.8C95.2 94.6 95 93.4 95 92.4C94.2 83.6 96.6 77.2 72.6 66.6C48.6 56 12.4 44.6 5 27.6C-2.4 10 0.6 0 0.6 0H259.8C259.8 0 262.8 10 255.4 27.2C248 44.2 211.8 55.6 187.8 66.2zM239.4 320C195 320 158.8 284.2 158.8 240C158.8 195.8 194.8 160 239.4 160S320 195.8 320 240C320 284.2 284 320 239.4 320zM199.2 240C199.2 262 217.2 280 239.4 280C246.8 280 253.8 277.8 259.8 274.4L204.8 219.8C201.4 225.8 199.2 232.6 199.2 240zM239.4 200C232.0000000000001 200 225 202.2 219 205.6L274 260.2C277.6 254.2 279.6 247.4 279.6 240C279.8 218 261.6 200 239.4 200z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="blocked-person"
-                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}-blocked-person`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="blocked-person" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const BlockedPerson: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="blocked-person" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M187.8 66.2C163.8 76.8 167 83.2 166.2 92C166 93.4 166 94.6 165.8 96C174 103.4 180.8 113.4 185.2 124.8C185.2 124.8 185.4 125.4 185.4 125.6C186.4 128.2 187.2 130.8 188 133.4C193.4 134.6 196.6 140.6 198 146C198.2 146.6 198.6 147.6 199 148.4C163.6 164 138.8 199.2 138.8 240C138.8 246.4 139.6 252.4 140.6 258.4C137.2 259 133.6 260 130.4 260C117.4 260 103 256 92.8 248.2C82.8 240.6 75.4 229.8 71.8 218C71 215.2 70.4 212.6 70 209.8C68.2 200.2 67.2 185.2 67.2 175C67.2 174.6 67.2 174.2 67.2 173.8C63.4 172.2 60 168.4 59.2 160.2C58.6 154 61.2 148.4 62.4 146.2C63.6 140.6 67 134.4 72.6 133.4C73.4 130.6 74.2 128 75.2 125.6C75.2 125.4 75.4 125.2 75.4 125.2L75.4 125C79.8 113.2 86.8 103 95.2 95.8C95.2 94.6 95 93.4 95 92.4C94.2 83.6 96.6 77.2 72.6 66.6C48.6 56 12.4 44.6 5 27.6C-2.4 10 0.6 0 0.6 0H259.8C259.8 0 262.8 10 255.4 27.2C248 44.2 211.8 55.6 187.8 66.2zM239.4 320C195 320 158.8 284.2 158.8 240C158.8 195.8 194.8 160 239.4 160S320 195.8 320 240C320 284.2 284 320 239.4 320zM199.2 240C199.2 262 217.2 280 239.4 280C246.8 280 253.8 277.8 259.8 274.4L204.8 219.8C201.4 225.8 199.2 232.6 199.2 240zM239.4 200C232.0000000000001 200 225 202.2 219 205.6L274 260.2C277.6 254.2 279.6 247.4 279.6 240C279.8 218 261.6 200 239.4 200z"
+                        : "M231 81.6C201.4 94.6 205.4 102.6 204.4 113.4C204.2 114.8 204.2 116.4 204.2 118C214.4 127 222.6 139.4 228 153.6C228 153.6 228.2 154.4 228.4 154.6C229.6 157.6 230.6 161 231.4 164.2C238.2 165.6 242.2 173 243.6 179.8C244.8 182 246.4 186.8 247 192.2C206.6 211.6 178.4 252.4 178.4 300C178.4 306 179.4 311.6 180.2 317.4C173.6 319 166.8 320 160.4 320C144.6 320 126.8 315 114.2 305.4C102 296 92.8 282.8 88.4 268.2C87.4 265 86.6 261.6 86.2 258.2C83.8 246.2 82.8 228 82.8 215.4C82.8 214.8 82.8 214.4 82.8 213.8C78 212 73.8 207.4 73 197.2C72.2 189.4 75.4 182.6 77 179.8C78.6 172.8 82.6 165.4 89.6 164.2C90.4 160.8 91.4 157.6 92.6 154.6C92.6 154.4 92.8 154.2 92.8 154L93 153.8C98.4 139.4 107 126.8 117.4 117.8C117.4 116.4 117.2 115 117.2 113.6C116.2 102.8 119.2 94.8 89.6 81.8C60 68.8 15.4 54.8 6.4 33.8C-3 12.4 0.8 0 0.8 0H319.8C319.8 0 323.4 12.4 314.4 33.4C305.2 54.6 260.6 68.4 231 81.6zM299.4000000000001 400C243.8 400 198.8 355.2 198.8 300S243.8 200 299.4000000000001 200S400 244.8 400 300S355 400 299.4000000000001 400zM238.8 300C238.8 333.2 265.8 360 299.2 360C308.6 360 317.2 357.8 325 354L244.8 274.2C241.2 282.2 238.8 290.8 238.8 300zM299.4000000000001 240C290 240 281.4 242.2 273.6 246L353.8 325.8C357.6 318 359.8 309.4 359.8 300C359.8 266.8 332.6 240 299.4000000000001 240z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+BlockedPerson.defaultProps = {
+    size: IconSize.STANDARD,
+};
 BlockedPerson.displayName = `Blueprint5.Icon.BlockedPerson`;
 export default BlockedPerson;

package/src/generated/components/bold.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 Bold: 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
-                    ? "M286 220C294 236 300 252 300 270C300 320 260 360 210 360H100C88 360 80 352 80 340V80C80 68 88 60 100 60H230C280 60 320 100 320 150C320 178 306 204 286 220zM140 300H210C226 300 240 286 240 270C240 254 226 240 210 240H140V300zM230 120H140V180H230C246 180 260 166 260 150C260 134 246 120 230 120z"
-                    : "M234 180C238 188 240 200 240 210C240 212 240 216 240 218C240 220 240 220 240 220C240 222 240 224 238 226C238 226 238 228 238 228C228 258 202 280 170 280H80C70 280 60 272 60 260V60C60 50 68 40 80 40H180C224 40 260 76 260 120C260 144 250 166 234 180zM120 220H160C172 220 180 212 180 200S172 180 160 180H120V220zM180 100H120V140H180C192 140 200 132 200 120S192 100 180 100z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="bold"
-                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}-bold`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="bold" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Bold: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="bold" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M234 180C238 188 240 200 240 210C240 212 240 216 240 218C240 220 240 220 240 220C240 222 240 224 238 226C238 226 238 228 238 228C228 258 202 280 170 280H80C70 280 60 272 60 260V60C60 50 68 40 80 40H180C224 40 260 76 260 120C260 144 250 166 234 180zM120 220H160C172 220 180 212 180 200S172 180 160 180H120V220zM180 100H120V140H180C192 140 200 132 200 120S192 100 180 100z"
+                        : "M286 220C294 236 300 252 300 270C300 320 260 360 210 360H100C88 360 80 352 80 340V80C80 68 88 60 100 60H230C280 60 320 100 320 150C320 178 306 204 286 220zM140 300H210C226 300 240 286 240 270C240 254 226 240 210 240H140V300zM230 120H140V180H230C246 180 260 166 260 150C260 134 246 120 230 120z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Bold.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Bold.displayName = `Blueprint5.Icon.Bold`;
 export default Bold;

package/src/generated/components/book.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 Book: 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 380V20C60 9 69 0 80 0H120V400H80C69 400 60 391 60 380zM340 400H300V240L260 280L220 240V400H140V0H340C351 0 360 9 360 20V380C360 391 351 400 340 400z"
-                    : "M40 300V20C40 9 49 0 60 0H80V320H60C49 320 40 311 40 300zM260 320H240V180L200 220L160 180V320H100V0H260C271 0 280 9 280 20V300C280 311 271 320 260 320z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="book"
-                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}-book`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="book" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Book: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="book" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M40 300V20C40 9 49 0 60 0H80V320H60C49 320 40 311 40 300zM260 320H240V180L200 220L160 180V320H100V0H260C271 0 280 9 280 20V300C280 311 271 320 260 320z"
+                        : "M60 380V20C60 9 69 0 80 0H120V400H80C69 400 60 391 60 380zM340 400H300V240L260 280L220 240V400H140V0H340C351 0 360 9 360 20V380C360 391 351 400 340 400z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Book.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Book.displayName = `Blueprint5.Icon.Book`;
 export default Book;

package/src/generated/components/bookmark.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 Bookmark: 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
-                    ? "M120 400C109 400 100 391 100 380V310C100 299 100 281 100 270V220C100 209 100 191 100 180V20C100 9 106.4 6.4 114.2 14.2L186 86C193.8 93.8 206.6 93.8 214.2 86L286 14.2C293.6 6.4 300 9 300 20V180C300 191 300 209 300 220V270C300 281 300 299 300 310V380C300 391 291 400 280 400H120z"
-                    : "M224 319.8H221C220.6 319.8 220.4 320 220 320H100C99.6 320 99.4 319.8 99 319.8H96C87.2 319.8 80 312.4 80 303.4V8.4C80 -0.6 85 -2.8 91.4 3.6L148.8 62.4C155 68.8 165.2 68.8 171.4 62.4L228.8 3.6C235.0000000000001 -2.8 240.2000000000001 -0.6 240.2000000000001 8.4V303.4C240 312.4 232.8 319.8 224 319.8z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="bookmark"
-                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}-bookmark`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="bookmark" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Bookmark: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="bookmark" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M224 319.8H221C220.6 319.8 220.4 320 220 320H100C99.6 320 99.4 319.8 99 319.8H96C87.2 319.8 80 312.4 80 303.4V8.4C80 -0.6 85 -2.8 91.4 3.6L148.8 62.4C155 68.8 165.2 68.8 171.4 62.4L228.8 3.6C235.0000000000001 -2.8 240.2000000000001 -0.6 240.2000000000001 8.4V303.4C240 312.4 232.8 319.8 224 319.8z"
+                        : "M120 400C109 400 100 391 100 380V310C100 299 100 281 100 270V220C100 209 100 191 100 180V20C100 9 106.4 6.4 114.2 14.2L186 86C193.8 93.8 206.6 93.8 214.2 86L286 14.2C293.6 6.4 300 9 300 20V180C300 191 300 209 300 220V270C300 281 300 299 300 310V380C300 391 291 400 280 400H120z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Bookmark.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Bookmark.displayName = `Blueprint5.Icon.Bookmark`;
 export default Bookmark;

package/src/generated/components/box.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 Box: 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
-                    ? "M397.8 268.8L397.8 268.8L338 388.8L337.8 388.8C334.4 395.4 327.8 400 320 400H80C72.2 400 65.6 395.4 62.2 388.8L62 388.8L2 268.8L2.2 268.8C1 266.2 0 263.2 0 260V20C0 9 9 0 20 0H380C391 0 400 9 400 20V260C400 263.2 399 266.2 397.8 268.8zM220 360H307.6L347.6 280H220V360zM92.4 360H180V280H52.4L92.4 360zM360 40H40V240H360V40zM160 160H240C251 160 260 169 260 180C260 191 251 200 240 200H160C149 200 140 191 140 180C140 169 149 160 160 160z"
-                    : "M120 120H200C211 120 220 129 220 140C220 151 211 160 200 160H120C109 160 100 151 100 140C100 129 109 120 120 120zM318.6 207.4L318.6 207.4L318.6 207.8C318.6 207.8 318.6 207.8 318.6 207.8L278.8 307.4L278.8 307.4C275.6 314.8 268.4 320 260 320H60C51.6 320 44.4 314.8 41.4 307.4L41.4 307.4L1.6 207.8C1.6 207.8 1.6 207.8 1.6 207.8L1.4 207.4L1.4 207.4C0.6 205.2 0 202.6 0 200V20C0 9 9 0 20 0H300C311 0 320 9 320 20V200C320 202.6 319.4000000000001 205.2 318.6 207.4zM180 280H246.4L270.4 220H180V280zM73.6 280H140V220H49.6L73.6 280zM280 40H40V180H280V40z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="box"
-                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}-box`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="box" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Box: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="box" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M120 120H200C211 120 220 129 220 140C220 151 211 160 200 160H120C109 160 100 151 100 140C100 129 109 120 120 120zM318.6 207.4L318.6 207.4L318.6 207.8C318.6 207.8 318.6 207.8 318.6 207.8L278.8 307.4L278.8 307.4C275.6 314.8 268.4 320 260 320H60C51.6 320 44.4 314.8 41.4 307.4L41.4 307.4L1.6 207.8C1.6 207.8 1.6 207.8 1.6 207.8L1.4 207.4L1.4 207.4C0.6 205.2 0 202.6 0 200V20C0 9 9 0 20 0H300C311 0 320 9 320 20V200C320 202.6 319.4000000000001 205.2 318.6 207.4zM180 280H246.4L270.4 220H180V280zM73.6 280H140V220H49.6L73.6 280zM280 40H40V180H280V40z"
+                        : "M397.8 268.8L397.8 268.8L338 388.8L337.8 388.8C334.4 395.4 327.8 400 320 400H80C72.2 400 65.6 395.4 62.2 388.8L62 388.8L2 268.8L2.2 268.8C1 266.2 0 263.2 0 260V20C0 9 9 0 20 0H380C391 0 400 9 400 20V260C400 263.2 399 266.2 397.8 268.8zM220 360H307.6L347.6 280H220V360zM92.4 360H180V280H52.4L92.4 360zM360 40H40V240H360V40zM160 160H240C251 160 260 169 260 180C260 191 251 200 240 200H160C149 200 140 191 140 180C140 169 149 160 160 160z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Box.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Box.displayName = `Blueprint5.Icon.Box`;
 export default Box;