Add ref forwarding and add util exports (#646)

microsoft · Sep 18, 2023 · f217d9d · f217d9d
1 parent efc3112
commit f217d9d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/react-icons/convert-font.js b/packages/react-icons/convert-font.js
@@ -72,6 +72,7 @@ async function processFiles(src, dest) {
   indexContents.push('export { FluentIconsProps } from \'../utils/FluentIconsProps.types\'');
   indexContents.push('export { default as wrapIcon } from \'../utils/wrapIcon\'');
   indexContents.push('export { default as bundleIcon } from \'../utils/bundleIcon\'');
+  indexContents.push('export { createFluentFontIcon } from \'../utils/fonts/createFluentFontIcon\'');
   indexContents.push('export * from \'../utils/useIconState\'');
   indexContents.push('export * from \'../utils/constants\'');
   indexContents.push('export { IconDirectionContextProvider, useIconContext } from \'../contexts/index\'');

diff --git a/packages/react-icons/convert.js b/packages/react-icons/convert.js
@@ -71,6 +71,7 @@ function processFiles(src, dest) {
   indexContents.push('export { FluentIconsProps } from \'./utils/FluentIconsProps.types\'');
   indexContents.push('export { default as wrapIcon } from \'./utils/wrapIcon\'');
   indexContents.push('export { default as bundleIcon } from \'./utils/bundleIcon\'');
+  indexContents.push('export { createFluentIcon } from \'./utils/createFluentIcon\'');
   indexContents.push('export * from \'./utils/useIconState\'');
   indexContents.push('export * from \'./utils/constants\'');
   indexContents.push('export { IconDirectionContextProvider, useIconContext } from \'./contexts/index\'');

diff --git a/packages/react-icons/src/utils/wrapIcon.tsx b/packages/react-icons/src/utils/wrapIcon.tsx
@@ -1,12 +1,16 @@
 import * as React from "react";
 import { FluentIconsProps } from "./FluentIconsProps.types";
 import { useIconState } from "./useIconState";
+import { CreateFluentIconOptions, FluentIcon } from "./createFluentIcon";
 
-const wrapIcon = (Icon: (iconProps: FluentIconsProps) => JSX.Element, displayName?: string) => {
-    const WrappedIcon = (props: FluentIconsProps) => { 
-        const state = useIconState(props);
+const wrapIcon = (Icon: (iconProps: FluentIconsProps) => JSX.Element, displayName?: string, options?: CreateFluentIconOptions) => {
+    const WrappedIcon = React.forwardRef((props: FluentIconsProps, ref: React.Ref<HTMLElement>) => { 
+        const state = {
+            ...useIconState(props, { flipInRtl: options?.flipInRtl }),
+            ref
+        };
         return <Icon {...state} />
-    }
+    }) as FluentIcon
     WrappedIcon.displayName = displayName;
     return WrappedIcon;
 }