@fibery/ui-kit 1.29.4 → 1.30.0

package/src/icons/react/InfoCircleFilled.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import InfoCircleFilledSvg from '../ast/InfoCircleFilled';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const InfoCircleFilled = (
+const InfoCircleFilled = forwardRef<SVGSVGElement, IconBaseProps>(function InfoCircleFilled(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={InfoCircleFilledSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={InfoCircleFilledSvg} />});
 
-InfoCircleFilled.displayName = 'InfoCircleFilled';
 export default InfoCircleFilled;

package/src/icons/react/Integration.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import IntegrationSvg from '../ast/Integration';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Integration = (
+const Integration = forwardRef<SVGSVGElement, IconBaseProps>(function Integration(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={IntegrationSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={IntegrationSvg} />});
 
-Integration.displayName = 'Integration';
 export default Integration;

package/src/icons/react/IntegrationsIntegrationDiscourseColor.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import IntegrationsIntegrationDiscourseColorSvg from '../ast/IntegrationsIntegrationDiscourseColor';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const IntegrationsIntegrationDiscourseColor = (
+const IntegrationsIntegrationDiscourseColor = forwardRef<SVGSVGElement, IconBaseProps>(function IntegrationsIntegrationDiscourseColor(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={IntegrationsIntegrationDiscourseColorSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={IntegrationsIntegrationDiscourseColorSvg} />});
 
-IntegrationsIntegrationDiscourseColor.displayName = 'IntegrationsIntegrationDiscourseColor';
 export default IntegrationsIntegrationDiscourseColor;

package/src/icons/react/IntegrationsIntegrationIntercomColor.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import IntegrationsIntegrationIntercomColorSvg from '../ast/IntegrationsIntegrationIntercomColor';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const IntegrationsIntegrationIntercomColor = (
+const IntegrationsIntegrationIntercomColor = forwardRef<SVGSVGElement, IconBaseProps>(function IntegrationsIntegrationIntercomColor(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={IntegrationsIntegrationIntercomColorSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={IntegrationsIntegrationIntercomColorSvg} />});
 
-IntegrationsIntegrationIntercomColor.displayName = 'IntegrationsIntegrationIntercomColor';
 export default IntegrationsIntegrationIntercomColor;

package/src/icons/react/IntegrationsIntegrationSlackColor.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import IntegrationsIntegrationSlackColorSvg from '../ast/IntegrationsIntegrationSlackColor';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const IntegrationsIntegrationSlackColor = (
+const IntegrationsIntegrationSlackColor = forwardRef<SVGSVGElement, IconBaseProps>(function IntegrationsIntegrationSlackColor(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={IntegrationsIntegrationSlackColorSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={IntegrationsIntegrationSlackColorSvg} />});
 
-IntegrationsIntegrationSlackColor.displayName = 'IntegrationsIntegrationSlackColor';
 export default IntegrationsIntegrationSlackColor;

package/src/icons/react/IntegrationsIntegrationZendeskColor.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import IntegrationsIntegrationZendeskColorSvg from '../ast/IntegrationsIntegrationZendeskColor';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const IntegrationsIntegrationZendeskColor = (
+const IntegrationsIntegrationZendeskColor = forwardRef<SVGSVGElement, IconBaseProps>(function IntegrationsIntegrationZendeskColor(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={IntegrationsIntegrationZendeskColorSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={IntegrationsIntegrationZendeskColorSvg} />});
 
-IntegrationsIntegrationZendeskColor.displayName = 'IntegrationsIntegrationZendeskColor';
 export default IntegrationsIntegrationZendeskColor;

package/src/icons/react/InvitePeople.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import InvitePeopleSvg from '../ast/InvitePeople';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const InvitePeople = (
+const InvitePeople = forwardRef<SVGSVGElement, IconBaseProps>(function InvitePeople(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={InvitePeopleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={InvitePeopleSvg} />});
 
-InvitePeople.displayName = 'InvitePeople';
 export default InvitePeople;

package/src/icons/react/Items.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ItemsSvg from '../ast/Items';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Items = (
+const Items = forwardRef<SVGSVGElement, IconBaseProps>(function Items(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ItemsSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ItemsSvg} />});
 
-Items.displayName = 'Items';
 export default Items;

package/src/icons/react/Jira.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import JiraSvg from '../ast/Jira';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Jira = (
+const Jira = forwardRef<SVGSVGElement, IconBaseProps>(function Jira(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={JiraSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={JiraSvg} />});
 
-Jira.displayName = 'Jira';
 export default Jira;

package/src/icons/react/Key.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import KeySvg from '../ast/Key';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Key = (
+const Key = forwardRef<SVGSVGElement, IconBaseProps>(function Key(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={KeySvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={KeySvg} />});
 
-Key.displayName = 'Key';
 export default Key;

package/src/icons/react/Lab.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import LabSvg from '../ast/Lab';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Lab = (
+const Lab = forwardRef<SVGSVGElement, IconBaseProps>(function Lab(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={LabSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LabSvg} />});
 
-Lab.displayName = 'Lab';
 export default Lab;

package/src/icons/react/LayoutDouble.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import LayoutDoubleSvg from '../ast/LayoutDouble';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const LayoutDouble = (
+const LayoutDouble = forwardRef<SVGSVGElement, IconBaseProps>(function LayoutDouble(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={LayoutDoubleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LayoutDoubleSvg} />});
 
-LayoutDouble.displayName = 'LayoutDouble';
 export default LayoutDouble;

package/src/icons/react/LayoutSingle.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import LayoutSingleSvg from '../ast/LayoutSingle';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const LayoutSingle = (
+const LayoutSingle = forwardRef<SVGSVGElement, IconBaseProps>(function LayoutSingle(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={LayoutSingleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LayoutSingleSvg} />});
 
-LayoutSingle.displayName = 'LayoutSingle';
 export default LayoutSingle;

package/src/icons/react/LeftPanel.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import LeftPanelSvg from '../ast/LeftPanel';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const LeftPanel = (
+const LeftPanel = forwardRef<SVGSVGElement, IconBaseProps>(function LeftPanel(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={LeftPanelSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LeftPanelSvg} />});
 
-LeftPanel.displayName = 'LeftPanel';
 export default LeftPanel;

package/src/icons/react/Levels.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import LevelsSvg from '../ast/Levels';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Levels = (
+const Levels = forwardRef<SVGSVGElement, IconBaseProps>(function Levels(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={LevelsSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LevelsSvg} />});
 
-Levels.displayName = 'Levels';
 export default Levels;

package/src/icons/react/LineDivider.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import LineDividerSvg from '../ast/LineDivider';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const LineDivider = (
+const LineDivider = forwardRef<SVGSVGElement, IconBaseProps>(function LineDivider(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={LineDividerSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LineDividerSvg} />});
 
-LineDivider.displayName = 'LineDivider';
 export default LineDivider;

package/src/icons/react/Link.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import LinkSvg from '../ast/Link';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Link = (
+const Link = forwardRef<SVGSVGElement, IconBaseProps>(function Link(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={LinkSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LinkSvg} />});
 
-Link.displayName = 'Link';
 export default Link;

package/src/icons/react/Lock.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import LockSvg from '../ast/Lock';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Lock = (
+const Lock = forwardRef<SVGSVGElement, IconBaseProps>(function Lock(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={LockSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LockSvg} />});
 
-Lock.displayName = 'Lock';
 export default Lock;

package/src/icons/react/Loom.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import LoomSvg from '../ast/Loom';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Loom = (
+const Loom = forwardRef<SVGSVGElement, IconBaseProps>(function Loom(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={LoomSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LoomSvg} />});
 
-Loom.displayName = 'Loom';
 export default Loom;

package/src/icons/react/MenuCollapser.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MenuCollapserSvg from '../ast/MenuCollapser';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MenuCollapser = (
+const MenuCollapser = forwardRef<SVGSVGElement, IconBaseProps>(function MenuCollapser(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MenuCollapserSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MenuCollapserSvg} />});
 
-MenuCollapser.displayName = 'MenuCollapser';
 export default MenuCollapser;

package/src/icons/react/MessagePlusSquare.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MessagePlusSquareSvg from '../ast/MessagePlusSquare';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MessagePlusSquare = (
+const MessagePlusSquare = forwardRef<SVGSVGElement, IconBaseProps>(function MessagePlusSquare(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MessagePlusSquareSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MessagePlusSquareSvg} />});
 
-MessagePlusSquare.displayName = 'MessagePlusSquare';
 export default MessagePlusSquare;

package/src/icons/react/Milestones.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MilestonesSvg from '../ast/Milestones';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Milestones = (
+const Milestones = forwardRef<SVGSVGElement, IconBaseProps>(function Milestones(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MilestonesSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MilestonesSvg} />});
 
-Milestones.displayName = 'Milestones';
 export default Milestones;

package/src/icons/react/Minus.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MinusSvg from '../ast/Minus';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Minus = (
+const Minus = forwardRef<SVGSVGElement, IconBaseProps>(function Minus(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MinusSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MinusSvg} />});
 
-Minus.displayName = 'Minus';
 export default Minus;

package/src/icons/react/Miro.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MiroSvg from '../ast/Miro';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Miro = (
+const Miro = forwardRef<SVGSVGElement, IconBaseProps>(function Miro(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MiroSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MiroSvg} />});
 
-Miro.displayName = 'Miro';
 export default Miro;

package/src/icons/react/MirrorOff.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MirrorOffSvg from '../ast/MirrorOff';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MirrorOff = (
+const MirrorOff = forwardRef<SVGSVGElement, IconBaseProps>(function MirrorOff(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MirrorOffSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MirrorOffSvg} />});
 
-MirrorOff.displayName = 'MirrorOff';
 export default MirrorOff;

package/src/icons/react/MirrorOn.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MirrorOnSvg from '../ast/MirrorOn';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MirrorOn = (
+const MirrorOn = forwardRef<SVGSVGElement, IconBaseProps>(function MirrorOn(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MirrorOnSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MirrorOnSvg} />});
 
-MirrorOn.displayName = 'MirrorOn';
 export default MirrorOn;

package/src/icons/react/Mixpanel.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MixpanelSvg from '../ast/Mixpanel';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Mixpanel = (
+const Mixpanel = forwardRef<SVGSVGElement, IconBaseProps>(function Mixpanel(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MixpanelSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MixpanelSvg} />});
 
-Mixpanel.displayName = 'Mixpanel';
 export default Mixpanel;

package/src/icons/react/Monitor.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MonitorSvg from '../ast/Monitor';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Monitor = (
+const Monitor = forwardRef<SVGSVGElement, IconBaseProps>(function Monitor(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MonitorSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MonitorSvg} />});
 
-Monitor.displayName = 'Monitor';
 export default Monitor;

package/src/icons/react/More.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MoreSvg from '../ast/More';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const More = (
+const More = forwardRef<SVGSVGElement, IconBaseProps>(function More(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MoreSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MoreSvg} />});
 
-More.displayName = 'More';
 export default More;

package/src/icons/react/MoreCompact.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MoreCompactSvg from '../ast/MoreCompact';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MoreCompact = (
+const MoreCompact = forwardRef<SVGSVGElement, IconBaseProps>(function MoreCompact(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MoreCompactSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MoreCompactSvg} />});
 
-MoreCompact.displayName = 'MoreCompact';
 export default MoreCompact;

package/src/icons/react/MoveBottom.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MoveBottomSvg from '../ast/MoveBottom';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MoveBottom = (
+const MoveBottom = forwardRef<SVGSVGElement, IconBaseProps>(function MoveBottom(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MoveBottomSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MoveBottomSvg} />});
 
-MoveBottom.displayName = 'MoveBottom';
 export default MoveBottom;

package/src/icons/react/MoveLeft.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MoveLeftSvg from '../ast/MoveLeft';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MoveLeft = (
+const MoveLeft = forwardRef<SVGSVGElement, IconBaseProps>(function MoveLeft(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MoveLeftSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MoveLeftSvg} />});
 
-MoveLeft.displayName = 'MoveLeft';
 export default MoveLeft;

package/src/icons/react/MoveRight.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MoveRightSvg from '../ast/MoveRight';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MoveRight = (
+const MoveRight = forwardRef<SVGSVGElement, IconBaseProps>(function MoveRight(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MoveRightSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MoveRightSvg} />});
 
-MoveRight.displayName = 'MoveRight';
 export default MoveRight;

package/src/icons/react/MoveTop.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MoveTopSvg from '../ast/MoveTop';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MoveTop = (
+const MoveTop = forwardRef<SVGSVGElement, IconBaseProps>(function MoveTop(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MoveTopSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MoveTopSvg} />});
 
-MoveTop.displayName = 'MoveTop';
 export default MoveTop;

package/src/icons/react/MySpace.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import MySpaceSvg from '../ast/MySpace';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const MySpace = (
+const MySpace = forwardRef<SVGSVGElement, IconBaseProps>(function MySpace(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={MySpaceSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={MySpaceSvg} />});
 
-MySpace.displayName = 'MySpace';
 export default MySpace;