refactor(Icon): migrate to ts

Author: artemmufazalov

src/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -2,7 +2,7 @@ import cn from 'bem-cn-lite';
 
 import EntityStatus from '../EntityStatus/EntityStatus';
 import {Tags} from '../Tags';
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 import './BasicNodeViewer.scss';
 

src/components/ClusterInfo/ClusterInfo.tsx

@@ -24,8 +24,7 @@ import {formatStorageValues} from '../../utils';
 //@ts-ignore
 import {TxAllocator} from '../../utils/constants';
 import {AutoFetcher} from '../../utils/autofetcher';
-//@ts-ignore
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 import {setHeader} from '../../store/reducers/header';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 

src/components/CopyToClipboard/CopyToClipboard.tsx

@@ -1,7 +1,6 @@
 import {Button, CopyToClipboard as CopyToClipboardUiKit} from '@gravity-ui/uikit';
 import createToast from '../../utils/createToast';
-//@ts-ignore
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 interface CopyToClipboardProps {
     text: string;

src/components/CriticalActionDialog/CriticalActionDialog.js

@@ -2,7 +2,7 @@ import {useState} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {Dialog} from '@gravity-ui/uikit';
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 import './CriticalActionDialog.scss';
 

src/components/EmptyState/EmptyState.tsx

@@ -1,7 +1,7 @@
 import {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
 
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 import './EmptyState.scss';
 

src/components/EnableFullscreenButton/EnableFullscreenButton.tsx

@@ -1,7 +1,7 @@
 import {Button} from '@gravity-ui/uikit';
 import {useDispatch} from 'react-redux';
 import {enableFullscreen} from '../../store/reducers/fullscreen';
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 interface EnableFullscreenButtonProps {
     disabled?: boolean;
@@ -13,7 +13,12 @@ function EnableFullscreenButton({disabled}: EnableFullscreenButtonProps) {
         dispatch(enableFullscreen());
     };
     return (
-        <Button onClick={onEnableFullscreen} view="flat-secondary" disabled={disabled} title='Fullscreen'>
+        <Button
+            onClick={onEnableFullscreen}
+            view="flat-secondary"
+            disabled={disabled}
+            title="Fullscreen"
+        >
             <Icon name="enableFullscreen" viewBox={'0 0 16 16'} height={16} width={16} />
         </Button>
     );

src/components/Fullscreen/Fullscreen.tsx

@@ -6,7 +6,7 @@ import cn from 'bem-cn-lite';
 
 import {useDispatch} from 'react-redux';
 import {disableFullscreen} from '../../store/reducers/fullscreen';
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 import './Fullscreen.scss';
 

src/components/Icon/Icon.js

@@ -0,0 +1,33 @@
+import {Icon as UiKitIcon} from '@gravity-ui/uikit';
+
+interface IconProps {
+    name: string;
+    height?: number | string;
+    width?: number | string;
+    viewBox?: string;
+    className?: string;
+    onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+}
+
+export const Icon = ({
+    name,
+    height = 16,
+    width = 16,
+    viewBox = '0 0 16 16',
+    className,
+    onClick,
+}: IconProps) => {
+    return (
+        <UiKitIcon
+            // @ts-expect-error
+            // Both url and id strings are required in this uikit component.
+            // However, if no url provided, component uses id, which is what we need.
+            // If it is fixed in uikit it could be safely removed
+            data={{id: `icon.${name}`, viewBox}}
+            height={height}
+            width={width}
+            className={className}
+            onClick={onClick}
+        />
+    );
+};

src/components/Icon/Icon.tsx

@@ -0,0 +1 @@
+export * from './Icon';