@fibery/ui-kit 1.29.4 → 1.30.0

package/src/icons/react/ExtensionAssignments.tsx

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

package/src/icons/react/ExtensionAvatar.tsx

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

package/src/icons/react/ExtensionComments.tsx

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

package/src/icons/react/ExtensionFiles.tsx

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

package/src/icons/react/ExtensionReferences.tsx

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

package/src/icons/react/ExtensionWorkflow.tsx

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

package/src/icons/react/Eye.tsx

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

package/src/icons/react/Favorites.tsx

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

package/src/icons/react/FavoritesChecked.tsx

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

package/src/icons/react/FavoritesOff.tsx

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

package/src/icons/react/FiberyMono.tsx

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

package/src/icons/react/FieldUnit.tsx

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

package/src/icons/react/Fields.tsx

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

package/src/icons/react/Figma.tsx

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

package/src/icons/react/FileUpload.tsx

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

package/src/icons/react/Filter.tsx

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

package/src/icons/react/FocusMode.tsx

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

package/src/icons/react/FocusModeOff.tsx

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

package/src/icons/react/FormWithCover.tsx

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

package/src/icons/react/FormWithoutCover.tsx

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

package/src/icons/react/Github.tsx

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

package/src/icons/react/Gitlab.tsx

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

package/src/icons/react/Globe.tsx

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

package/src/icons/react/GlobeSimple.tsx

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

package/src/icons/react/GoogleDrive.tsx

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

package/src/icons/react/GoogleMap.tsx

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

package/src/icons/react/Headphones.tsx

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

package/src/icons/react/HeadphonesAi.tsx

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

package/src/icons/react/Hide.tsx

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

package/src/icons/react/Highlights.tsx

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

package/src/icons/react/Hint.tsx

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

package/src/icons/react/Home.tsx

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

package/src/icons/react/ImageXmark.tsx

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

package/src/icons/react/Import.tsx

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

package/src/icons/react/InfoCircle.tsx

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