@fibery/ui-kit 1.29.5 → 1.30.0

package/src/icons/react/AppDetails.tsx

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

package/src/icons/react/AppStore.tsx

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

package/src/icons/react/AppStoreOneColor.tsx

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

package/src/icons/react/AppTemplates.tsx

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

package/src/icons/react/AppWebhooks.tsx

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

package/src/icons/react/AppWiki.tsx

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

package/src/icons/react/ArrowBarLeft.tsx

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

package/src/icons/react/ArrowBarRight.tsx

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

package/src/icons/react/ArrowBottom.tsx

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

package/src/icons/react/ArrowCollapse.tsx

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

package/src/icons/react/ArrowCollapseVertical.tsx

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

package/src/icons/react/ArrowForward.tsx

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

package/src/icons/react/ArrowLeft.tsx

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

package/src/icons/react/ArrowRight.tsx

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

package/src/icons/react/ArrowTop.tsx

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

package/src/icons/react/AskForInput.tsx

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

package/src/icons/react/Atom.tsx

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

package/src/icons/react/AutomationsCancelled.tsx

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

package/src/icons/react/AutomationsDisabled.tsx

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

package/src/icons/react/AutomationsError.tsx

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

package/src/icons/react/AutomationsInProgress.tsx

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

package/src/icons/react/AutomationsNotStarted.tsx

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

package/src/icons/react/AutomationsSuccess.tsx

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

package/src/icons/react/Back.tsx

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

package/src/icons/react/BacklogIcon.tsx

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

package/src/icons/react/BatchActionsIcon.tsx

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

package/src/icons/react/BellCircle.tsx

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

package/src/icons/react/BellFilled.tsx

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

package/src/icons/react/BellOff.tsx

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

package/src/icons/react/BellRinging.tsx

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

package/src/icons/react/BellX.tsx

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

package/src/icons/react/Bolt.tsx

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

package/src/icons/react/Cards.tsx

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

package/src/icons/react/Chat.tsx

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

package/src/icons/react/ChatAi.tsx

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