tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
https://heroicons.com
MIT License
21.03k stars 1.27k forks source link

Icon's React type is missing RefAttributes #937

Closed yangshun closed 1 year ago

yangshun commented 1 year ago

I believe the change in #903 is insufficient, it's missing React.RefAttributes<SVGSVGElement>. To demonstrate this, I recreated an Icon in tsx:

import * as React from 'react';

function AcademicCapIcon(
  {
    title,
    titleId,
    ...props
  }: React.ComponentProps<'svg'> & { title?: string; titleId?: string },
  svgRef: React.ForwardedRef<SVGSVGElement>,
) {
  return /*#__PURE__*/ React.createElement(
    'svg',
    Object.assign(
      {
        xmlns: 'http://www.w3.org/2000/svg',
        fill: 'none',
        viewBox: '0 0 24 24',
        strokeWidth: 1.5,
        stroke: 'currentColor',
        'aria-hidden': 'true',
        ref: svgRef,
        'aria-labelledby': titleId,
      },
      props,
    ),
    title
      ? /*#__PURE__*/ React.createElement(
          'title',
          {
            id: titleId,
          },
          title,
        )
      : null,
    /*#__PURE__*/ React.createElement('path', {
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      d: 'M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5',
    }),
  );
}

const ForwardRef = React.forwardRef(AcademicCapIcon);
export default ForwardRef;

and the inferred type is:

image

Change

The final output for the generated type should be as such:

import * as React from 'react';
- declare const AcademicCapIcon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & { title?: string, titleId?: string }>;
+ declare const AcademicCapIcon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & { title?: string, titleId?: string } & React.RefAttributes<SVGSVGElement>>;
export default AcademicCapIcon;
thecrypticace commented 1 year ago

Thanks for reporting this! Fixed in #966 and I've tagged and released as v2.0.17.

yangshun commented 1 year ago

Thanks for the fix @thecrypticace!