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

package/src/generated/components/tick-circle.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 TickCircle: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M200 0C89.6 0 0 89.6 0 200S89.6 400 200 400S400 310.4 400 200S310.4 0 200 0zM300 280C294.4000000000001 280 289.4000000000001 277.8 285.8 274.2L160 148.2L114.2 194.2C110.6 197.8 105.6 200 100 200C89 200 80 191 80 180C80 174.4 82.2 169.4 85.8 165.8L145.8 105.8C149.4 102.2 154.4 100 160 100C165.6 100 170.6 102.2 174.2 105.8L314.2000000000001 245.8C317.8 249.4 320 254.4 320 260C320 271 311 280 300 280z"
-                    : "M160 0C71.6 0 0 71.6 0 160S71.6 320 160 320S320 248.4 320 160S248.4 0 160 0zM240 220C234.4 220 229.4 217.8 225.8 214.2L140 128.2L94.2 174.2C90.6 177.8 85.6 180 80 180C69 180 60 171 60 160C60 154.4 62.2 149.4 65.8 145.8L125.8 85.8C129.4 82.2 134.4 80 140 80S150.6 82.2 154.2 85.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="tick-circle"
-                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}-tick-circle`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="tick-circle" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const TickCircle: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="tick-circle" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M160 0C71.6 0 0 71.6 0 160S71.6 320 160 320S320 248.4 320 160S248.4 0 160 0zM240 220C234.4 220 229.4 217.8 225.8 214.2L140 128.2L94.2 174.2C90.6 177.8 85.6 180 80 180C69 180 60 171 60 160C60 154.4 62.2 149.4 65.8 145.8L125.8 85.8C129.4 82.2 134.4 80 140 80S150.6 82.2 154.2 85.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
+                        : "M200 0C89.6 0 0 89.6 0 200S89.6 400 200 400S400 310.4 400 200S310.4 0 200 0zM300 280C294.4000000000001 280 289.4000000000001 277.8 285.8 274.2L160 148.2L114.2 194.2C110.6 197.8 105.6 200 100 200C89 200 80 191 80 180C80 174.4 82.2 169.4 85.8 165.8L145.8 105.8C149.4 102.2 154.4 100 160 100C165.6 100 170.6 102.2 174.2 105.8L314.2000000000001 245.8C317.8 249.4 320 254.4 320 260C320 271 311 280 300 280z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+TickCircle.defaultProps = {
+    size: IconSize.STANDARD,
+};
 TickCircle.displayName = `Blueprint5.Icon.TickCircle`;
 export default TickCircle;

package/src/generated/components/tick.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 Tick: 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
-                    ? "M340 320C334.4 320 329.4 317.8 325.8 314.2L140 128.2L74.2 194C70.6 197.8 65.6 200 60 200C49 200 40 191 40 180C40 174.4 42.2 169.4 45.8 165.8L125.8 85.8C129.4 82.2 134.4 80 140 80S150.6 82.2 154.2 85.8L354.2000000000001 285.8C357.8 289.4 360 294.4 360 300C360 311 351 320 340 320z"
-                    : "M280 260C274.4000000000001 260 269.4000000000001 257.8 265.8 254.2L120 108.2L54.2 174.2C50.6 177.8 45.6 180 40 180C29 180 20 171 20 160C20 154.4 22.2 149.4 25.8 145.8L105.8 65.8C109.4 62.2 114.4 60 120 60S130.6 62.2 134.2 65.8L294.2000000000001 225.8C297.8 229.4 300 234.4 300 240C300 251 291 260 280 260z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="tick"
-                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}-tick`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="tick" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Tick: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="tick" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M280 260C274.4000000000001 260 269.4000000000001 257.8 265.8 254.2L120 108.2L54.2 174.2C50.6 177.8 45.6 180 40 180C29 180 20 171 20 160C20 154.4 22.2 149.4 25.8 145.8L105.8 65.8C109.4 62.2 114.4 60 120 60S130.6 62.2 134.2 65.8L294.2000000000001 225.8C297.8 229.4 300 234.4 300 240C300 251 291 260 280 260z"
+                        : "M340 320C334.4 320 329.4 317.8 325.8 314.2L140 128.2L74.2 194C70.6 197.8 65.6 200 60 200C49 200 40 191 40 180C40 174.4 42.2 169.4 45.8 165.8L125.8 85.8C129.4 82.2 134.4 80 140 80S150.6 82.2 154.2 85.8L354.2000000000001 285.8C357.8 289.4 360 294.4 360 300C360 311 351 320 340 320z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Tick.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Tick.displayName = `Blueprint5.Icon.Tick`;
 export default Tick;

package/src/generated/components/time.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 Time: 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 208.2V320C220 331 211 340 200 340S180 331 180 320V200C180 194.4 182.2 189.4 185.8 185.8L245.8 125.8C249.4 122.2 254.4 120 260 120C271 120 280 129 280 140C280 145.6 277.8 150.6 274.2000000000001 154.2L220 208.2zM200 400C89.6 400 0 310.4 0 200C0 89.6 89.6 0 200 0S400 89.6 400 200C400 310.4 310.4 400 200 400zM200 40C111.6 40 40 111.6 40 200S111.6 360 200 360S360 288.4 360 200S288.4 40 200 40z"
-                    : "M160 320C71.6 320 0 248.4 0 160S71.6 0 160 0S320 71.6 320 160S248.4 320 160 320zM160 40C93.8 40 40 93.8 40 160S93.8 280 160 280S280 226.2 280 160S226.2 40 160 40zM180 168.2V240C180 251 171 260 160 260S140 251 140 240V160C140 154.4 142.2 149.4 145.8 145.8L185.8 105.8C189.4 102.2 194.4 100 200 100C211 100 220 109 220 120C220 125.6 217.8 130.6 214.2 134.2L180 168.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="time"
-                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}-time`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="time" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Time: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="time" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M160 320C71.6 320 0 248.4 0 160S71.6 0 160 0S320 71.6 320 160S248.4 320 160 320zM160 40C93.8 40 40 93.8 40 160S93.8 280 160 280S280 226.2 280 160S226.2 40 160 40zM180 168.2V240C180 251 171 260 160 260S140 251 140 240V160C140 154.4 142.2 149.4 145.8 145.8L185.8 105.8C189.4 102.2 194.4 100 200 100C211 100 220 109 220 120C220 125.6 217.8 130.6 214.2 134.2L180 168.2z"
+                        : "M220 208.2V320C220 331 211 340 200 340S180 331 180 320V200C180 194.4 182.2 189.4 185.8 185.8L245.8 125.8C249.4 122.2 254.4 120 260 120C271 120 280 129 280 140C280 145.6 277.8 150.6 274.2000000000001 154.2L220 208.2zM200 400C89.6 400 0 310.4 0 200C0 89.6 89.6 0 200 0S400 89.6 400 200C400 310.4 310.4 400 200 400zM200 40C111.6 40 40 111.6 40 200S111.6 360 200 360S360 288.4 360 200S288.4 40 200 40z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Time.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Time.displayName = `Blueprint5.Icon.Time`;
 export default Time;

package/src/generated/components/timeline-area-chart.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 TimelineAreaChart: 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 80H40V340C40 351 31 360 20 360S0 351 0 340V60C0 49 9 40 20 40H380C391 40 400 49 400 60C400 71 391 80 380 80zM380 348.2L238.6 206.8L152.6 275.6L152.4 275.4C148.8 278.2 144.8 280 140 280C135.2 280 130.8 278 127.4 275.2C127.4 275.2 127.2 275.4 127.2 275.4L60 219.4V100H380V348.2z"
-                    : "M300 268.2L198.2 166.4L132 216L131.8 215.8C128.4 218.2 124.6 220 120 220C115.2 220 111.2 218.2 107.6 215.4L107.6 215.6L60 177.6V100H300V268.2zM300 80H40V260C40 271 31 280 20 280S0 271 0 260V60C0 49 9 40 20 40H300C311 40 320 49 320 60C320 71 311 80 300 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="timeline-area-chart"
-                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}-timeline-area-chart`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="timeline-area-chart" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const TimelineAreaChart: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="timeline-area-chart" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 268.2L198.2 166.4L132 216L131.8 215.8C128.4 218.2 124.6 220 120 220C115.2 220 111.2 218.2 107.6 215.4L107.6 215.6L60 177.6V100H300V268.2zM300 80H40V260C40 271 31 280 20 280S0 271 0 260V60C0 49 9 40 20 40H300C311 40 320 49 320 60C320 71 311 80 300 80z"
+                        : "M380 80H40V340C40 351 31 360 20 360S0 351 0 340V60C0 49 9 40 20 40H380C391 40 400 49 400 60C400 71 391 80 380 80zM380 348.2L238.6 206.8L152.6 275.6L152.4 275.4C148.8 278.2 144.8 280 140 280C135.2 280 130.8 278 127.4 275.2C127.4 275.2 127.2 275.4 127.2 275.4L60 219.4V100H380V348.2z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+TimelineAreaChart.defaultProps = {
+    size: IconSize.STANDARD,
+};
 TimelineAreaChart.displayName = `Blueprint5.Icon.TimelineAreaChart`;
 export default TimelineAreaChart;

package/src/generated/components/timeline-bar-chart.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 TimelineBarChart: 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 60H20C9 60 0 51 0 40C0 29 9 20 20 20H380C391 20 400 29 400 40C400 51 391 60 380 60zM180 80H220C231 80 240 89 240 100V360C240 371 231 380 220 380H180C169 380 160 371 160 360V100C160 89 169 80 180 80zM300 80H340C351 80 360 89 360 100V280C360 291 351 300 340 300H300C289 300 280 291 280 280V100C280 89 289 80 300 80zM60 80H100C111 80 120 89 120 100V220C120 231 111 240 100 240H60C49 240 40 231 40 220V100C40 89 49 80 60 80z"
-                    : "M160 80H180C191 80 200 89 200 100V280C200 291 191 300 180 300H160C149 300 140 291 140 280V100C140 89 149 80 160 80zM260 80H280C291 80 300 89 300 100V220C300 231 291 240 280 240H260C249 240 240 231 240 220V100C240 89 249 80 260 80zM300 60H40C29 60 20 51 20 40S29 20 40 20H300C311 20 320 29 320 40S311 60 300 60zM60 80H80C91 80 100 89 100 100V180C100 191 91 200 80 200H60C49 200 40 191 40 180V100C40 89 49 80 60 80z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="timeline-bar-chart"
-                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}-timeline-bar-chart`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="timeline-bar-chart" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const TimelineBarChart: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="timeline-bar-chart" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M160 80H180C191 80 200 89 200 100V280C200 291 191 300 180 300H160C149 300 140 291 140 280V100C140 89 149 80 160 80zM260 80H280C291 80 300 89 300 100V220C300 231 291 240 280 240H260C249 240 240 231 240 220V100C240 89 249 80 260 80zM300 60H40C29 60 20 51 20 40S29 20 40 20H300C311 20 320 29 320 40S311 60 300 60zM60 80H80C91 80 100 89 100 100V180C100 191 91 200 80 200H60C49 200 40 191 40 180V100C40 89 49 80 60 80z"
+                        : "M380 60H20C9 60 0 51 0 40C0 29 9 20 20 20H380C391 20 400 29 400 40C400 51 391 60 380 60zM180 80H220C231 80 240 89 240 100V360C240 371 231 380 220 380H180C169 380 160 371 160 360V100C160 89 169 80 180 80zM300 80H340C351 80 360 89 360 100V280C360 291 351 300 340 300H300C289 300 280 291 280 280V100C280 89 289 80 300 80zM60 80H100C111 80 120 89 120 100V220C120 231 111 240 100 240H60C49 240 40 231 40 220V100C40 89 49 80 60 80z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+TimelineBarChart.defaultProps = {
+    size: IconSize.STANDARD,
+};
 TimelineBarChart.displayName = `Blueprint5.Icon.TimelineBarChart`;
 export default TimelineBarChart;

package/src/generated/components/timeline-events.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 TimelineEvents: 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
-                    ? "M100 300C112 300 120 308 120 320V360C120 370 112 380 100 380S80 370 80 360V320C80 308 88 300 100 300L100 300zM300 300C312 300 320 308 320 320V360C320 370 312 380 300 380S280 370 280 360V320C280 308 288 300 300 300L300 300zM120 120H80V80H120V120L120 120zM340 340V320C340 298 322 280 300 280S260 298 260 320V340H140V320C140 298 122 280 100 280S60 298 60 320V340H40C30 340 20 330 20 320V40C20 30 30 20 40 20H360C370 20 380 30 380 40V320C380 330 370 340 360 340H340zM140 60H60V140H140V60L140 60zM140 160H60V240H140V160L140 160zM240 60H160V140H240V60L240 60zM240 160H160V240H240V160L240 160zM340 60H260V140H340V60L340 60zM340 160H260V240H340V160L340 160zM220 120H180V80H220V120L220 120zM320 220H280V180H320V220L320 220z"
-                    : "M160 100H140V80H160V100L160 100zM80 100H60V80H80V100L80 100zM220 260C232 260 240 270 240 280V300C240 310 232 320 220 320S200 310 200 300V280C200 270 210 260 220 260L220 260zM80 260C90 260 100 270 100 280V300C100 310 90 320 80 320S60 310 60 300V280C60 270 70 260 80 260L80 260zM280 300H260V280C260 258 242 240 220 240S180 258 180 280V300H120V280C120 258 102 240 80 240S40 258 40 280V300H20C10 300 0 290 0 280V40C0 30 10 20 20 20H280C292 20 300 30 300 40V280C300 290 292 300 280 300L280 300zM100 60H40V120H100V60L100 60zM100 140H40V200H100V140L100 140zM180 60H120V120H180V60L180 60zM180 140H120V200H180V140L180 140zM260 60H200V120H260V60L260 60zM260 140H200V200H260V140L260 140zM240 180H220V160H240V180L240 180z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="timeline-events"
-                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}-timeline-events`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="timeline-events" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const TimelineEvents: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="timeline-events" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M160 100H140V80H160V100L160 100zM80 100H60V80H80V100L80 100zM220 260C232 260 240 270 240 280V300C240 310 232 320 220 320S200 310 200 300V280C200 270 210 260 220 260L220 260zM80 260C90 260 100 270 100 280V300C100 310 90 320 80 320S60 310 60 300V280C60 270 70 260 80 260L80 260zM280 300H260V280C260 258 242 240 220 240S180 258 180 280V300H120V280C120 258 102 240 80 240S40 258 40 280V300H20C10 300 0 290 0 280V40C0 30 10 20 20 20H280C292 20 300 30 300 40V280C300 290 292 300 280 300L280 300zM100 60H40V120H100V60L100 60zM100 140H40V200H100V140L100 140zM180 60H120V120H180V60L180 60zM180 140H120V200H180V140L180 140zM260 60H200V120H260V60L260 60zM260 140H200V200H260V140L260 140zM240 180H220V160H240V180L240 180z"
+                        : "M100 300C112 300 120 308 120 320V360C120 370 112 380 100 380S80 370 80 360V320C80 308 88 300 100 300L100 300zM300 300C312 300 320 308 320 320V360C320 370 312 380 300 380S280 370 280 360V320C280 308 288 300 300 300L300 300zM120 120H80V80H120V120L120 120zM340 340V320C340 298 322 280 300 280S260 298 260 320V340H140V320C140 298 122 280 100 280S60 298 60 320V340H40C30 340 20 330 20 320V40C20 30 30 20 40 20H360C370 20 380 30 380 40V320C380 330 370 340 360 340H340zM140 60H60V140H140V60L140 60zM140 160H60V240H140V160L140 160zM240 60H160V140H240V60L240 60zM240 160H160V240H240V160L240 160zM340 60H260V140H340V60L340 60zM340 160H260V240H340V160L340 160zM220 120H180V80H220V120L220 120zM320 220H280V180H320V220L320 220z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+TimelineEvents.defaultProps = {
+    size: IconSize.STANDARD,
+};
 TimelineEvents.displayName = `Blueprint5.Icon.TimelineEvents`;
 export default TimelineEvents;