fix(IconButton): infer addtional props from as prop (#2343)

docs/components/LanguageButton/LanguageButton.tsx

@@ -12,7 +12,7 @@ interface ButtonProps {
   [key: string]: any;
 }
 
-const LanguageButton = React.forwardRef((props: ButtonProps, ref) => {
+const LanguageButton = React.forwardRef((props: ButtonProps, ref: React.Ref<HTMLElement>) => {
   const router = useRouter();
   const { language, onChangeLanguage } = React.useContext(AppContext);
   const { className, ...rest } = props;

src/IconButton/IconButton.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button, { ButtonProps } from '../Button';
-import { useClassNames } from '../utils';
 import { IconProps } from '@rsuite/icons/lib/Icon';
+import { RsRefForwardingComponent } from '../@types/common';
+import { useClassNames } from '../utils';
+import Button, { ButtonProps } from '../Button';
 
 export interface IconButtonProps extends ButtonProps {
   /** Set the icon */
@@ -15,7 +16,12 @@ export interface IconButtonProps extends ButtonProps {
   placement?: 'left' | 'right';
 }
 
-const IconButton = React.forwardRef((props: IconButtonProps, ref) => {
+const IconButton: RsRefForwardingComponent<
+  typeof Button,
+  IconButtonProps & {
+    ref?: React.Ref<HTMLElement>;
+  }
+> = React.forwardRef((props: IconButtonProps, ref) => {
   const {
     icon,
     placement = 'left',

src/IconButton/test/IconButton.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import IconButton from '../IconButton';
+
+const Link = ({ to }: { to: string }) => <a href={to} />;
+
+const ref = React.createRef<HTMLButtonElement>();
+
+// Infer `as` component props
+<IconButton ref={ref} as={Link} to="/home" />;