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

package/src/generated/components/alignment-left.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 AlignmentLeft: 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
-                    ? "M20 400C9 400 0 391 0 380V20C0 9 9 0 20 0S40 9 40 20V380C40 391 31 400 20 400zM240 180H100C89 180 80 171 80 160V80C80 69 89 60 100 60H240C251 60 260 69 260 80V160C260 171 251 180 240 180zM380 340H100C89 340 80 331 80 320V240C80 229 89 220 100 220H380C391 220 400 229 400 240V320C400 331 391 340 380 340z"
-                    : "M180 140H100C89 140 80 131 80 120V60C80 49 89 40 100 40H180C191 40 200 49 200 60V120C200 131 191 140 180 140zM20 320C9 320 0 311 0 300V20C0 9 9 0 20 0S40 9 40 20V300C40 311 31 320 20 320zM280 280H100C89 280 80 271 80 260V200C80 189 89 180 100 180H280C291 180 300 189 300 200V260C300 271 291 280 280 280z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="alignment-left"
-                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}-alignment-left`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="alignment-left" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignmentLeft: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="alignment-left" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M180 140H100C89 140 80 131 80 120V60C80 49 89 40 100 40H180C191 40 200 49 200 60V120C200 131 191 140 180 140zM20 320C9 320 0 311 0 300V20C0 9 9 0 20 0S40 9 40 20V300C40 311 31 320 20 320zM280 280H100C89 280 80 271 80 260V200C80 189 89 180 100 180H280C291 180 300 189 300 200V260C300 271 291 280 280 280z"
+                        : "M20 400C9 400 0 391 0 380V20C0 9 9 0 20 0S40 9 40 20V380C40 391 31 400 20 400zM240 180H100C89 180 80 171 80 160V80C80 69 89 60 100 60H240C251 60 260 69 260 80V160C260 171 251 180 240 180zM380 340H100C89 340 80 331 80 320V240C80 229 89 220 100 220H380C391 220 400 229 400 240V320C400 331 391 340 380 340z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignmentLeft.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignmentLeft.displayName = `Blueprint5.Icon.AlignmentLeft`;
 export default AlignmentLeft;

package/src/generated/components/alignment-right.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 AlignmentRight: 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 400C369 400 360 391 360 380V20C360 9 369 0 380 0S400 9 400 20V380C400 391 391 400 380 400zM300 180H160C149 180 140 171 140 160V80C140 69 149 60 160 60H300C311 60 320 69 320 80V160C320 171 311 180 300 180zM300 340H20C9 340 0 331 0 320V240C0 229 9 220 20 220H300C311 220 320 229 320 240V320C320 331 311 340 300 340z"
-                    : "M220 140H140C129 140 120 131 120 120V60C120 49 129 40 140 40H220C231 40 240 49 240 60V120C240 131 231 140 220 140zM300 320C289 320 280 311 280 300V20C280 9 289 0 300 0S320 9 320 20V300C320 311 311 320 300 320zM220 280H40C29 280 20 271 20 260V200C20 189 29 180 40 180H220C231 180 240 189 240 200V260C240 271 231 280 220 280z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="alignment-right"
-                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}-alignment-right`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="alignment-right" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignmentRight: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="alignment-right" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M220 140H140C129 140 120 131 120 120V60C120 49 129 40 140 40H220C231 40 240 49 240 60V120C240 131 231 140 220 140zM300 320C289 320 280 311 280 300V20C280 9 289 0 300 0S320 9 320 20V300C320 311 311 320 300 320zM220 280H40C29 280 20 271 20 260V200C20 189 29 180 40 180H220C231 180 240 189 240 200V260C240 271 231 280 220 280z"
+                        : "M380 400C369 400 360 391 360 380V20C360 9 369 0 380 0S400 9 400 20V380C400 391 391 400 380 400zM300 180H160C149 180 140 171 140 160V80C140 69 149 60 160 60H300C311 60 320 69 320 80V160C320 171 311 180 300 180zM300 340H20C9 340 0 331 0 320V240C0 229 9 220 20 220H300C311 220 320 229 320 240V320C320 331 311 340 300 340z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignmentRight.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignmentRight.displayName = `Blueprint5.Icon.AlignmentRight`;
 export default AlignmentRight;

package/src/generated/components/alignment-top.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 AlignmentTop: 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
-                    ? "M160 320H80C69 320 60 311 60 300V20C60 9 69 0 80 0H160C171 0 180 9 180 20V300C180 311 171 320 160 320zM380 400H20C9 400 0 391 0 380S9 360 20 360H380C391 360 400 369 400 380S391 400 380 400zM320 320H240C229 320 220 311 220 300V160C220 149 229 140 240 140H320C331 140 340 149 340 160V300C340 311 331 320 320 320z"
-                    : "M300 320H20C9 320 0 311 0 300S9 280 20 280H300C311 280 320 289 320 300S311 320 300 320zM120 240H60C49 240 40 231 40 220V40C40 29 49 20 60 20H120C131 20 140 29 140 40V220C140 231 131 240 120 240zM260 240H200C189 240 180 231 180 220V140C180 129 189 120 200 120H260C271 120 280 129 280 140V220C280 231 271 240 260 240z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="alignment-top"
-                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}-alignment-top`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="alignment-top" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignmentTop: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="alignment-top" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M300 320H20C9 320 0 311 0 300S9 280 20 280H300C311 280 320 289 320 300S311 320 300 320zM120 240H60C49 240 40 231 40 220V40C40 29 49 20 60 20H120C131 20 140 29 140 40V220C140 231 131 240 120 240zM260 240H200C189 240 180 231 180 220V140C180 129 189 120 200 120H260C271 120 280 129 280 140V220C280 231 271 240 260 240z"
+                        : "M160 320H80C69 320 60 311 60 300V20C60 9 69 0 80 0H160C171 0 180 9 180 20V300C180 311 171 320 160 320zM380 400H20C9 400 0 391 0 380S9 360 20 360H380C391 360 400 369 400 380S391 400 380 400zM320 320H240C229 320 220 311 220 300V160C220 149 229 140 240 140H320C331 140 340 149 340 160V300C340 311 331 320 320 320z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignmentTop.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignmentTop.displayName = `Blueprint5.Icon.AlignmentTop`;
 export default AlignmentTop;

package/src/generated/components/alignment-vertical-center.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 AlignmentVerticalCenter: 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 340H220V380C220 391 211 400 200 400S180 391 180 380V340H60C49 340 40 331 40 320V240C40 229 49 220 60 220H180V180H140C129 180 120 171 120 160V80C120 69 129 60 140 60H180V20C180 9 189 0 200 0S220 9 220 20V60H260C271 60 280 69 280 80V160C280 171 271 180 260 180H220V220H340C351 220 360 229 360 240V320C360 331 351 340 340 340z"
-                    : "M260 280H180V300C180 311 171 320 160 320S140 311 140 300V280H60C49 280 40 271 40 260V200C40 189 49 180 60 180H140V140H120C109 140 100 131 100 120V60C100 49 109 40 120 40H140V20C140 9 149 0 160 0S180 9 180 20V40H200C211 40 220 49 220 60V120C220 131 211 140 200 140H180V180H260C271 180 280 189 280 200V260C280 271 271 280 260 280z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="alignment-vertical-center"
-                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}-alignment-vertical-center`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="alignment-vertical-center" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const AlignmentVerticalCenter: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="alignment-vertical-center" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M260 280H180V300C180 311 171 320 160 320S140 311 140 300V280H60C49 280 40 271 40 260V200C40 189 49 180 60 180H140V140H120C109 140 100 131 100 120V60C100 49 109 40 120 40H140V20C140 9 149 0 160 0S180 9 180 20V40H200C211 40 220 49 220 60V120C220 131 211 140 200 140H180V180H260C271 180 280 189 280 200V260C280 271 271 280 260 280z"
+                        : "M340 340H220V380C220 391 211 400 200 400S180 391 180 380V340H60C49 340 40 331 40 320V240C40 229 49 220 60 220H180V180H140C129 180 120 171 120 160V80C120 69 129 60 140 60H180V20C180 9 189 0 200 0S220 9 220 20V60H260C271 60 280 69 280 80V160C280 171 271 180 260 180H220V220H340C351 220 360 229 360 240V320C360 331 351 340 340 340z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+AlignmentVerticalCenter.defaultProps = {
+    size: IconSize.STANDARD,
+};
 AlignmentVerticalCenter.displayName = `Blueprint5.Icon.AlignmentVerticalCenter`;
 export default AlignmentVerticalCenter;

package/src/generated/components/ammunition.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 Ammunition: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>(({
-    className,
-    color,
-    size = IconSize.STANDARD,
-    title,
-    htmlTitle,
-    svgProps,
-    tagName = "span",
-    ...htmlProps
-}, ref) => {
-    const isLarge = size >= IconSize.LARGE;
-    const pixelGridSize =  isLarge ? IconSize.LARGE : IconSize.STANDARD;
-    const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
-    const titleId = uniqueId("iconTitle");
-    const path = (
-        <path
-            d={
-                isLarge
-                    ? "M120 280V283.4314C120 319.6516 105.6116 354.3884 80 380C54.3884 354.3884 40 319.6516 40 283.4314V280H120zM120 40V20H40V40H120zM120 60V260H40V60H120zM160 20V40H240V20H160zM240 283.4314V280H160V283.4314C160 319.6516 174.3884 354.3884 200 380C225.612 354.3884 240 319.6516 240 283.4314zM240 260V60H160V260H240zM280 40V20H360V40H280zM360 280V283.4314C360 319.6516 345.612 354.3884 320 380C294.3880000000001 354.3884 280 319.6516 280 283.4314V280H360zM360 60V260H280V60H360z"
-                    : "M42.5196 297.9882C66.211 279.0332 80 250.3418 80 220V60H0V220C0 250.3418 13.78906 279.0332 37.4804 297.9882L40 300L42.5196 297.9882zM162.5196 297.9882C186.211 279.0332 200 250.3418 200 220V60H120V220C120 250.3418 133.789 279.0332 157.4804 297.9882L160 300L162.5196 297.9882zM320 220C320 250.3418 306.21 279.0332 282.52 297.9882L280 300L277.48 297.9882C253.79 279.0332 240 250.3418 240 220V60H320V220zM80 20V40H0V20H80zM200 40V20H120V40H200zM320 20V40H240V20H320z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="ammunition"
-                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}-ammunition`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="ammunition" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Ammunition: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="ammunition" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M42.5196 297.9882C66.211 279.0332 80 250.3418 80 220V60H0V220C0 250.3418 13.78906 279.0332 37.4804 297.9882L40 300L42.5196 297.9882zM162.5196 297.9882C186.211 279.0332 200 250.3418 200 220V60H120V220C120 250.3418 133.789 279.0332 157.4804 297.9882L160 300L162.5196 297.9882zM320 220C320 250.3418 306.21 279.0332 282.52 297.9882L280 300L277.48 297.9882C253.79 279.0332 240 250.3418 240 220V60H320V220zM80 20V40H0V20H80zM200 40V20H120V40H200zM320 20V40H240V20H320z"
+                        : "M120 280V283.4314C120 319.6516 105.6116 354.3884 80 380C54.3884 354.3884 40 319.6516 40 283.4314V280H120zM120 40V20H40V40H120zM120 60V260H40V60H120zM160 20V40H240V20H160zM240 283.4314V280H160V283.4314C160 319.6516 174.3884 354.3884 200 380C225.612 354.3884 240 319.6516 240 283.4314zM240 260V60H160V260H240zM280 40V20H360V40H280zM360 280V283.4314C360 319.6516 345.612 354.3884 320 380C294.3880000000001 354.3884 280 319.6516 280 283.4314V280H360zM360 60V260H280V60H360z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Ammunition.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Ammunition.displayName = `Blueprint5.Icon.Ammunition`;
 export default Ammunition;

package/src/generated/components/anchor.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 Anchor: 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 283.4142C243.304 291.6508 260 313.8756 260 340C260 373.137 233.138 400 200 400C166.863 400 140 373.137 140 340C140 313.8756 156.6962 291.6508 180 283.4142V260H120V220H180V41.66C126.0016 50.718 84.2316 95.84 80.3024 151.414L85.8578 145.858C93.6684 138.048 106.3316 138.048 114.1422 145.858C121.9526 153.668 121.9526 166.332 114.1422 174.142L74.1422 214.1422C66.3316 221.9526 53.6684 221.9526 45.8578 214.1422L5.85786 174.142C-1.952622 166.332 -1.952622 153.668 5.85786 145.858C13.66834 138.048 26.3316 138.048 34.1422 145.858L40.2006 151.916C44.4108 67.306 114.3452 0 200 0C285.654 0 355.59 67.306 359.8 151.916L365.858 145.858C373.668 138.048 386.332 138.048 394.142 145.858C401.952 153.668 401.952 166.332 394.142 174.142L354.142 214.1422C346.332 221.9526 333.668 221.9526 325.858 214.1422L285.858 174.142C278.048 166.332 278.048 153.668 285.858 145.858C293.668 138.048 306.332 138.048 314.142 145.858L319.698 151.414C315.768 95.84 273.998 50.718 220 41.66V220H280V260H220V283.4142zM220 340C220 328.9544 211.046 320 200 320C188.9544 320 180 328.9544 180 340C180 351.0456 188.9544 360 200 360C211.046 360 220 351.0456 220 340z"
-                    : "M200 280C200 265.1944 191.956 252.2674 180 245.3512V220H220V180H180V42.52C211.764 50.696 235.894 77.89 239.526 111.242L234.142 105.858C226.332 98.048 213.668 98.048 205.858 105.858C198.0474 113.668 198.0474 126.3316 205.858 134.1422L245.858 174.1422C253.668 181.9526 266.332 181.9526 274.142 174.1422L314.142 134.1422C321.952 126.3316 321.952 113.668 314.142 105.858C306.332 98.048 293.668 98.048 285.858 105.858L279.736 111.98C275.61 49.444 223.58 0 160 0C96.421 0 44.3904 49.444 40.2638 111.98L34.1422 105.858C26.3316 98.048 13.66834 98.048 5.85786 105.858C-1.952622 113.668 -1.952622 126.3316 5.85786 134.1422L45.8578 174.1422C53.6684 181.9526 66.3316 181.9526 74.1422 174.1422L114.1422 134.1422C121.9526 126.3316 121.9526 113.668 114.1422 105.858C106.3316 98.048 93.6684 98.048 85.8578 105.858L80.474 111.242C84.1054 77.89 108.235 50.696 140 42.52V180H100V220H140V245.3512C128.044 252.2674 120 265.1944 120 280C120 302.09138 137.9086 320 160 320C182.0914 320 200 302.09138 200 280z"
-            }
-            fillRule="evenodd"
-            transform="scale(0.05 0.05)"
-        />
-    );
-
-    if (tagName === null) {
-        return (
-            <svg
-                aria-labelledby={title ? titleId : undefined}
-                data-icon="anchor"
-                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}-anchor`, className),
-                ref,
-                title: htmlTitle,
-            },
-            <svg fill={color} data-icon="anchor" width={size} height={size} role="img" viewBox={viewBox} {...svgProps}>
-                {title && <title>{title}</title>}
-                {path}
-            </svg>
-        );
-    }
+export const Anchor: React.FC<SVGIconProps> = React.forwardRef<any, SVGIconProps>((props, ref) => {
+    const translation = `${-1 * props.size! / 0.05 / 2}`;
+    return (
+        <SVGIconContainer iconName="anchor" ref={ref}  {...props}>
+            <path
+                d={
+                    props.size! < IconSize.LARGE
+                        ? "M200 280C200 265.1944 191.956 252.2674 180 245.3512V220H220V180H180V42.52C211.764 50.696 235.894 77.89 239.526 111.242L234.142 105.858C226.332 98.048 213.668 98.048 205.858 105.858C198.0474 113.668 198.0474 126.3316 205.858 134.1422L245.858 174.1422C253.668 181.9526 266.332 181.9526 274.142 174.1422L314.142 134.1422C321.952 126.3316 321.952 113.668 314.142 105.858C306.332 98.048 293.668 98.048 285.858 105.858L279.736 111.98C275.61 49.444 223.58 0 160 0C96.421 0 44.3904 49.444 40.2638 111.98L34.1422 105.858C26.3316 98.048 13.66834 98.048 5.85786 105.858C-1.952622 113.668 -1.952622 126.3316 5.85786 134.1422L45.8578 174.1422C53.6684 181.9526 66.3316 181.9526 74.1422 174.1422L114.1422 134.1422C121.9526 126.3316 121.9526 113.668 114.1422 105.858C106.3316 98.048 93.6684 98.048 85.8578 105.858L80.474 111.242C84.1054 77.89 108.235 50.696 140 42.52V180H100V220H140V245.3512C128.044 252.2674 120 265.1944 120 280C120 302.09138 137.9086 320 160 320C182.0914 320 200 302.09138 200 280z"
+                        : "M220 283.4142C243.304 291.6508 260 313.8756 260 340C260 373.137 233.138 400 200 400C166.863 400 140 373.137 140 340C140 313.8756 156.6962 291.6508 180 283.4142V260H120V220H180V41.66C126.0016 50.718 84.2316 95.84 80.3024 151.414L85.8578 145.858C93.6684 138.048 106.3316 138.048 114.1422 145.858C121.9526 153.668 121.9526 166.332 114.1422 174.142L74.1422 214.1422C66.3316 221.9526 53.6684 221.9526 45.8578 214.1422L5.85786 174.142C-1.952622 166.332 -1.952622 153.668 5.85786 145.858C13.66834 138.048 26.3316 138.048 34.1422 145.858L40.2006 151.916C44.4108 67.306 114.3452 0 200 0C285.654 0 355.59 67.306 359.8 151.916L365.858 145.858C373.668 138.048 386.332 138.048 394.142 145.858C401.952 153.668 401.952 166.332 394.142 174.142L354.142 214.1422C346.332 221.9526 333.668 221.9526 325.858 214.1422L285.858 174.142C278.048 166.332 278.048 153.668 285.858 145.858C293.668 138.048 306.332 138.048 314.142 145.858L319.698 151.414C315.768 95.84 273.998 50.718 220 41.66V220H280V260H220V283.4142zM220 340C220 328.9544 211.046 320 200 320C188.9544 320 180 328.9544 180 340C180 351.0456 188.9544 360 200 360C211.046 360 220 351.0456 220 340z"
+                }
+                fillRule="evenodd"
+                transform-origin="center"
+                transform={`scale(0.05, -0.05) translate(${translation}, ${translation})`}
+            />
+        </SVGIconContainer>
+   )
 });
+Anchor.defaultProps = {
+    size: IconSize.STANDARD,
+};
 Anchor.displayName = `Blueprint5.Icon.Anchor`;
 export default Anchor;