@firecms/ui 3.0.0 → 3.0.1

package/src/icons/components/PersonIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"person"}/>
-}
+export const PersonIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"person"} ref={ref}/>
+});
+
+PersonIcon.displayName = "PersonIcon";

package/src/icons/components/PersonOffIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonOffIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"person_off"}/>
-}
+export const PersonOffIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"person_off"} ref={ref}/>
+});
+
+PersonOffIcon.displayName = "PersonOffIcon";

package/src/icons/components/PersonOutlineIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonOutlineIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"person_outline"}/>
-}
+export const PersonOutlineIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"person_outline"} ref={ref}/>
+});
+
+PersonOutlineIcon.displayName = "PersonOutlineIcon";

package/src/icons/components/PersonPinCircleIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonPinCircleIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"person_pin_circle"}/>
-}
+export const PersonPinCircleIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"person_pin_circle"} ref={ref}/>
+});
+
+PersonPinCircleIcon.displayName = "PersonPinCircleIcon";

package/src/icons/components/PersonPinIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonPinIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"person_pin"}/>
-}
+export const PersonPinIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"person_pin"} ref={ref}/>
+});
+
+PersonPinIcon.displayName = "PersonPinIcon";

package/src/icons/components/PersonRemoveAlt1Icon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonRemoveAlt1Icon(props: IconProps) {
-    return <Icon {...props} iconKey={"person_remove_alt_1"}/>
-}
+export const PersonRemoveAlt1Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"person_remove_alt_1"} ref={ref}/>
+});
+
+PersonRemoveAlt1Icon.displayName = "PersonRemoveAlt1Icon";

package/src/icons/components/PersonRemoveIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonRemoveIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"person_remove"}/>
-}
+export const PersonRemoveIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"person_remove"} ref={ref}/>
+});
+
+PersonRemoveIcon.displayName = "PersonRemoveIcon";

package/src/icons/components/PersonSearchIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonSearchIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"person_search"}/>
-}
+export const PersonSearchIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"person_search"} ref={ref}/>
+});
+
+PersonSearchIcon.displayName = "PersonSearchIcon";

package/src/icons/components/PersonalInjuryIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonalInjuryIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"personal_injury"}/>
-}
+export const PersonalInjuryIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"personal_injury"} ref={ref}/>
+});
+
+PersonalInjuryIcon.displayName = "PersonalInjuryIcon";

package/src/icons/components/PersonalVideoIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PersonalVideoIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"personal_video"}/>
-}
+export const PersonalVideoIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"personal_video"} ref={ref}/>
+});
+
+PersonalVideoIcon.displayName = "PersonalVideoIcon";

package/src/icons/components/PestControlIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PestControlIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"pest_control"}/>
-}
+export const PestControlIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"pest_control"} ref={ref}/>
+});
+
+PestControlIcon.displayName = "PestControlIcon";

package/src/icons/components/PestControlRodentIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PestControlRodentIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"pest_control_rodent"}/>
-}
+export const PestControlRodentIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"pest_control_rodent"} ref={ref}/>
+});
+
+PestControlRodentIcon.displayName = "PestControlRodentIcon";

package/src/icons/components/PetsIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PetsIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"pets"}/>
-}
+export const PetsIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"pets"} ref={ref}/>
+});
+
+PetsIcon.displayName = "PetsIcon";

package/src/icons/components/PhishingIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhishingIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phishing"}/>
-}
+export const PhishingIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phishing"} ref={ref}/>
+});
+
+PhishingIcon.displayName = "PhishingIcon";

package/src/icons/components/PhoneAndroidIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneAndroidIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_android"}/>
-}
+export const PhoneAndroidIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_android"} ref={ref}/>
+});
+
+PhoneAndroidIcon.displayName = "PhoneAndroidIcon";

package/src/icons/components/PhoneBluetoothSpeakerIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneBluetoothSpeakerIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_bluetooth_speaker"}/>
-}
+export const PhoneBluetoothSpeakerIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_bluetooth_speaker"} ref={ref}/>
+});
+
+PhoneBluetoothSpeakerIcon.displayName = "PhoneBluetoothSpeakerIcon";

package/src/icons/components/PhoneCallbackIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneCallbackIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_callback"}/>
-}
+export const PhoneCallbackIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_callback"} ref={ref}/>
+});
+
+PhoneCallbackIcon.displayName = "PhoneCallbackIcon";

package/src/icons/components/PhoneDisabledIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneDisabledIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_disabled"}/>
-}
+export const PhoneDisabledIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_disabled"} ref={ref}/>
+});
+
+PhoneDisabledIcon.displayName = "PhoneDisabledIcon";

package/src/icons/components/PhoneEnabledIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneEnabledIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_enabled"}/>
-}
+export const PhoneEnabledIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_enabled"} ref={ref}/>
+});
+
+PhoneEnabledIcon.displayName = "PhoneEnabledIcon";

package/src/icons/components/PhoneForwardedIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneForwardedIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_forwarded"}/>
-}
+export const PhoneForwardedIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_forwarded"} ref={ref}/>
+});
+
+PhoneForwardedIcon.displayName = "PhoneForwardedIcon";

package/src/icons/components/PhoneIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone"}/>
-}
+export const PhoneIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone"} ref={ref}/>
+});
+
+PhoneIcon.displayName = "PhoneIcon";

package/src/icons/components/PhoneInTalkIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneInTalkIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_in_talk"}/>
-}
+export const PhoneInTalkIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_in_talk"} ref={ref}/>
+});
+
+PhoneInTalkIcon.displayName = "PhoneInTalkIcon";

package/src/icons/components/PhoneIphoneIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneIphoneIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_iphone"}/>
-}
+export const PhoneIphoneIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_iphone"} ref={ref}/>
+});
+
+PhoneIphoneIcon.displayName = "PhoneIphoneIcon";

package/src/icons/components/PhoneLockedIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneLockedIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_locked"}/>
-}
+export const PhoneLockedIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_locked"} ref={ref}/>
+});
+
+PhoneLockedIcon.displayName = "PhoneLockedIcon";

package/src/icons/components/PhoneMissedIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhoneMissedIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_missed"}/>
-}
+export const PhoneMissedIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_missed"} ref={ref}/>
+});
+
+PhoneMissedIcon.displayName = "PhoneMissedIcon";

package/src/icons/components/PhonePausedIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhonePausedIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phone_paused"}/>
-}
+export const PhonePausedIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phone_paused"} ref={ref}/>
+});
+
+PhonePausedIcon.displayName = "PhonePausedIcon";

package/src/icons/components/PhonelinkEraseIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhonelinkEraseIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phonelink_erase"}/>
-}
+export const PhonelinkEraseIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phonelink_erase"} ref={ref}/>
+});
+
+PhonelinkEraseIcon.displayName = "PhonelinkEraseIcon";

package/src/icons/components/PhonelinkIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhonelinkIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phonelink"}/>
-}
+export const PhonelinkIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phonelink"} ref={ref}/>
+});
+
+PhonelinkIcon.displayName = "PhonelinkIcon";

package/src/icons/components/PhonelinkLockIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhonelinkLockIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phonelink_lock"}/>
-}
+export const PhonelinkLockIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phonelink_lock"} ref={ref}/>
+});
+
+PhonelinkLockIcon.displayName = "PhonelinkLockIcon";

package/src/icons/components/PhonelinkOffIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhonelinkOffIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phonelink_off"}/>
-}
+export const PhonelinkOffIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phonelink_off"} ref={ref}/>
+});
+
+PhonelinkOffIcon.displayName = "PhonelinkOffIcon";

package/src/icons/components/PhonelinkRingIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhonelinkRingIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phonelink_ring"}/>
-}
+export const PhonelinkRingIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phonelink_ring"} ref={ref}/>
+});
+
+PhonelinkRingIcon.displayName = "PhonelinkRingIcon";

package/src/icons/components/PhonelinkSetupIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhonelinkSetupIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"phonelink_setup"}/>
-}
+export const PhonelinkSetupIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"phonelink_setup"} ref={ref}/>
+});
+
+PhonelinkSetupIcon.displayName = "PhonelinkSetupIcon";

package/src/icons/components/PhotoAlbumIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoAlbumIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo_album"}/>
-}
+export const PhotoAlbumIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo_album"} ref={ref}/>
+});
+
+PhotoAlbumIcon.displayName = "PhotoAlbumIcon";

package/src/icons/components/PhotoCameraBackIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoCameraBackIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo_camera_back"}/>
-}
+export const PhotoCameraBackIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo_camera_back"} ref={ref}/>
+});
+
+PhotoCameraBackIcon.displayName = "PhotoCameraBackIcon";

package/src/icons/components/PhotoCameraFrontIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoCameraFrontIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo_camera_front"}/>
-}
+export const PhotoCameraFrontIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo_camera_front"} ref={ref}/>
+});
+
+PhotoCameraFrontIcon.displayName = "PhotoCameraFrontIcon";

package/src/icons/components/PhotoCameraIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoCameraIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo_camera"}/>
-}
+export const PhotoCameraIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo_camera"} ref={ref}/>
+});
+
+PhotoCameraIcon.displayName = "PhotoCameraIcon";

package/src/icons/components/PhotoFilterIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoFilterIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo_filter"}/>
-}
+export const PhotoFilterIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo_filter"} ref={ref}/>
+});
+
+PhotoFilterIcon.displayName = "PhotoFilterIcon";

package/src/icons/components/PhotoIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo"}/>
-}
+export const PhotoIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo"} ref={ref}/>
+});
+
+PhotoIcon.displayName = "PhotoIcon";

package/src/icons/components/PhotoLibraryIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoLibraryIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo_library"}/>
-}
+export const PhotoLibraryIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo_library"} ref={ref}/>
+});
+
+PhotoLibraryIcon.displayName = "PhotoLibraryIcon";

package/src/icons/components/PhotoSizeSelectActualIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoSizeSelectActualIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo_size_select_actual"}/>
-}
+export const PhotoSizeSelectActualIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo_size_select_actual"} ref={ref}/>
+});
+
+PhotoSizeSelectActualIcon.displayName = "PhotoSizeSelectActualIcon";

package/src/icons/components/PhotoSizeSelectLargeIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoSizeSelectLargeIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo_size_select_large"}/>
-}
+export const PhotoSizeSelectLargeIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo_size_select_large"} ref={ref}/>
+});
+
+PhotoSizeSelectLargeIcon.displayName = "PhotoSizeSelectLargeIcon";

package/src/icons/components/PhotoSizeSelectSmallIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhotoSizeSelectSmallIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"photo_size_select_small"}/>
-}
+export const PhotoSizeSelectSmallIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"photo_size_select_small"} ref={ref}/>
+});
+
+PhotoSizeSelectSmallIcon.displayName = "PhotoSizeSelectSmallIcon";

package/src/icons/components/PhpIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PhpIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"php"}/>
-}
+export const PhpIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"php"} ref={ref}/>
+});
+
+PhpIcon.displayName = "PhpIcon";

package/src/icons/components/PianoIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PianoIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"piano"}/>
-}
+export const PianoIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"piano"} ref={ref}/>
+});
+
+PianoIcon.displayName = "PianoIcon";

package/src/icons/components/PianoOffIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PianoOffIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"piano_off"}/>
-}
+export const PianoOffIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"piano_off"} ref={ref}/>
+});
+
+PianoOffIcon.displayName = "PianoOffIcon";

package/src/icons/components/PictureAsPdfIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PictureAsPdfIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"picture_as_pdf"}/>
-}
+export const PictureAsPdfIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"picture_as_pdf"} ref={ref}/>
+});
+
+PictureAsPdfIcon.displayName = "PictureAsPdfIcon";

package/src/icons/components/PictureInPictureAltIcon.tsx

@@ -3,6 +3,8 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function PictureInPictureAltIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"picture_in_picture_alt"}/>
-}
+export const PictureInPictureAltIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"picture_in_picture_alt"} ref={ref}/>
+});
+
+PictureInPictureAltIcon.displayName = "PictureInPictureAltIcon";