TypeScript error caused by typing update of FluentIconsProps

[Xinyan Chen]

CodeSandbox: https://codesandbox.io/s/fluent-ui-v9-icon-api-test-7xwkxx?file=/example.tsx

Code to reproduce

export const DocumentTextClock = wrapIcon(
  (p) => (
    <svg
      {...p}
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
    {/* ... */}
    </svg>
  ),
  // ...
);

tsc error

Type '{ children: Element; width: string; height: string; viewBox: string; fill: string; xmlns: string; className?: string; color?: string; id?: string; lang?: string; max?: string | number; media?: string; ... 461 more ...; title?: string; }' is not assignable to type 'SVGProps<SVGSVGElement>'.
  Types of property 'ref' are incompatible.
    Type 'Ref<HTMLElement>' is not assignable to type 'LegacyRef<SVGSVGElement>'.
      Type '(instance: HTMLElement) => void' is not assignable to type 'LegacyRef<SVGSVGElement>'.
        Type '(instance: HTMLElement) => void' is not assignable to type '(instance: SVGSVGElement) => void'.
          Types of parameters 'instance' and 'instance' are incompatible.
            Type 'SVGSVGElement' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 20 more.ts(2322)

I'm not sure whether I've been using wrapIcon correctly, but the error is gone if I downgrade @fluentui/react-icons to 2.0.203.

[Shaohao]

+1 on that. It could relate to this PR: #583

[Tomi Olubeko]

It might be helpful to switch from wrapIcon to createFluentIcon. The typing change is picked up if you use that utility function instead of wrapIcon. There is also future plans to deprecate wrapIcon, socreateFluentIcon will be the norm. You can use it like so:

export const DocumentTextClock = createFluentIcon(
 ' DocumentTextClock',
'1em',
[...`path`]
);

[Xinyan Chen]

It might be helpful to switch from wrapIcon to createFluentIcon.

Thanks for the suggestion, @tomi-msft ! However, it seems createFluentIcon has not been exported yet. I'm on @fluentui/react-icons v2.0.211 .

[Xinyan Chen]

@tomi-msft I've checked the function signature of createFluentIcon but I'm honestly not sure whether we are able to take this change

We used to copy the SVG icon source code from Figma and simply paste the SVG code to our TSX files before wrapping them with wrapIcon calls. The new function signature forces us to expand the SVG paths into several arrays, which is rather tedious and error-prone. Is there any practical guidance on this?

I'm asking this question because we are blocked from upgrading @fluentui/react-components package unless we upgrade @fluentui/react-icons. But we cannot upgrade @fluentui/react-icons because we depend on wrapIcon function.

[Xinyan Chen]

It seems there is no choice for us but to patch the package. To keep a record of this, here is the current patch I'm using

diff --git a/lib/index.d.ts b/lib/index.d.ts
index 54231851e2a1b91a5bbf3f2c40c056b46185e961..ec7b2c83a883df4a1fb89768e0171e007c2c051e 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -23,5 +23,6 @@ export { default as wrapIcon } from './utils/wrapIcon';
 export { default as bundleIcon } from './utils/bundleIcon';
 export * from './utils/useIconState';
 export * from './utils/constants';
+export * from './utils/createFluentIcon';
 export { IconDirectionContextProvider, useIconContext } from './contexts/index';
 export type { IconDirectionContextValue } from './contexts/index';
diff --git a/lib/index.js b/lib/index.js
index f825f8d11d39e0efd4367dba3ee82d22e2f6f99c..d2cb85ada4123da57d2d6fe8e43e2fc541b9cf83 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -22,4 +22,5 @@ export { default as wrapIcon } from './utils/wrapIcon';
 export { default as bundleIcon } from './utils/bundleIcon';
 export * from './utils/useIconState';
 export * from './utils/constants';
+export * from './utils/createFluentIcon';
 export { IconDirectionContextProvider, useIconContext } from './contexts/index';
\ No newline at end of file
diff --git a/lib/utils/FluentIconsProps.types.d.ts b/lib/utils/FluentIconsProps.types.d.ts
index 080864d945f79bcd318e768a95127d3d9a1354ac..fec4ff5419b9b5a97acf310cd494026f4aab5eea 100644
--- a/lib/utils/FluentIconsProps.types.d.ts
+++ b/lib/utils/FluentIconsProps.types.d.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare type FluentIconsProps<TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>> = TBaseAttributes & React.RefAttributes<HTMLElement> & {
+export declare type FluentIconsProps<TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>> = TBaseAttributes & {
     primaryFill?: string;
     className?: string;
     filled?: boolean;

For now our project was able to continue building without breaking any typings.

[Musyoka Muthangya]

I am trying to use createFluentIcon from an svg (also copied from figma) and I can't figure out where to place other properties of the path like fill

Is this API really ready for use with svgs? I haven't seen any docs for it so I could be missing something