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

package/src/generated/components/series-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 SeriesDerived: 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
-                    ? "M376.4 268.4C375.8 267.4 375 266.6 374.2000000000001 265.8C374.2000000000001 265.8 374.2000000000001 266 374 266L334 226C330 222 326 220 320 220C308 220 300 228 300 240C300 246 302 250 306 254L332 280H220C208 280 200 288 200 300S208 320 220 320H332L306 346C302 350 300 354 300 360C300 372 308 380 320 380C326 380 330 378 334 374L394 314C398 310 400 306 400 300S398 290 394 286L376.4 268.4zM265.8 214.2C271.8 201.8000000000001 281.8 191.8 294.2 185.8L234.2 125.8C230.6 122.2 225.6 120 220 120S209.4 122.2 205.8 126L140 191.8L40 91.8V60H380C391 60 400 51 400 40S391 20 380 20H20C11.8 20 4.6 25 1.6 32.2C0.6 34.6 0 37.2 0 40V320C0 331 9 340 20 340S40 331 40 320V148.2L125.8 234.2C129.4 237.8 134.4 240 140 240S150.6 237.8 154.2 234.2L220 168.2L265.8 214.2z"
-                    : "M213.2 161.6C222 150.8 234.6 143.4 249.2 141L194.2 86C190.6 82.2 185.6 80 180 80S169.4 82.2 165.8 86L100 151.8L40 91.8V60H300C311 60 320 51 320 40S311 20 300 20H20C9 20 0 29 0 40V240C0 251 9 260 20 260S40 251 40 240V148.2L85.8 194.2C89.4 197.8 94.4 200 100 200S110.6 197.8 114.2 194.2L180 128.2L213.2 161.6zM246 214L252 220H160C148 220 140 228 140 240S148 260 160 260H252L246 266C242 270 240 274 240 280C240 292 250 300 260 300C266 300 270 298 274 294L314 254C318 250 320 246 320 240S318 230 314 226L274 186C270 182 266 180 260 180C248 180 240 188 240 200C240 206 242 210 246 214z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="series-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}-series-derived`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="series-derived" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const SeriesDerived: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="series-derived" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M213.2 161.6C222 150.8 234.6 143.4 249.2 141L194.2 86C190.6 82.2 185.6 80 180 80S169.4 82.2 165.8 86L100 151.8L40 91.8V60H300C311 60 320 51 320 40S311 20 300 20H20C9 20 0 29 0 40V240C0 251 9 260 20 260S40 251 40 240V148.2L85.8 194.2C89.4 197.8 94.4 200 100 200S110.6 197.8 114.2 194.2L180 128.2L213.2 161.6zM246 214L252 220H160C148 220 140 228 140 240S148 260 160 260H252L246 266C242 270 240 274 240 280C240 292 250 300 260 300C266 300 270 298 274 294L314 254C318 250 320 246 320 240S318 230 314 226L274 186C270 182 266 180 260 180C248 180 240 188 240 200C240 206 242 210 246 214z"
+                        : "M376.4 268.4C375.8 267.4 375 266.6 374.2000000000001 265.8C374.2000000000001 265.8 374.2000000000001 266 374 266L334 226C330 222 326 220 320 220C308 220 300 228 300 240C300 246 302 250 306 254L332 280H220C208 280 200 288 200 300S208 320 220 320H332L306 346C302 350 300 354 300 360C300 372 308 380 320 380C326 380 330 378 334 374L394 314C398 310 400 306 400 300S398 290 394 286L376.4 268.4zM265.8 214.2C271.8 201.8000000000001 281.8 191.8 294.2 185.8L234.2 125.8C230.6 122.2 225.6 120 220 120S209.4 122.2 205.8 126L140 191.8L40 91.8V60H380C391 60 400 51 400 40S391 20 380 20H20C11.8 20 4.6 25 1.6 32.2C0.6 34.6 0 37.2 0 40V320C0 331 9 340 20 340S40 331 40 320V148.2L125.8 234.2C129.4 237.8 134.4 240 140 240S150.6 237.8 154.2 234.2L220 168.2L265.8 214.2z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+SeriesDerived.defaultProps = {
+    size: IconSize.STANDARD,
+};
 SeriesDerived.displayName = `Blueprint5.Icon.SeriesDerived`;
 export default SeriesDerived;

package/src/generated/components/series-filtered.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 SeriesFiltered: 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
-                    ? "M242.8 191C247.0000000000001 177.6 255.8 166.4 267.2000000000001 158.8L234.2 125.8C230.6 122.2 225.6 120 220 120S209.4 122.2 205.8 126L140 191.8L40 91.8V60H380C391 60 400 51 400 40S391 20 380 20H20C11.8 20 4.6 25 1.6 32.2C0.6 34.6 0 37.2 0 40V320C0 331 9 340 20 340S40 331 40 320V148.2L125.8 234.2C129.4 237.8 134.4 240 140 240S150.6 237.8 154.2 234.2L220 168.2L242.8 191zM387 380C394.2000000000001 380 400 374.2 400 367.2C400 363.6 398.6 360.4 396.2 358L335.6 297.4V238.4C335.6 234.8 334.2 231.6 331.8 229.2L306.2 203.4C304 201.4 300.8 200 297.2 200C290.2 200 284.4 205.8 284.4 212.8V297.4L223.8 358C221.4 360.4 220 363.6 220 367.2C220 374.2 225.8 380 232.8 380H387z"
-                    : "M185.8 134C191.8 121.6 201.8 111.6 214.2 105.8L194.2 85.8C190.6 82.2 185.6 80 180 80S169.4 82.2 165.8 86L100 151.8L40 91.8V60H300C311 60 320 51 320 40S311 20 300 20H20C9 20 0 29 0 40V240C0 251 9 260 20 260S40 251 40 240V148.2L85.8 194.2C89.4 197.8 94.4 200 100 200S110.6 197.8 114.2 194.2L180 128.2L185.8 134zM309.6 300C315.8 300 320 294.8 320 288.6C320 285.4 318.8 282.6 316.6 280.4L259.4000000000001 225.8V173.2C259.4000000000001 170 258.2 167.2 256 165L239.6 143C237.6 141 234.6 139.6 231.4 139.6C225.2 139.6 220 144.8 220 151V225.8L163.4 280.4C161.2 282.6 160 285.4 160 288.6C160 294.8 165.2 300 171.4 300H309.6z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="series-filtered"
-                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}-series-filtered`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="series-filtered" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const SeriesFiltered: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="series-filtered" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M185.8 134C191.8 121.6 201.8 111.6 214.2 105.8L194.2 85.8C190.6 82.2 185.6 80 180 80S169.4 82.2 165.8 86L100 151.8L40 91.8V60H300C311 60 320 51 320 40S311 20 300 20H20C9 20 0 29 0 40V240C0 251 9 260 20 260S40 251 40 240V148.2L85.8 194.2C89.4 197.8 94.4 200 100 200S110.6 197.8 114.2 194.2L180 128.2L185.8 134zM309.6 300C315.8 300 320 294.8 320 288.6C320 285.4 318.8 282.6 316.6 280.4L259.4000000000001 225.8V173.2C259.4000000000001 170 258.2 167.2 256 165L239.6 143C237.6 141 234.6 139.6 231.4 139.6C225.2 139.6 220 144.8 220 151V225.8L163.4 280.4C161.2 282.6 160 285.4 160 288.6C160 294.8 165.2 300 171.4 300H309.6z"
+                        : "M242.8 191C247.0000000000001 177.6 255.8 166.4 267.2000000000001 158.8L234.2 125.8C230.6 122.2 225.6 120 220 120S209.4 122.2 205.8 126L140 191.8L40 91.8V60H380C391 60 400 51 400 40S391 20 380 20H20C11.8 20 4.6 25 1.6 32.2C0.6 34.6 0 37.2 0 40V320C0 331 9 340 20 340S40 331 40 320V148.2L125.8 234.2C129.4 237.8 134.4 240 140 240S150.6 237.8 154.2 234.2L220 168.2L242.8 191zM387 380C394.2000000000001 380 400 374.2 400 367.2C400 363.6 398.6 360.4 396.2 358L335.6 297.4V238.4C335.6 234.8 334.2 231.6 331.8 229.2L306.2 203.4C304 201.4 300.8 200 297.2 200C290.2 200 284.4 205.8 284.4 212.8V297.4L223.8 358C221.4 360.4 220 363.6 220 367.2C220 374.2 225.8 380 232.8 380H387z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+SeriesFiltered.defaultProps = {
+    size: IconSize.STANDARD,
+};
 SeriesFiltered.displayName = `Blueprint5.Icon.SeriesFiltered`;
 export default SeriesFiltered;

package/src/generated/components/series-search.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 SeriesSearch: 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
-                    ? "M225.6 173.8L220 168.2L154.2 234.2C150.6 237.8 145.6 240 140 240S129.4 237.8 125.8 234.2L40 148.2V320C40 331 31 340 20 340S0 331 0 320V40C0 37.2 0.6 34.6 1.6 32.2C4.6 25 11.8 20 20 20H380C391 20 400 29 400 40C400 51 391 60 380 60H40V91.8L140 191.8L205.8 126C209.4 122.2 214.4 120 220 120S230.6 122.2 234.2 125.8L276 167.6C272.6 167.2 269.2000000000001 167.2 265.8 167.2C251.8 167.2 238.2 169.6 225.6 173.8zM207 293.8C207 326.2000000000001 233.2 352.4000000000001 265.6 352.4000000000001S324.2000000000001 326.2000000000001 324.2000000000001 293.8S298 235.2 265.6 235.2S207 261.4 207 293.8zM336.4 245.2C338.6 248.6 340.6 251.8 342.2 255.4C342.4000000000001 256 342.8 256.6 343 257.2C344.5999999999999 260.8 346.2 264.2 347.2 268C348.4 272 349.2000000000001 275.6 350 279.6C350.2000000000001 280.6 350.2000000000001 281.4 350.4 282.4C351 286.4 351.4 290.2 351.4 294.4C351.4 341.8 312.8 380.4 265.4 380.4C218 380.2 179.4 341.8 179.4 294.2S218 208.2 265.4 208.2C269.6 208.2 273.4 208.6 277.4 209.2C278.2 209.2 279.2 209.4 280.2 209.6C284.2 210.2 287.8 211.2 291.6 212.4C295.6 213.6 299 215.2000000000001 302.6 216.6C303.2 216.8000000000001 303.8 217.2 304.4000000000001 217.4C308 219.2 311.2 221.2 314.6 223.2L372 165.8C374.8000000000001 163 378.6 161.4 383.2 161.4C391.8 161.4 398.8 168.4 398.8 177C398.6 181.2 396.8 185.2 394.2000000000001 188.2L336.4 245.2z"
-                    : "M192 141.2C198.2 140 204.4 139.4 211 139.4C215 139.4 219 139.6 223 140.2C224.8 140.4 226.2 140.6 228.4 141C230.4 141.2 232.8 141.8 236.2 142.6L240.8 144C241.6 144.2 242.4 144.4 243 144.8L247.4 140.4L193.4 85.9999999999999C189.8 82.2 184.8 80 179.2 80S168.6 82.2 165 86L99.6 151.8L39.8 91.8V60H298.6C309.6 60 318.6 51 318.6 40C318.6 29 309.6 20 298.6 20H20C9 20 0 29 0 40V240.2C0 251.2 9 260.2 20 260.2S40 251.2 40 240.2V148.4L85.6 194.4C89 198 94 200.2 99.6 200.2S110.2 198 113.6 194.4L179.2 128.4L192 141.2zM316.4 149.4C318.4 147 319.8 144 320 140.6C320 133.8 314.6 128.4 307.8 128.4C304.2000000000001 128.4 301.2 129.8 299.2000000000001 132L254.4 177C251.8 175.4 249.2 173.8 246.4 172.4C246 172.2 245.4 172 245 171.8C242.2 170.6 239.6 169.4 236.6 168.4H236.4C233.6 167.4 230.6 166.8 227.6 166.2C226.8000000000001 166 226 165.8 225.4000000000001 165.8C222.4 165.4 219.4 165 216.2 165C179.2 165 149.2 195.2 149.2 232.4S179.2 299.8 216.2 300C253.2 300 283.2 269.8 283.2 232.6C283.2 229.4 282.8 226.4 282.4000000000001 223.2C282.2000000000001 222.4 282.2000000000001 221.8 282 221C281.6 218 281 215.2 280 212.2V212C279 209 277.8 206.4 276.6 203.6C276.4 203.2 276.2 202.6 276 202.2C274.6 199.4 273.2 196.8 271.4 194.2L316.4 149.4zM216.2 188.2C240.6 188.2 260.4 208 260.4 232.6C260.4 257.2000000000001 240.6 277 216.2 277C191.8 277 172 257.2000000000001 172 232.6C172 208.2 191.8 188.2 216.2 188.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="series-search"
-                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}-series-search`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="series-search" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const SeriesSearch: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="series-search" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M192 141.2C198.2 140 204.4 139.4 211 139.4C215 139.4 219 139.6 223 140.2C224.8 140.4 226.2 140.6 228.4 141C230.4 141.2 232.8 141.8 236.2 142.6L240.8 144C241.6 144.2 242.4 144.4 243 144.8L247.4 140.4L193.4 85.9999999999999C189.8 82.2 184.8 80 179.2 80S168.6 82.2 165 86L99.6 151.8L39.8 91.8V60H298.6C309.6 60 318.6 51 318.6 40C318.6 29 309.6 20 298.6 20H20C9 20 0 29 0 40V240.2C0 251.2 9 260.2 20 260.2S40 251.2 40 240.2V148.4L85.6 194.4C89 198 94 200.2 99.6 200.2S110.2 198 113.6 194.4L179.2 128.4L192 141.2zM316.4 149.4C318.4 147 319.8 144 320 140.6C320 133.8 314.6 128.4 307.8 128.4C304.2000000000001 128.4 301.2 129.8 299.2000000000001 132L254.4 177C251.8 175.4 249.2 173.8 246.4 172.4C246 172.2 245.4 172 245 171.8C242.2 170.6 239.6 169.4 236.6 168.4H236.4C233.6 167.4 230.6 166.8 227.6 166.2C226.8000000000001 166 226 165.8 225.4000000000001 165.8C222.4 165.4 219.4 165 216.2 165C179.2 165 149.2 195.2 149.2 232.4S179.2 299.8 216.2 300C253.2 300 283.2 269.8 283.2 232.6C283.2 229.4 282.8 226.4 282.4000000000001 223.2C282.2000000000001 222.4 282.2000000000001 221.8 282 221C281.6 218 281 215.2 280 212.2V212C279 209 277.8 206.4 276.6 203.6C276.4 203.2 276.2 202.6 276 202.2C274.6 199.4 273.2 196.8 271.4 194.2L316.4 149.4zM216.2 188.2C240.6 188.2 260.4 208 260.4 232.6C260.4 257.2000000000001 240.6 277 216.2 277C191.8 277 172 257.2000000000001 172 232.6C172 208.2 191.8 188.2 216.2 188.2z"
+                        : "M225.6 173.8L220 168.2L154.2 234.2C150.6 237.8 145.6 240 140 240S129.4 237.8 125.8 234.2L40 148.2V320C40 331 31 340 20 340S0 331 0 320V40C0 37.2 0.6 34.6 1.6 32.2C4.6 25 11.8 20 20 20H380C391 20 400 29 400 40C400 51 391 60 380 60H40V91.8L140 191.8L205.8 126C209.4 122.2 214.4 120 220 120S230.6 122.2 234.2 125.8L276 167.6C272.6 167.2 269.2000000000001 167.2 265.8 167.2C251.8 167.2 238.2 169.6 225.6 173.8zM207 293.8C207 326.2000000000001 233.2 352.4000000000001 265.6 352.4000000000001S324.2000000000001 326.2000000000001 324.2000000000001 293.8S298 235.2 265.6 235.2S207 261.4 207 293.8zM336.4 245.2C338.6 248.6 340.6 251.8 342.2 255.4C342.4000000000001 256 342.8 256.6 343 257.2C344.5999999999999 260.8 346.2 264.2 347.2 268C348.4 272 349.2000000000001 275.6 350 279.6C350.2000000000001 280.6 350.2000000000001 281.4 350.4 282.4C351 286.4 351.4 290.2 351.4 294.4C351.4 341.8 312.8 380.4 265.4 380.4C218 380.2 179.4 341.8 179.4 294.2S218 208.2 265.4 208.2C269.6 208.2 273.4 208.6 277.4 209.2C278.2 209.2 279.2 209.4 280.2 209.6C284.2 210.2 287.8 211.2 291.6 212.4C295.6 213.6 299 215.2000000000001 302.6 216.6C303.2 216.8000000000001 303.8 217.2 304.4000000000001 217.4C308 219.2 311.2 221.2 314.6 223.2L372 165.8C374.8000000000001 163 378.6 161.4 383.2 161.4C391.8 161.4 398.8 168.4 398.8 177C398.6 181.2 396.8 185.2 394.2000000000001 188.2L336.4 245.2z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+SeriesSearch.defaultProps = {
+    size: IconSize.STANDARD,
+};
 SeriesSearch.displayName = `Blueprint5.Icon.SeriesSearch`;
 export default SeriesSearch;

package/src/generated/components/settings.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 Settings: 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
-                    ? "M80 380C80 391 71 400 60 400S40 391 40 380V280H80V380zM40 20C40 9 49 0 60 0S80 9 80 20V140H40V20zM220 380C220 391 211 400 200 400S180 391 180 380V220H220V380zM360 380C360 391 351 400 340 400S320 391 320 380V320H360V380zM180 20C180 9 189 0 200 0S220 9 220 20V80H180V20zM360 300H320C309 300 300 291 300 280V220C300 209 309 200 320 200H360C371 200 380 209 380 220V280C380 291 371 300 360 300zM320 20C320 9 329 0 340 0S360 9 360 20V180H320V20zM80 260H40C29 260 20 251 20 240V180C20 169 29 160 40 160H80C91 160 100 169 100 180V240C100 251 91 260 80 260zM220 200H180C169 200 160 191 160 180V120C160 109 169 100 180 100H220C231 100 240 109 240 120V180C240 191 231 200 220 200z"
-                    : "M60 300C60 311 51 320 40 320S20 311 20 300V240H60V300zM60 220H20C9 220 0 211 0 200V160C0 149 9 140 20 140H60C71 140 80 149 80 160V200C80 211 71 220 60 220zM300 300C300 311 291 320 280 320S260 311 260 300V260H300V300zM180 300C180 311 171 320 160 320S140 311 140 300V180H180V300zM20 20C20 9 29 0 40 0S60 9 60 20V120H20V20zM300 240H260C249 240 240 231 240 220V180C240 169 249 160 260 160H300C311 160 320 169 320 180V220C320 231 311 240 300 240zM260 20C260 9 269 0 280 0S300 9 300 20V140H260V20zM180 160H140C129 160 120 151 120 140V100C120 89 129 80 140 80H180C191 80 200 89 200 100V140C200 151 191 160 180 160zM140 20C140 9 149 0 160 0S180 9 180 20V60H140V20z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="settings"
-                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}-settings`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="settings" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Settings: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="settings" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M60 300C60 311 51 320 40 320S20 311 20 300V240H60V300zM60 220H20C9 220 0 211 0 200V160C0 149 9 140 20 140H60C71 140 80 149 80 160V200C80 211 71 220 60 220zM300 300C300 311 291 320 280 320S260 311 260 300V260H300V300zM180 300C180 311 171 320 160 320S140 311 140 300V180H180V300zM20 20C20 9 29 0 40 0S60 9 60 20V120H20V20zM300 240H260C249 240 240 231 240 220V180C240 169 249 160 260 160H300C311 160 320 169 320 180V220C320 231 311 240 300 240zM260 20C260 9 269 0 280 0S300 9 300 20V140H260V20zM180 160H140C129 160 120 151 120 140V100C120 89 129 80 140 80H180C191 80 200 89 200 100V140C200 151 191 160 180 160zM140 20C140 9 149 0 160 0S180 9 180 20V60H140V20z"
+                        : "M80 380C80 391 71 400 60 400S40 391 40 380V280H80V380zM40 20C40 9 49 0 60 0S80 9 80 20V140H40V20zM220 380C220 391 211 400 200 400S180 391 180 380V220H220V380zM360 380C360 391 351 400 340 400S320 391 320 380V320H360V380zM180 20C180 9 189 0 200 0S220 9 220 20V80H180V20zM360 300H320C309 300 300 291 300 280V220C300 209 309 200 320 200H360C371 200 380 209 380 220V280C380 291 371 300 360 300zM320 20C320 9 329 0 340 0S360 9 360 20V180H320V20zM80 260H40C29 260 20 251 20 240V180C20 169 29 160 40 160H80C91 160 100 169 100 180V240C100 251 91 260 80 260zM220 200H180C169 200 160 191 160 180V120C160 109 169 100 180 100H220C231 100 240 109 240 120V180C240 191 231 200 220 200z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Settings.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Settings.displayName = `Blueprint5.Icon.Settings`;
 export default Settings;

package/src/generated/components/shapes.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 Shapes: 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
-                    ? "M157.5864028 177.61821C166.5515942 182.546628 177.9903592 179.580442 183.1355996 170.993044L183.1355996 170.993044L257.516596 46.851302C259.1437880000001 44.13552 260 41.05887 260 37.92761C260 28.026464 251.620418 20 241.28368 20L241.28368 20L98.7201054 20C95.6838246 20 92.693128 20.707562 90.0060144 22.061646C80.8579836 26.671498 77.343471 37.511958 82.1561306 46.274488L82.1561306 46.274488L150.3387098 170.41623C151.9922902 173.426946 154.506055 175.924856 157.5864028 177.61821zM300 300C344.18278 300 380 264.18278 380 220C380 175.81722 344.18278 140 300 140C255.81722 140 220 175.81722 220 220C220 264.18278 255.81722 300 300 300zM160 380C171.045695 380 180 371.045695 180 360L180 240C180 228.954305 171.045695 220 160 220L40 220C28.954305 220 20 228.954305 20 240L20 360C20 371.045695 28.954305 380 40 380L160 380z"
-                    : "M118.4121872 157.2293096C127.2091482 162.8527168 138.526284 159.6447622 143.6897176 150.0641428L143.6897176 150.0641428L197.4589014 50.296792C199.1227852 47.209498 200 43.694534 200 40.114714C200 29.005664 191.7309654 20 181.5305946 20L181.5305946 20L78.4729922 20C75.4185326 20 72.4117548 20.825028 69.7219222 22.4012C60.7392232 27.664826 57.3752944 39.86245 62.208377 49.645354L62.208377 49.645354L111.4967954 149.4127042C113.1006618 152.6591768 115.4929012 155.3631728 118.4121872 157.2293096zM240 240C273.137084 240 300 213.137085 300 180C300 146.862915 273.137084 120 240 120C206.862916 120 180 146.862915 180 180C180 213.137085 206.862916 240 240 240zM120 300C131.045695 300 140 291.045695 140 280L140 200C140 188.954305 131.045695 180 120 180L40 180C28.954305 180 20 188.954305 20 200L20 280C20 291.045695 28.954305 300 40 300L120 300z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="shapes"
-                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}-shapes`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="shapes" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Shapes: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="shapes" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M118.4121872 157.2293096C127.2091482 162.8527168 138.526284 159.6447622 143.6897176 150.0641428L143.6897176 150.0641428L197.4589014 50.296792C199.1227852 47.209498 200 43.694534 200 40.114714C200 29.005664 191.7309654 20 181.5305946 20L181.5305946 20L78.4729922 20C75.4185326 20 72.4117548 20.825028 69.7219222 22.4012C60.7392232 27.664826 57.3752944 39.86245 62.208377 49.645354L62.208377 49.645354L111.4967954 149.4127042C113.1006618 152.6591768 115.4929012 155.3631728 118.4121872 157.2293096zM240 240C273.137084 240 300 213.137085 300 180C300 146.862915 273.137084 120 240 120C206.862916 120 180 146.862915 180 180C180 213.137085 206.862916 240 240 240zM120 300C131.045695 300 140 291.045695 140 280L140 200C140 188.954305 131.045695 180 120 180L40 180C28.954305 180 20 188.954305 20 200L20 280C20 291.045695 28.954305 300 40 300L120 300z"
+                        : "M157.5864028 177.61821C166.5515942 182.546628 177.9903592 179.580442 183.1355996 170.993044L183.1355996 170.993044L257.516596 46.851302C259.1437880000001 44.13552 260 41.05887 260 37.92761C260 28.026464 251.620418 20 241.28368 20L241.28368 20L98.7201054 20C95.6838246 20 92.693128 20.707562 90.0060144 22.061646C80.8579836 26.671498 77.343471 37.511958 82.1561306 46.274488L82.1561306 46.274488L150.3387098 170.41623C151.9922902 173.426946 154.506055 175.924856 157.5864028 177.61821zM300 300C344.18278 300 380 264.18278 380 220C380 175.81722 344.18278 140 300 140C255.81722 140 220 175.81722 220 220C220 264.18278 255.81722 300 300 300zM160 380C171.045695 380 180 371.045695 180 360L180 240C180 228.954305 171.045695 220 160 220L40 220C28.954305 220 20 228.954305 20 240L20 360C20 371.045695 28.954305 380 40 380L160 380z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Shapes.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Shapes.displayName = `Blueprint5.Icon.Shapes`;
 export default Shapes;

package/src/generated/components/share.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 Share: 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
-                    ? "M300 40H40V300H215.2L255.2 340H20C9 340 0 331 0 320V20C0 9 9 0 20 0H320C331 0 340 9 340 20V255.2L300 215.2V40zM380 400H240C229 400 220 391 220 380C220 369 229 360 240 360H331.8L185.8 214.2C182.2 210.6 180 205.6 180 200C180 189 189 180 200 180C205.6 180 210.6 182.2 214.2 185.8L360 331.8V240C360 229 369 220 380 220S400 229 400 240V380C400 391 391 400 380 400z"
-                    : "M219.8 40.2H39.8V220.2H135L175 260.2H19.8C8.8 260.2 -0.2 251.2 -0.2 240.2V20.2C-0.2 9.2 8.8 0.2 19.8 0.2H239.8C250.8 0.2 259.8 9.2 259.8 20.2V175.2L219.8 135.2V40.2zM299.8 320.2H199.8C188.8 320.2 179.8 311.2 179.8 300.2S188.8 280.2 199.8 280.2H251.6L145.8 174.4C142 170.6 139.8 165.6 139.8 160.2C139.8 149.2 148.8 140.2 159.8 140.2C165.4 140.2 170.4 142.4 174 146L279.8 251.8V200C279.8 189 288.8 180 299.8 180S319.8 189 319.8 200V300C319.8 311.2 310.8 320.2 299.8 320.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="share"
-                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}-share`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="share" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Share: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="share" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M219.8 40.2H39.8V220.2H135L175 260.2H19.8C8.8 260.2 -0.2 251.2 -0.2 240.2V20.2C-0.2 9.2 8.8 0.2 19.8 0.2H239.8C250.8 0.2 259.8 9.2 259.8 20.2V175.2L219.8 135.2V40.2zM299.8 320.2H199.8C188.8 320.2 179.8 311.2 179.8 300.2S188.8 280.2 199.8 280.2H251.6L145.8 174.4C142 170.6 139.8 165.6 139.8 160.2C139.8 149.2 148.8 140.2 159.8 140.2C165.4 140.2 170.4 142.4 174 146L279.8 251.8V200C279.8 189 288.8 180 299.8 180S319.8 189 319.8 200V300C319.8 311.2 310.8 320.2 299.8 320.2z"
+                        : "M300 40H40V300H215.2L255.2 340H20C9 340 0 331 0 320V20C0 9 9 0 20 0H320C331 0 340 9 340 20V255.2L300 215.2V40zM380 400H240C229 400 220 391 220 380C220 369 229 360 240 360H331.8L185.8 214.2C182.2 210.6 180 205.6 180 200C180 189 189 180 200 180C205.6 180 210.6 182.2 214.2 185.8L360 331.8V240C360 229 369 220 380 220S400 229 400 240V380C400 391 391 400 380 400z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Share.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Share.displayName = `Blueprint5.Icon.Share`;
 export default Share;