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

package/src/generated/components/train.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const Train: 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 40H280L320 0H80C80 0 81 1 82.4 2.4C91.2 11.2 120 40 120 40H80C58 40 40 58 40 80V360C40 382 111.6 400 200 400S360 382 360 360L360 360V80C360 58 342 40 320 40zM110 100C126.6 100 140 113.4 140 130C140 146.6 126.6 160 110 160C93.4 160 80 146.6 80 130C80 113.4 93.4 100 110 100zM180 340H80V220H180V340zM320 340H220V220H320V340zM290 160C273.4 160 260 146.6 260 130C260 113.4 273.4 100 290 100C306.6 100 320 113.4 320 130C320 146.6 306.6 160 290 160z"
-                    : "M260 40H240L260 0H60L80 40H60C38 40 20 58 20 80V280C20 302 82.6 320 160 320S300 302 300 280V80C300 58 282 40 260 40zM220 80H260V120H220V80zM180 180H260V260H180V180zM60 80H100V120H60V80zM60 180H140V260H60V180z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="train"
-                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}-train`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="train" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Train: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="train" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M260 40H240L260 0H60L80 40H60C38 40 20 58 20 80V280C20 302 82.6 320 160 320S300 302 300 280V80C300 58 282 40 260 40zM220 80H260V120H220V80zM180 180H260V260H180V180zM60 80H100V120H60V80zM60 180H140V260H60V180z"
+                        : "M320 40H280L320 0H80C80 0 81 1 82.4 2.4C91.2 11.2 120 40 120 40H80C58 40 40 58 40 80V360C40 382 111.6 400 200 400S360 382 360 360L360 360V80C360 58 342 40 320 40zM110 100C126.6 100 140 113.4 140 130C140 146.6 126.6 160 110 160C93.4 160 80 146.6 80 130C80 113.4 93.4 100 110 100zM180 340H80V220H180V340zM320 340H220V220H320V340zM290 160C273.4 160 260 146.6 260 130C260 113.4 273.4 100 290 100C306.6 100 320 113.4 320 130C320 146.6 306.6 160 290 160z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Train.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Train.displayName = `Blueprint5.Icon.Train`;
 export default Train;

package/src/generated/components/translate.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const Translate: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M397.8 28.8L397.8 28.8L298 228.8L297.8 228.8C294.4000000000001 235.4 287.8 240 280 240S265.6 235.4 262.2 228.8L262 228.8L227.4 159.6L171.4 205.6L211.2 238.4000000000001L211.2 238.4000000000001C228.8 253.2 240 275.4 240 300V320H260C271 320 280 329 280 340C280 351 271 360 260 360H160V380C160 391 151 400 140 400S120 391 120 380V360H20C9 360 0 351 0 340C0 329 9 320 20 320H200V300C200 287.6 194.4 276.4 185.4 269.2L185.4 269.2L140 231.6L94.6 269.2L94.6 269.2C85.6 276.4 80 287.6 80 300H40C40 275.4 51.2 253.2 68.8 238.6L68.8 238.6L108.6 205.8L47.4 155.4L47.6 155.2C43 151.6 40 146.2 40 140C40 129 49 120 60 120C64.8 120 69 122 72.6 124.8L72.8 124.6L140 180L207.2 124.6L207.4 124.8C207.8 124.4 208.4 124.2000000000001 209 123.8C209.2 123.8 209.2 123.6 209.4 123.4L162.2 28.8L162.4 28.8C161 26.2 160 23.2 160 20C160 9 169 0 180 0C187.8 0 194.4 4.6 197.8 11.2L198 11.2L222.4 60H337.6L362 11L362.2 11C365.6 4.6 372.2 0 380 0C391 0 400 9 400 20C400 23.2 399 26.2 397.8 28.8zM242.4 100L280 175.2L317.6 100H242.4z"
-                    : "M317.8 28.8L317.8 28.8L238 188.8L237.8 188.8C234.4 195.4 227.8 200 220 200S205.6 195.4 202.2 188.8L202 188.8L180 144.8L143.4 172.4L148 176L148 176C167.4 190.6 180 213.8 180 240V260H200C211 260 220 269 220 280C220 291 211 300 200 300H140C140 311 131 320 120 320H100C89 320 80 311 80 300H20C9 300 0 291 0 280C0 269 9 260 20 260H140V240C140 226.8 133.6 215 123.6 207.8L123.6 207.8L110 197.6L96.4 207.6L96.4 207.6C86.4 215 80 226.8 80 240H40C40 213.8 52.6 190.6 72 176L72 176L76.6 172.6L28 136L28.2 135.8C23.4 132 20 126.6 20 120C20 109 29 100 40 100C44.6 100 48.4 101.8 51.8 104.2L52 104L110 147.4L162 108.4L122.2 28.8L122.4 28.8C121 26.2 120 23.2 120 20C120 9 129 0 140 0C147.8 0 154.4 4.6 157.8 11.2L158 11.2L172.4 40H267.6L282 11L282.2 11C285.6 4.6 292.2 0 300 0C311 0 320 9 320 20C320 23.2 319 26.2 317.8 28.8zM192.4 80L220 135.2L247.6 80H192.4z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="translate"
-                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}-translate`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="translate" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Translate: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="translate" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M317.8 28.8L317.8 28.8L238 188.8L237.8 188.8C234.4 195.4 227.8 200 220 200S205.6 195.4 202.2 188.8L202 188.8L180 144.8L143.4 172.4L148 176L148 176C167.4 190.6 180 213.8 180 240V260H200C211 260 220 269 220 280C220 291 211 300 200 300H140C140 311 131 320 120 320H100C89 320 80 311 80 300H20C9 300 0 291 0 280C0 269 9 260 20 260H140V240C140 226.8 133.6 215 123.6 207.8L123.6 207.8L110 197.6L96.4 207.6L96.4 207.6C86.4 215 80 226.8 80 240H40C40 213.8 52.6 190.6 72 176L72 176L76.6 172.6L28 136L28.2 135.8C23.4 132 20 126.6 20 120C20 109 29 100 40 100C44.6 100 48.4 101.8 51.8 104.2L52 104L110 147.4L162 108.4L122.2 28.8L122.4 28.8C121 26.2 120 23.2 120 20C120 9 129 0 140 0C147.8 0 154.4 4.6 157.8 11.2L158 11.2L172.4 40H267.6L282 11L282.2 11C285.6 4.6 292.2 0 300 0C311 0 320 9 320 20C320 23.2 319 26.2 317.8 28.8zM192.4 80L220 135.2L247.6 80H192.4z"
+                        : "M397.8 28.8L397.8 28.8L298 228.8L297.8 228.8C294.4000000000001 235.4 287.8 240 280 240S265.6 235.4 262.2 228.8L262 228.8L227.4 159.6L171.4 205.6L211.2 238.4000000000001L211.2 238.4000000000001C228.8 253.2 240 275.4 240 300V320H260C271 320 280 329 280 340C280 351 271 360 260 360H160V380C160 391 151 400 140 400S120 391 120 380V360H20C9 360 0 351 0 340C0 329 9 320 20 320H200V300C200 287.6 194.4 276.4 185.4 269.2L185.4 269.2L140 231.6L94.6 269.2L94.6 269.2C85.6 276.4 80 287.6 80 300H40C40 275.4 51.2 253.2 68.8 238.6L68.8 238.6L108.6 205.8L47.4 155.4L47.6 155.2C43 151.6 40 146.2 40 140C40 129 49 120 60 120C64.8 120 69 122 72.6 124.8L72.8 124.6L140 180L207.2 124.6L207.4 124.8C207.8 124.4 208.4 124.2000000000001 209 123.8C209.2 123.8 209.2 123.6 209.4 123.4L162.2 28.8L162.4 28.8C161 26.2 160 23.2 160 20C160 9 169 0 180 0C187.8 0 194.4 4.6 197.8 11.2L198 11.2L222.4 60H337.6L362 11L362.2 11C365.6 4.6 372.2 0 380 0C391 0 400 9 400 20C400 23.2 399 26.2 397.8 28.8zM242.4 100L280 175.2L317.6 100H242.4z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Translate.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Translate.displayName = `Blueprint5.Icon.Translate`;
 export default Translate;

package/src/generated/components/trash.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const Trash: 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 380H240C240 391 231 400 220 400H180C169 400 160 391 160 380H60C49 380 40 371 40 360V340H360V360C360 371 351 380 340 380zM350 320H50C44.4 320 40 315.6 40 310C40 304.4 44.4 300 50 300H60V20C60 9 69 0 80 0H320C331 0 340 9 340 20V300H350C355.6 300 360 304.4 360 310C360 315.6 355.6 320 350 320zM140 80C140 69 131 60 120 60S100 69 100 80V240C100 251 109 260 120 260S140 251 140 240V80zM220 80C220 69 211 60 200 60S180 69 180 80V240C180 251 189 260 200 260S220 251 220 240V80zM300 80C300 69 291 60 280 60S260 69 260 80V240C260 251 269 260 280 260S300 251 300 240V80z"
-                    : "M289.8 240.2H29.8C24.2 240.2 19.8 235.8 19.8 230.2S24.2 220.2 29.8 220.2H39.8V20.2C39.8 9.2 48.8 0.2 59.8 0.2H259.8C270.8 0.2 279.8 9.2 279.8 20.2V220.2H289.8C295.4 220.2 299.8 224.6 299.8 230.2S295.4 240.2 289.8 240.2zM119.8 60.2C119.8 49.2 110.8 40.2 99.8 40.2S79.8 49.2 79.8 60.2V180.2C79.8 191.2 88.8 200.2 99.8 200.2S119.8 191.2 119.8 180.2V60.2zM179.8 60.2C179.8 49.2 170.8 40.2 159.8 40.2S139.8 49.2 139.8 60.2V180.2C139.8 191.2 148.8 200.2 159.8 200.2S179.8 191.2 179.8 180.2V60.2zM239.8 60.2C239.8 49.2 230.8 40.2 219.8 40.2S199.8 49.2 199.8 60.2V180.2C199.8 191.2 208.8 200.2 219.8 200.2S239.8 191.2 239.8 180.2V60.2zM279.8 300.2H199.8C199.8 311.2 190.8 320.2 179.8 320.2H139.8C128.8 320.2 119.8 311.2 119.8 300.2H39.8C28.8 300.2 19.8 291.2 19.8 280.2V260.2H299.8V280.2C299.8 291.2 290.8 300.2 279.8 300.2z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="trash"
-                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}-trash`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="trash" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Trash: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="trash" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M289.8 240.2H29.8C24.2 240.2 19.8 235.8 19.8 230.2S24.2 220.2 29.8 220.2H39.8V20.2C39.8 9.2 48.8 0.2 59.8 0.2H259.8C270.8 0.2 279.8 9.2 279.8 20.2V220.2H289.8C295.4 220.2 299.8 224.6 299.8 230.2S295.4 240.2 289.8 240.2zM119.8 60.2C119.8 49.2 110.8 40.2 99.8 40.2S79.8 49.2 79.8 60.2V180.2C79.8 191.2 88.8 200.2 99.8 200.2S119.8 191.2 119.8 180.2V60.2zM179.8 60.2C179.8 49.2 170.8 40.2 159.8 40.2S139.8 49.2 139.8 60.2V180.2C139.8 191.2 148.8 200.2 159.8 200.2S179.8 191.2 179.8 180.2V60.2zM239.8 60.2C239.8 49.2 230.8 40.2 219.8 40.2S199.8 49.2 199.8 60.2V180.2C199.8 191.2 208.8 200.2 219.8 200.2S239.8 191.2 239.8 180.2V60.2zM279.8 300.2H199.8C199.8 311.2 190.8 320.2 179.8 320.2H139.8C128.8 320.2 119.8 311.2 119.8 300.2H39.8C28.8 300.2 19.8 291.2 19.8 280.2V260.2H299.8V280.2C299.8 291.2 290.8 300.2 279.8 300.2z"
+                        : "M340 380H240C240 391 231 400 220 400H180C169 400 160 391 160 380H60C49 380 40 371 40 360V340H360V360C360 371 351 380 340 380zM350 320H50C44.4 320 40 315.6 40 310C40 304.4 44.4 300 50 300H60V20C60 9 69 0 80 0H320C331 0 340 9 340 20V300H350C355.6 300 360 304.4 360 310C360 315.6 355.6 320 350 320zM140 80C140 69 131 60 120 60S100 69 100 80V240C100 251 109 260 120 260S140 251 140 240V80zM220 80C220 69 211 60 200 60S180 69 180 80V240C180 251 189 260 200 260S220 251 220 240V80zM300 80C300 69 291 60 280 60S260 69 260 80V240C260 251 269 260 280 260S300 251 300 240V80z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Trash.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Trash.displayName = `Blueprint5.Icon.Trash`;
 export default Trash;

package/src/generated/components/tree.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const Tree: 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 89.166668L220 0L180 0L180 89.166668L40 60L130 172.5L80 160L153.1034482 269.6551724L120 260L200 400L280 260L246.896552 269.6551724L320 160L270 172.5L360 60L220 89.166668z"
-                    : "M180 82.857142L180 0L140 0L140 82.857142L20 60L97.6963352 148.7958116L60 140L121.3861386 225.940594L100 220L160 320L220 220L198.6138614 225.940594L260 140L222.303664 148.7958116L300 60L180 82.857142z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="tree"
-                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}-tree`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="tree" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Tree: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="tree" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M180 82.857142L180 0L140 0L140 82.857142L20 60L97.6963352 148.7958116L60 140L121.3861386 225.940594L100 220L160 320L220 220L198.6138614 225.940594L260 140L222.303664 148.7958116L300 60L180 82.857142z"
+                        : "M220 89.166668L220 0L180 0L180 89.166668L40 60L130 172.5L80 160L153.1034482 269.6551724L120 260L200 400L280 260L246.896552 269.6551724L320 160L270 172.5L360 60L220 89.166668z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Tree.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Tree.displayName = `Blueprint5.Icon.Tree`;
 export default Tree;

package/src/generated/components/trending-down.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const TrendingDown: 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 200C369 200 360 191 360 180V152.6L235 293.2L234.8 293C231.2 297.2 226 300 220 300C215.4 300 211.6 298.2 208.2 295.8L208 296L139.4 244.4L31 316.6L30.8 316.4C27.8 318.4 24.2 320 20 320C9 320 0 311 0 300C0 293 3.8 287.2 9.2 283.6L9 283.4L129 203.4L129.2 203.8C132.2 201.6 135.8 200 140 200C144.6 200 148.4 201.8 151.8 204.2L152 204L217.2 253L335.4 120H300C289 120 280 111 280 100C280 89 289 80 300 80H380C391 80 400 89 400 100V180C400 191 391 200 380 200z"
-                    : "M300 180C289 180 280 171 280 160V148.2L194.2 234.2C190.6 237.8 185.6 240 180 240C176.8 240 173.8 239 171.2 237.8L171.2 238L100 202.4L29 237.8L29 237.6C26.2 239 23.2 240 20 240C9 240 0 231 0 220C0 212.2 4.6 205.6 11.2 202.2L11.2 202L91.2 162L91.2 162.2C93.8 161 96.8 160 100 160S106.2 161 108.8 162.2L108.8 162L176 195.6L251.8 120H240C229 120 220 111 220 100S229 80 240 80H300C311 80 320 89 320 100V160C320 171 311 180 300 180z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="trending-down"
-                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}-trending-down`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="trending-down" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const TrendingDown: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="trending-down" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 180C289 180 280 171 280 160V148.2L194.2 234.2C190.6 237.8 185.6 240 180 240C176.8 240 173.8 239 171.2 237.8L171.2 238L100 202.4L29 237.8L29 237.6C26.2 239 23.2 240 20 240C9 240 0 231 0 220C0 212.2 4.6 205.6 11.2 202.2L11.2 202L91.2 162L91.2 162.2C93.8 161 96.8 160 100 160S106.2 161 108.8 162.2L108.8 162L176 195.6L251.8 120H240C229 120 220 111 220 100S229 80 240 80H300C311 80 320 89 320 100V160C320 171 311 180 300 180z"
+                        : "M380 200C369 200 360 191 360 180V152.6L235 293.2L234.8 293C231.2 297.2 226 300 220 300C215.4 300 211.6 298.2 208.2 295.8L208 296L139.4 244.4L31 316.6L30.8 316.4C27.8 318.4 24.2 320 20 320C9 320 0 311 0 300C0 293 3.8 287.2 9.2 283.6L9 283.4L129 203.4L129.2 203.8C132.2 201.6 135.8 200 140 200C144.6 200 148.4 201.8 151.8 204.2L152 204L217.2 253L335.4 120H300C289 120 280 111 280 100C280 89 289 80 300 80H380C391 80 400 89 400 100V180C400 191 391 200 380 200z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+TrendingDown.defaultProps = {
+    size: IconSize.STANDARD,
+};
 TrendingDown.displayName = `Blueprint5.Icon.TrendingDown`;
 export default TrendingDown;

package/src/generated/components/trending-up.tsx

@@ -13,73 +13,30 @@
  * limitations under the License.
  */
 
-import classNames from "classnames";
 import * as React from "react";
 import type { SVGIconProps } from "../../svgIconProps";
-import { IconSize } from "../../iconSize";
-import * as Classes from "../../classes";
-import { uniqueId } from "../../jsUtils";
+import { IconSize } from "../../iconTypes";
+import { SVGIconContainer } from "../../svgIconContainer";
 
-export const TrendingUp: 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 320H300C289 320 280 311 280 300C280 289 289 280 300 280H335.4L217.2 147L152 196L151.8 195.8C148.4 198.2 144.6 200 140 200C135.8 200 132.2 198.4 129.2 196.4L129 196.8L9 116.8L9.2 116.4C3.8 112.8 0 107 0 100C0 89 9 80 20 80C24.2 80 27.8 81.6 30.8 83.6L31 83.2L139.2 155.4L207.8 103.8L208 104C211.6 101.8 215.4 100 220 100C226 100 231.2 102.8 234.8 106.8L235 106.6L360 247.4V220C360 209 369 200 380 200S400 209 400 220V300C400 311 391 320 380 320z"
-                    : "M300 240H240C229 240 220 231 220 220S229 200 240 200H251.8L176 124.4L109 157.8L109 157.6C106.2 159 103.2 160 100 160S93.8 159 91.2 157.8L91.2 158L11.2 118L11.2 117.8C4.6 114.4 0 107.8 0 100C0 89 9 80 20 80C23.2 80 26.2 81 28.8 82.2L28.8 82L100 117.6L171 82L171 82.2C173.8 81 176.8 80 180 80C185.6 80 190.6 82.2 194.2 85.8L280 171.8V160C280 149 289 140 300 140S320 149 320 160V220C320 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="trending-up"
-                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}-trending-up`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="trending-up" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const TrendingUp: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="trending-up" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 240H240C229 240 220 231 220 220S229 200 240 200H251.8L176 124.4L109 157.8L109 157.6C106.2 159 103.2 160 100 160S93.8 159 91.2 157.8L91.2 158L11.2 118L11.2 117.8C4.6 114.4 0 107.8 0 100C0 89 9 80 20 80C23.2 80 26.2 81 28.8 82.2L28.8 82L100 117.6L171 82L171 82.2C173.8 81 176.8 80 180 80C185.6 80 190.6 82.2 194.2 85.8L280 171.8V160C280 149 289 140 300 140S320 149 320 160V220C320 231 311 240 300 240z"
+                        : "M380 320H300C289 320 280 311 280 300C280 289 289 280 300 280H335.4L217.2 147L152 196L151.8 195.8C148.4 198.2 144.6 200 140 200C135.8 200 132.2 198.4 129.2 196.4L129 196.8L9 116.8L9.2 116.4C3.8 112.8 0 107 0 100C0 89 9 80 20 80C24.2 80 27.8 81.6 30.8 83.6L31 83.2L139.2 155.4L207.8 103.8L208 104C211.6 101.8 215.4 100 220 100C226 100 231.2 102.8 234.8 106.8L235 106.6L360 247.4V220C360 209 369 200 380 200S400 209 400 220V300C400 311 391 320 380 320z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+TrendingUp.defaultProps = {
+    size: IconSize.STANDARD,
+};
 TrendingUp.displayName = `Blueprint5.Icon.TrendingUp`;
 export default TrendingUp;