TypeScript error caused by typing update of FluentIconsProps

[chenxinyanc]

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.

[github-actions[bot]]

Export files validity

(Output of test script tests/github/exports-valid.js.)

Test the exported files of selected fixtures against the plugins' export tests. You can run a plugin's export tests by executing: $ node cli/run-export-test.js -p <plugin name> <fixtures>

:heavy_check_mark: eurolite / led-tha-60pc-rgbw-theater-spot: d-light / attributes-correctness

• :heavy_check_mark: eurolite/led-tha-60pc-rgbw-theater-spot-5ch.xml
• :heavy_check_mark: eurolite/led-tha-60pc-rgbw-theater-spot-6ch.xml
• :heavy_check_mark: eurolite/led-tha-60pc-rgbw-theater-spot-7ch.xml

:heavy_check_mark: eurolite / led-tha-60pc-rgbw-theater-spot: dmxcontrol3 / channel-numbers

• :heavy_check_mark: eurolite-led-tha-60pc-rgbw-theater-spot-5ch.xml
• :heavy_check_mark: eurolite-led-tha-60pc-rgbw-theater-spot-6ch.xml
• :heavy_check_mark: eurolite-led-tha-60pc-rgbw-theater-spot-7ch.xml

:heavy_check_mark: eurolite / led-tha-60pc-rgbw-theater-spot: dragonframe / json-schema-conformity

• :heavy_check_mark: eurolite/led-tha-60pc-rgbw-theater-spot.json
• :heavy_check_mark: manufacturers.json

:heavy_check_mark: eurolite / led-tha-60pc-rgbw-theater-spot: millumin / json-schema-conformity

• :heavy_check_mark: eurolite/led-tha-60pc-rgbw-theater-spot.json

:heavy_check_mark: eurolite / led-tha-60pc-rgbw-theater-spot: qlcplus_4.12.2 / fixture-tool-validation

• :heavy_check_mark: fixtures/Eurolite-LED-THA-60PC-RGBW-Theater-Spot.qxf

:heavy_check_mark: eurolite / led-tha-60pc-rgbw-theater-spot: qlcplus_4.12.2 / xsd-schema-conformity

• :heavy_check_mark: fixtures/Eurolite-LED-THA-60PC-RGBW-Theater-Spot.qxf