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

package/src/generated/components/target.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 Target: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M180 300C180 311.0462 188.955 320 200 320C211.044 320 220 311.0462 220 300V240C220 228.9538 211.044 220 200 220C188.955 220 180 228.9538 180 240V300zM240 220C228.956 220 220 211.0462 220 200C220 188.954 228.956 180 240 180H300C311.044 180 320 188.954 320 200C320 211.0462 311.044 220 300 220H240zM80 200C80 211.0462 88.955 220 100 220H160C171.045 220 180 211.0462 180 200C180 188.954 171.045 180 160 180H100C88.955 180 80 188.954 80 200zM200 180C188.955 180 180 171.046 180 160V100C180 88.954 188.955 80 200 80C211.044 80 220 88.954 220 100V160C220 171.046 211.044 180 200 180zM200 0C310.456 0 400 89.544 400 200C400 310.4566 310.456 400 200 400C89.5434 400 0 310.4566 0 200C0 89.544 89.5434 0 200 0zM200 40C288.366 40 360 111.634 360 200C360 288.3654 288.366 360 200 360C111.6334 360 40 288.3654 40 200C40 111.634 111.6334 40 200 40z"
-                    : "M140 240C140 251.0462 148.955 260 160 260C171.045 260 180 251.0462 180 240V200C180 188.9538 171.045 180 160 180C148.955 180 140 188.9538 140 200V240zM200 180C188.955 180 180 171.0462 180 160C180 148.9538 188.955 140 200 140H240C251.044 140 260 148.9538 260 160C260 171.0462 251.044 180 240 180H200zM60 160C60 171.0462 68.955 180 80 180H120C131.045 180 140 171.0462 140 160C140 148.9538 131.045 140 120 140H80C68.955 140 60 148.9538 60 160zM160 140C148.955 140 140 131.0462 140 120V80C140 68.954 148.955 60 160 60C171.045 60 180 68.954 180 80V120C180 131.0462 171.045 140 160 140zM160 0C248.366 0 320 71.634 320 160C320 248.3654 248.366 320 160 320C71.6334 320 0 248.3654 0 160C0 71.634 71.6334 0 160 0zM160 40C226.274 40 280 93.726 280 160C280 226.2744 226.274 280 160 280C93.7256 280 40 226.2744 40 160C40 93.726 93.7256 40 160 40z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="target"
-                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}-target`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="target" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Target: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="target" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M140 240C140 251.0462 148.955 260 160 260C171.045 260 180 251.0462 180 240V200C180 188.9538 171.045 180 160 180C148.955 180 140 188.9538 140 200V240zM200 180C188.955 180 180 171.0462 180 160C180 148.9538 188.955 140 200 140H240C251.044 140 260 148.9538 260 160C260 171.0462 251.044 180 240 180H200zM60 160C60 171.0462 68.955 180 80 180H120C131.045 180 140 171.0462 140 160C140 148.9538 131.045 140 120 140H80C68.955 140 60 148.9538 60 160zM160 140C148.955 140 140 131.0462 140 120V80C140 68.954 148.955 60 160 60C171.045 60 180 68.954 180 80V120C180 131.0462 171.045 140 160 140zM160 0C248.366 0 320 71.634 320 160C320 248.3654 248.366 320 160 320C71.6334 320 0 248.3654 0 160C0 71.634 71.6334 0 160 0zM160 40C226.274 40 280 93.726 280 160C280 226.2744 226.274 280 160 280C93.7256 280 40 226.2744 40 160C40 93.726 93.7256 40 160 40z"
+                        : "M180 300C180 311.0462 188.955 320 200 320C211.044 320 220 311.0462 220 300V240C220 228.9538 211.044 220 200 220C188.955 220 180 228.9538 180 240V300zM240 220C228.956 220 220 211.0462 220 200C220 188.954 228.956 180 240 180H300C311.044 180 320 188.954 320 200C320 211.0462 311.044 220 300 220H240zM80 200C80 211.0462 88.955 220 100 220H160C171.045 220 180 211.0462 180 200C180 188.954 171.045 180 160 180H100C88.955 180 80 188.954 80 200zM200 180C188.955 180 180 171.046 180 160V100C180 88.954 188.955 80 200 80C211.044 80 220 88.954 220 100V160C220 171.046 211.044 180 200 180zM200 0C310.456 0 400 89.544 400 200C400 310.4566 310.456 400 200 400C89.5434 400 0 310.4566 0 200C0 89.544 89.5434 0 200 0zM200 40C288.366 40 360 111.634 360 200C360 288.3654 288.366 360 200 360C111.6334 360 40 288.3654 40 200C40 111.634 111.6334 40 200 40z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Target.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Target.displayName = `Blueprint5.Icon.Target`;
 export default Target;

package/src/generated/components/taxi.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 Taxi: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M380 220H373.4000000000001L380 200V190C380 187 379.4 184 378.6 181.2L378.8 181.2L340 55.4V50C340 33.4 326.6 20 310 20S280 33.4 280 50V60H120V50C120 33.4 106.6 20 90 20C73.4 20 60 33.4 60 50V55.4L21.4 181L21.6 181C20.6 184 20 187 20 190V200C20 200 20.4 201.2 21 203.2C22.2 206.6 24.2 212.6 26.6 220H20C9 220 0 229 0 240C0 251 9 260 20 260H40C50 290 60 320 60 320H59.8L59.8 320.2C64.8 333 79.8 346.4 93.2 350.2C93.2 350.2 108.8 354.4 139.8 357.4V360V380C139.8 391 148.8 400 159.8 400H239.8C250.8 400 259.8 391 259.8 380V360V357.4C290.8 354.6 306.4 350.2 306.4 350.2C319.8 346.4 334.8000000000001 333 339.8000000000001 320.2L339.8000000000001 320H340L360 260H380C391 260 400 251 400 240C400 229 391 220 380 220zM60 170C60 153.4 73.4 140 90 140C106.6 140 120 153.4 120 170C120 186.6 106.6 200 90 200C73.4 200 60 186.6 60 170zM320 260L300 320H260V320H140V320H100L80 260V240H320V260zM310 200C293.4 200 280 186.6 280 170C280 153.4 293.4 140 310 140S340 153.4 340 170C340 186.6 326.6 200 310 200z"
-                    : "M302.4 187.4H294.8L300 180C299.8 174 299.8 167.2 300 160.4C300 160.2 300 160.2 300 160C300 158.6 299.4000000000001 157.4 299.2000000000001 156.2L299.6 156.2L280 58V40C280 29 271 20 260 20S240 29 240 40V60H80V40C80 29 71 20 60 20S40 29 40 40V58L20.4 156L20.8 156C20.6 157.4 20 158.6 20 160H19.8C19.8 166.6 19.8 173.4 20 180L25.2 187.4H17.6C8 187.4 0 195.8 0 206.2C0 216.6 8 225 17.6 225H38.6L54 267.2C57.8 277.8 69.2 288.8 79.2 292C79.2 292 92.8 296 120.2 298.4C120.2 299 120 299.4 120 300C120 311 129 320 140 320H180C191 320 200 311 200 300C200 299.4 199.8 299 199.6 298.4C227.0000000000001 296 240.6 292 240.6 292C250.8 289 262.2000000000001 277.8 266 267.2L281.2 224.8H302.2000000000001C312 224.8 320 216.4 320 206.2C320 195.8 312 187.4 302.4 187.4zM220 120H260V160H260H220V120zM60 120H100V160H60H60V120zM260 220L245.4 252.6C244.2 256.2 243.6 260 240 260H80C76.4 260 75.8 256.2 74.6 252.6L60 220C58.8 216.4 56.4 200 60 200H260C263.6 200 261.2 216.4 260 220z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="taxi"
-                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}-taxi`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="taxi" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Taxi: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="taxi" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M302.4 187.4H294.8L300 180C299.8 174 299.8 167.2 300 160.4C300 160.2 300 160.2 300 160C300 158.6 299.4000000000001 157.4 299.2000000000001 156.2L299.6 156.2L280 58V40C280 29 271 20 260 20S240 29 240 40V60H80V40C80 29 71 20 60 20S40 29 40 40V58L20.4 156L20.8 156C20.6 157.4 20 158.6 20 160H19.8C19.8 166.6 19.8 173.4 20 180L25.2 187.4H17.6C8 187.4 0 195.8 0 206.2C0 216.6 8 225 17.6 225H38.6L54 267.2C57.8 277.8 69.2 288.8 79.2 292C79.2 292 92.8 296 120.2 298.4C120.2 299 120 299.4 120 300C120 311 129 320 140 320H180C191 320 200 311 200 300C200 299.4 199.8 299 199.6 298.4C227.0000000000001 296 240.6 292 240.6 292C250.8 289 262.2000000000001 277.8 266 267.2L281.2 224.8H302.2000000000001C312 224.8 320 216.4 320 206.2C320 195.8 312 187.4 302.4 187.4zM220 120H260V160H260H220V120zM60 120H100V160H60H60V120zM260 220L245.4 252.6C244.2 256.2 243.6 260 240 260H80C76.4 260 75.8 256.2 74.6 252.6L60 220C58.8 216.4 56.4 200 60 200H260C263.6 200 261.2 216.4 260 220z"
+                        : "M380 220H373.4000000000001L380 200V190C380 187 379.4 184 378.6 181.2L378.8 181.2L340 55.4V50C340 33.4 326.6 20 310 20S280 33.4 280 50V60H120V50C120 33.4 106.6 20 90 20C73.4 20 60 33.4 60 50V55.4L21.4 181L21.6 181C20.6 184 20 187 20 190V200C20 200 20.4 201.2 21 203.2C22.2 206.6 24.2 212.6 26.6 220H20C9 220 0 229 0 240C0 251 9 260 20 260H40C50 290 60 320 60 320H59.8L59.8 320.2C64.8 333 79.8 346.4 93.2 350.2C93.2 350.2 108.8 354.4 139.8 357.4V360V380C139.8 391 148.8 400 159.8 400H239.8C250.8 400 259.8 391 259.8 380V360V357.4C290.8 354.6 306.4 350.2 306.4 350.2C319.8 346.4 334.8000000000001 333 339.8000000000001 320.2L339.8000000000001 320H340L360 260H380C391 260 400 251 400 240C400 229 391 220 380 220zM60 170C60 153.4 73.4 140 90 140C106.6 140 120 153.4 120 170C120 186.6 106.6 200 90 200C73.4 200 60 186.6 60 170zM320 260L300 320H260V320H140V320H100L80 260V240H320V260zM310 200C293.4 200 280 186.6 280 170C280 153.4 293.4 140 310 140S340 153.4 340 170C340 186.6 326.6 200 310 200z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Taxi.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Taxi.displayName = `Blueprint5.Icon.Taxi`;
 export default Taxi;

package/src/generated/components/temperature.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 Temperature: 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
-                    ? "M220 400C197.9086 400 180 382.09138 180 360V149.298C156.088 135.466 140 109.612 140 80C140 35.818 175.8172 0 220 0C264.182 0 300 35.818 300 80C300 109.612 283.9120000000001 135.466 260 149.298V360C260 382.09138 242.092 400 220 400zM60 350C60 355.5228 64.4772 360 70 360L150 360C155.5228 360 160 355.5228 160 350C160 344.4772 155.5228 340 150 340L70 340C64.4772 340 60 344.4772 60 350zM70 240C64.4772 240 60 235.5228 60 230C60 224.4772 64.4772 220 70 220H150C155.5228 220 160 224.4772 160 230C160 235.5228 155.5228 240 150 240H70zM100 290C100 295.5228 104.4772 300 110 300H150C155.5228 300 160 295.5228 160 290C160 284.4772000000001 155.5228 280 150 280H110C104.4772 280 100 284.4772000000001 100 290zM110 180C104.4772 180 100 175.522 100 170C100 164.478 104.4772 160 110 160H150C155.5228 160 160 164.478 160 170C160 175.522 155.5228 180 150 180H110z"
-                    : "M170 320C153.4314 320 140 306.56854 140 290V133.2636C116.3506 122.029 100 97.924 100 70C100 31.34 131.34 0 170 0C208.66 0 240 31.34 240 70C240 97.924 223.65 122.029 200 133.2636V290C200 306.56854 186.5686 320 170 320zM40 210C40 215.5228 44.4772 220 50 220L110 220C115.5228 220 120 215.5228 120 210C120 204.4772 115.5228 200 110 200L50 200C44.4772 200 40 204.4772 40 210zM50 300C44.4772 300 40 295.5228 40 290C40 284.4772 44.4772 280 50 280L110 280C115.5228 280 120 284.4772 120 290C120 295.5228 115.5228 300 110 300L50 300zM80 250C80 255.5228 84.4772 260 90 260H110C115.5228 260 120 255.5228 120 250C120 244.4772 115.5228 240 110 240H90C84.4772 240 80 244.4772 80 250zM90 180C84.4772 180 80 175.5228 80 170C80 164.4772 84.4772 160 90 160H110C115.5228 160 120 164.4772 120 170C120 175.5228 115.5228 180 110 180L90 180z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="temperature"
-                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}-temperature`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="temperature" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Temperature: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="temperature" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M170 320C153.4314 320 140 306.56854 140 290V133.2636C116.3506 122.029 100 97.924 100 70C100 31.34 131.34 0 170 0C208.66 0 240 31.34 240 70C240 97.924 223.65 122.029 200 133.2636V290C200 306.56854 186.5686 320 170 320zM40 210C40 215.5228 44.4772 220 50 220L110 220C115.5228 220 120 215.5228 120 210C120 204.4772 115.5228 200 110 200L50 200C44.4772 200 40 204.4772 40 210zM50 300C44.4772 300 40 295.5228 40 290C40 284.4772 44.4772 280 50 280L110 280C115.5228 280 120 284.4772 120 290C120 295.5228 115.5228 300 110 300L50 300zM80 250C80 255.5228 84.4772 260 90 260H110C115.5228 260 120 255.5228 120 250C120 244.4772 115.5228 240 110 240H90C84.4772 240 80 244.4772 80 250zM90 180C84.4772 180 80 175.5228 80 170C80 164.4772 84.4772 160 90 160H110C115.5228 160 120 164.4772 120 170C120 175.5228 115.5228 180 110 180L90 180z"
+                        : "M220 400C197.9086 400 180 382.09138 180 360V149.298C156.088 135.466 140 109.612 140 80C140 35.818 175.8172 0 220 0C264.182 0 300 35.818 300 80C300 109.612 283.9120000000001 135.466 260 149.298V360C260 382.09138 242.092 400 220 400zM60 350C60 355.5228 64.4772 360 70 360L150 360C155.5228 360 160 355.5228 160 350C160 344.4772 155.5228 340 150 340L70 340C64.4772 340 60 344.4772 60 350zM70 240C64.4772 240 60 235.5228 60 230C60 224.4772 64.4772 220 70 220H150C155.5228 220 160 224.4772 160 230C160 235.5228 155.5228 240 150 240H70zM100 290C100 295.5228 104.4772 300 110 300H150C155.5228 300 160 295.5228 160 290C160 284.4772000000001 155.5228 280 150 280H110C104.4772 280 100 284.4772000000001 100 290zM110 180C104.4772 180 100 175.522 100 170C100 164.478 104.4772 160 110 160H150C155.5228 160 160 164.478 160 170C160 175.522 155.5228 180 150 180H110z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Temperature.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Temperature.displayName = `Blueprint5.Icon.Temperature`;
 export default Temperature;

package/src/generated/components/text-highlight.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 TextHighlight: 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 60C309 60 300 69 300 80V320C300 331 309 340 320 340S340 349 340 360C340 371 331 380 320 380C304.6 380 290.6 374 280 364.4C269.4000000000001 374 255.4 380 240 380C229 380 220 371 220 360C220 349 229 340 240 340S260 331 260 320V80C260 69 251 60 240 60S220 51 220 40C220 29 229 20 240 20C255.4 20 269.4000000000001 26 280 35.6C290.6 26 304.6 20 320 20C331 20 340 29 340 40C340 51 331 60 320 60zM240 140H40V260H240V300H20C9 300 0 291 0 280V120C0 109 9 100 20 100H240V140zM380 300H320V260H360V140H320V100H380C391 100 400 109 400 120V280C400 291 391 300 380 300z"
-                    : "M180 120H40V200H180V240H20C9 240 0 231 0 220V100C0 89 9 80 20 80H180V120zM260 60H240V260H260C271 260 280 269 280 280C280 291 271 300 260 300H240C232.6 300 226 297.8 220 294.4C214 297.8 207.4 300 200 300H180C169 300 160 291 160 280C160 269 169 260 180 260H200V60H180C169 60 160 51 160 40C160 29 169 20 180 20H200C207.4 20 214 22.2 220 25.6C226 22.2 232.6 20 240 20H260C271 20 280 29 280 40C280 51 271 60 260 60zM300 240H260V200H280V120H260V80H300C311 80 320 89 320 100V220C320 231 311 240 300 240z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="text-highlight"
-                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}-text-highlight`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="text-highlight" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const TextHighlight: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="text-highlight" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M180 120H40V200H180V240H20C9 240 0 231 0 220V100C0 89 9 80 20 80H180V120zM260 60H240V260H260C271 260 280 269 280 280C280 291 271 300 260 300H240C232.6 300 226 297.8 220 294.4C214 297.8 207.4 300 200 300H180C169 300 160 291 160 280C160 269 169 260 180 260H200V60H180C169 60 160 51 160 40C160 29 169 20 180 20H200C207.4 20 214 22.2 220 25.6C226 22.2 232.6 20 240 20H260C271 20 280 29 280 40C280 51 271 60 260 60zM300 240H260V200H280V120H260V80H300C311 80 320 89 320 100V220C320 231 311 240 300 240z"
+                        : "M320 60C309 60 300 69 300 80V320C300 331 309 340 320 340S340 349 340 360C340 371 331 380 320 380C304.6 380 290.6 374 280 364.4C269.4000000000001 374 255.4 380 240 380C229 380 220 371 220 360C220 349 229 340 240 340S260 331 260 320V80C260 69 251 60 240 60S220 51 220 40C220 29 229 20 240 20C255.4 20 269.4000000000001 26 280 35.6C290.6 26 304.6 20 320 20C331 20 340 29 340 40C340 51 331 60 320 60zM240 140H40V260H240V300H20C9 300 0 291 0 280V120C0 109 9 100 20 100H240V140zM380 300H320V260H360V140H320V100H380C391 100 400 109 400 120V280C400 291 391 300 380 300z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+TextHighlight.defaultProps = {
+    size: IconSize.STANDARD,
+};
 TextHighlight.displayName = `Blueprint5.Icon.TextHighlight`;
 export default TextHighlight;

package/src/generated/components/th-derived.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 ThDerived: 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
-                    ? "M106 134C102 130 100 126 100 120C100 108 108 100 120 100C126 100 130 102 134 106L194 166C198 170 200 174 200 180S198 190 194 194L134 254C130 258 126 260 120 260C108 260 100 252 100 240C100 234 102 230 106 226L132 200H20C8 200 0 192 0 180S8 160 20 160H132L106 134L106 134zM380 380H60C50 380 40 370 40 360V240H60C60 274 86 300 120 300C136 300 152 294 162 282L164 280H180V264L200 244V280H360V220H224C230 214 234 208 236 200H360V140H224L222 138L204 120H360V60H200V116L180 96V60H80V76C68 86 60 102 60 120H40V40C40 30 50 20 60 20H380C392 20 400 30 400 40V360C400 370 390 380 380 380L380 380z"
-                    : "M112 120L106 114C102 110 100 106 100 100C100 88 108 80 120 80C126 80 130 82 134 86L174 126C178 130 180 134 180 140S178 150 174 154L134 194C130 198 126 200 120 200C110 200 100 192 100 180C100 174 102 170 106 166L112 160H20C8 160 0 152 0 140S8 120 20 120H112L112 120zM300 300H40C30 300 20 290 20 280V180H60V220H280V180H176L188 168L188 168C190 166 192 162 194 160H280V120H194C192 118 190 114 188 112L188 112L176 100H280V60H60V100H20V40C20 30 30 20 40 20H300C312 20 320 30 320 40V280C320 290 312 300 300 300L300 300z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="th-derived"
-                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}-th-derived`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="th-derived" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const ThDerived: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="th-derived" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M112 120L106 114C102 110 100 106 100 100C100 88 108 80 120 80C126 80 130 82 134 86L174 126C178 130 180 134 180 140S178 150 174 154L134 194C130 198 126 200 120 200C110 200 100 192 100 180C100 174 102 170 106 166L112 160H20C8 160 0 152 0 140S8 120 20 120H112L112 120zM300 300H40C30 300 20 290 20 280V180H60V220H280V180H176L188 168L188 168C190 166 192 162 194 160H280V120H194C192 118 190 114 188 112L188 112L176 100H280V60H60V100H20V40C20 30 30 20 40 20H300C312 20 320 30 320 40V280C320 290 312 300 300 300L300 300z"
+                        : "M106 134C102 130 100 126 100 120C100 108 108 100 120 100C126 100 130 102 134 106L194 166C198 170 200 174 200 180S198 190 194 194L134 254C130 258 126 260 120 260C108 260 100 252 100 240C100 234 102 230 106 226L132 200H20C8 200 0 192 0 180S8 160 20 160H132L106 134L106 134zM380 380H60C50 380 40 370 40 360V240H60C60 274 86 300 120 300C136 300 152 294 162 282L164 280H180V264L200 244V280H360V220H224C230 214 234 208 236 200H360V140H224L222 138L204 120H360V60H200V116L180 96V60H80V76C68 86 60 102 60 120H40V40C40 30 50 20 60 20H380C392 20 400 30 400 40V360C400 370 390 380 380 380L380 380z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+ThDerived.defaultProps = {
+    size: IconSize.STANDARD,
+};
 ThDerived.displayName = `Blueprint5.Icon.ThDerived`;
 export default ThDerived;

package/src/generated/components/th-disconnect.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 ThDisconnect: 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
-                    ? "M285.0073 380L380 380C390 380 400 370 400 360L400 40C400 30 390 20 380 20L235.57594 20L241.131496 60L360 60L360 120L249.464828 120L252.242606 140L360 140L360 200L260.57594 200L263.353718 220L360 220L360 280L271.68705 280L284.429536 371.7458978C284.81482 374.519933 285.003874 377.2759744 285.0073 380zM164.4240606 380L150.5351716 280L40 280L40 220L142.2018382 220L139.4240606 200L40 200L40 140L131.0907272 140L128.3129494 120L40 120L40 60L119.979616 60L115.5704636 28.254102C115.185181 25.480066 114.9961266 22.724026 114.992699 20L20 20C8 20 0 30 0 40L0 360C0 370 8 380 20 380L164.4240606 380zM205.190154 382.75136742C206.709692 393.69204298 216.810692 401.329383734 227.751368 399.8098454636001C238.692042 398.290307194 246.329384 388.18930812 244.809846 377.2486326L194.8098454 17.248632C193.2903072 6.307958 183.1893082 -1.329384 172.2486326 0.190154C161.307957 1.709692 153.6706162 11.810692 155.1901546 22.751368L205.190154 382.75136742z"
-                    : "M240.007594 300L300 300C312 300 320 290 320 280L320 40C320 28 312 20 300 20L200.609152 20L206.323438 60L280 60L280 100L212.037724 100L214.894866 120L280 120L280 160L220.609152 160L223.466296 180L280 180L280 220L229.180582 220L239.39697 291.5147186C239.804364 294.3664762 240.00408 297.2000044 240.007594 300zM119.3908474 300L107.9622758 220L40 220L40 180L102.2479902 180L99.3908474 160L40 160L40 120L93.6765616 120L90.8194188 100L40 100L40 60L85.105133 60L80.6030304 28.485282C80.1956364 25.633524 79.9959206 22.799996 79.9924056 20L20 20C8 20 0 28 0 40L0 280C0 290 8 300 20 300L119.3908474 300zM160.2010102 302.82842712C161.7631072 313.7631073 171.893747 321.36108704 182.8284272 319.798989874C193.7631072 318.236892706 201.361088 308.10625304 199.7989898 297.1715728L159.7989898 17.171572C158.2368928 6.236892 148.106253 -1.361088 137.1715728 0.20101C126.2368928 1.763108 118.638913 11.893746 120.2010102 22.828428L160.2010102 302.82842712z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="th-disconnect"
-                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}-th-disconnect`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="th-disconnect" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const ThDisconnect: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="th-disconnect" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M240.007594 300L300 300C312 300 320 290 320 280L320 40C320 28 312 20 300 20L200.609152 20L206.323438 60L280 60L280 100L212.037724 100L214.894866 120L280 120L280 160L220.609152 160L223.466296 180L280 180L280 220L229.180582 220L239.39697 291.5147186C239.804364 294.3664762 240.00408 297.2000044 240.007594 300zM119.3908474 300L107.9622758 220L40 220L40 180L102.2479902 180L99.3908474 160L40 160L40 120L93.6765616 120L90.8194188 100L40 100L40 60L85.105133 60L80.6030304 28.485282C80.1956364 25.633524 79.9959206 22.799996 79.9924056 20L20 20C8 20 0 28 0 40L0 280C0 290 8 300 20 300L119.3908474 300zM160.2010102 302.82842712C161.7631072 313.7631073 171.893747 321.36108704 182.8284272 319.798989874C193.7631072 318.236892706 201.361088 308.10625304 199.7989898 297.1715728L159.7989898 17.171572C158.2368928 6.236892 148.106253 -1.361088 137.1715728 0.20101C126.2368928 1.763108 118.638913 11.893746 120.2010102 22.828428L160.2010102 302.82842712z"
+                        : "M285.0073 380L380 380C390 380 400 370 400 360L400 40C400 30 390 20 380 20L235.57594 20L241.131496 60L360 60L360 120L249.464828 120L252.242606 140L360 140L360 200L260.57594 200L263.353718 220L360 220L360 280L271.68705 280L284.429536 371.7458978C284.81482 374.519933 285.003874 377.2759744 285.0073 380zM164.4240606 380L150.5351716 280L40 280L40 220L142.2018382 220L139.4240606 200L40 200L40 140L131.0907272 140L128.3129494 120L40 120L40 60L119.979616 60L115.5704636 28.254102C115.185181 25.480066 114.9961266 22.724026 114.992699 20L20 20C8 20 0 30 0 40L0 360C0 370 8 380 20 380L164.4240606 380zM205.190154 382.75136742C206.709692 393.69204298 216.810692 401.329383734 227.751368 399.8098454636001C238.692042 398.290307194 246.329384 388.18930812 244.809846 377.2486326L194.8098454 17.248632C193.2903072 6.307958 183.1893082 -1.329384 172.2486326 0.190154C161.307957 1.709692 153.6706162 11.810692 155.1901546 22.751368L205.190154 382.75136742z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+ThDisconnect.defaultProps = {
+    size: IconSize.STANDARD,
+};
 ThDisconnect.displayName = `Blueprint5.Icon.ThDisconnect`;
 export default ThDisconnect;