fix: replace local icons with gravity ui icons and disable icons export

gravity-ui · Feb 28, 2024 · 1271ede · 1271ede
1 parent 9c06ac2
commit 1271ede
Show file tree

Hide file tree

Showing 30 changed files with 46 additions and 310 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -118,7 +118,7 @@
     "@commitlint/config-conventional": "^17.1.0",
     "@diplodoc/transform": "^4.10.4",
     "@gravity-ui/eslint-config": "^2.0.0",
-    "@gravity-ui/icons": "^2.1.0",
+    "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",

diff --git a/src/components/BackLink/BackLink.tsx b/src/components/BackLink/BackLink.tsx
@@ -1,10 +1,10 @@
 import React, {HTMLProps, ReactNode, useCallback, useContext} from 'react';
 
+import {ArrowLeft} from '@gravity-ui/icons';
 import {Button, ButtonSize, Icon} from '@gravity-ui/uikit';
 
 import {LocationContext} from '../../context/locationContext';
 import {useAnalytics} from '../../hooks';
-import {ArrowSidebar} from '../../icons';
 import {DefaultEventNames, Tabbable} from '../../models';
 
 export type Theme = 'default' | 'special';
@@ -63,7 +63,7 @@ export default function BackLink(props: BackLinkProps) {
             tabIndex={tabIndex}
             extraProps={extraProps}
         >
-            <Icon data={ArrowSidebar} size={24} />
+            <Icon data={ArrowLeft} size={20} />
             <span>{title}</span>
         </Button>
     );

diff --git a/src/components/FullscreenImage/FullscreenImage.tsx b/src/components/FullscreenImage/FullscreenImage.tsx
@@ -1,8 +1,8 @@
 import React, {CSSProperties, HTMLProps, useState} from 'react';
 
+import {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons';
 import {Icon, Modal} from '@gravity-ui/uikit';
 
-import {Fullscreen, PreviewClose} from '../../icons';
 import {block} from '../../utils';
 import Image, {ImageProps} from '../Image/Image';
 
@@ -19,7 +19,7 @@ export interface FullscreenImageProps extends ImageProps {
 
 const b = block('fullscreen-image');
 const FULL_SCREEN_ICON_SIZE = 18;
-const CLOSE_ICON_SIZE = 30;
+const CLOSE_ICON_SIZE = 24;
 
 const FullscreenImage = (props: FullscreenImageProps) => {
     const {imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt'), extraProps} = props;
@@ -40,7 +40,7 @@ const FullscreenImage = (props: FullscreenImageProps) => {
                 />
                 <button className={b('icon-wrapper')} onClick={openModal}>
                     <Icon
-                        data={Fullscreen}
+                        data={ChevronsExpandUpRight}
                         width={FULL_SCREEN_ICON_SIZE}
                         height={FULL_SCREEN_ICON_SIZE}
                         className={b('icon')}
@@ -56,7 +56,7 @@ const FullscreenImage = (props: FullscreenImageProps) => {
                             aria-label={i18n('close')}
                         >
                             <Icon
-                                data={PreviewClose}
+                                data={Xmark}
                                 width={CLOSE_ICON_SIZE}
                                 height={CLOSE_ICON_SIZE}
                                 className={b('icon', {hover: true})}

diff --git a/src/components/FullscreenMedia/FullscreenMedia.tsx b/src/components/FullscreenMedia/FullscreenMedia.tsx
@@ -1,9 +1,9 @@
 import React, {useContext, useState} from 'react';
 
+import {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons';
 import {Button, Icon, Modal} from '@gravity-ui/uikit';
 
 import {MobileContext} from '../../context/mobileContext';
-import {Fullscreen, PreviewClose} from '../../icons';
 import {block} from '../../utils';
 import {MediaAllProps} from '../Media/Media';
 
@@ -27,7 +27,7 @@ export interface FullscreenMediaProps {
 
 const b = block('full-screen-media');
 const FULL_SCREEN_ICON_SIZE = 18;
-const CLOSE_ICON_SIZE = 30;
+const CLOSE_ICON_SIZE = 24;
 
 const getMediaClass = (type: string) => b('modal-media', {type});
 
@@ -56,7 +56,7 @@ const FullscreenMedia = ({children, showFullscreenIcon = true}: FullscreenMediaP
                         size={'l'}
                     >
                         <Icon
-                            data={Fullscreen}
+                            data={ChevronsExpandUpRight}
                             width={FULL_SCREEN_ICON_SIZE}
                             height={FULL_SCREEN_ICON_SIZE}
                             className={b('icon')}
@@ -73,7 +73,7 @@ const FullscreenMedia = ({children, showFullscreenIcon = true}: FullscreenMediaP
                             size={'l'}
                         >
                             <Icon
-                                data={PreviewClose}
+                                data={Xmark}
                                 width={CLOSE_ICON_SIZE}
                                 height={CLOSE_ICON_SIZE}
                                 className={b('icon', {hover: true})}

diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss
@@ -40,7 +40,7 @@ $block: '.#{$ns}link-block';
 
         &:hover {
             #{$root}__arrow {
-                transform: translateX(5px) rotate(-90deg);
+                transform: translateX(5px);
             }
         }
 
@@ -55,7 +55,6 @@ $block: '.#{$ns}link-block';
         position: relative;
         top: 2px;
         transition: transform 0.3s $ease-out-cubic;
-        transform: rotate(-90deg);
     }
 
     &_size {

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -1,11 +1,11 @@
 import React, {Fragment, useContext} from 'react';
 
+import {ChevronRight} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 
 import {LocaleContext} from '../../context/localeContext';
 import {LocationContext} from '../../context/locationContext';
 import {useAnalytics} from '../../hooks';
-import {Chevron} from '../../icons';
 import {
     ClassNameProps,
     DefaultEventNames,
@@ -115,7 +115,7 @@ const LinkBlock = (props: WithChildren<LinkFullProps>) => {
                                 {WORD_JOINER_SYM}
                                 <Icon
                                     className={b('arrow')}
-                                    data={Chevron}
+                                    data={ChevronRight}
                                     size={getArrowSize(textSize)}
                                 />
                             </Fragment>

diff --git a/src/components/ReactPlayer/CustomBarControls.tsx b/src/components/ReactPlayer/CustomBarControls.tsx
@@ -1,10 +1,8 @@
 import React, {useMemo} from 'react';
 
-import {Pause, Play, VolumeLow, VolumeXmark} from '@gravity-ui/icons';
+import {Pause, Play, VolumeFill, VolumeLow, VolumeXmark} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 
-import {Mute} from '../../icons/Mute';
-import {Unmute} from '../../icons/Unmute';
 import {ClassNameProps, CustomControlsOptions, CustomControlsType} from '../../models';
 import {block} from '../../utils';
 
@@ -24,11 +22,11 @@ const pauseIconsMap = {
     [CustomControlsType.WithPlayPauseButton]: Pause,
 };
 const muteIconsMap = {
-    [CustomControlsType.WithMuteButton]: Mute,
+    [CustomControlsType.WithMuteButton]: VolumeFill,
     [CustomControlsType.WithPlayPauseButton]: VolumeLow,
 };
 const unmuteIconsMap = {
-    [CustomControlsType.WithMuteButton]: Unmute,
+    [CustomControlsType.WithMuteButton]: VolumeXmark,
     [CustomControlsType.WithPlayPauseButton]: VolumeXmark,
 };
 

diff --git a/src/components/ReactPlayer/ReactPlayer.scss b/src/components/ReactPlayer/ReactPlayer.scss
@@ -51,7 +51,7 @@ $block: '.#{$ns}ReactPlayer';
     }
 
     &__icon {
-        margin-left: 6px;
+        margin-left: 2px;
     }
 
     &_controls_custom {

diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx
@@ -9,14 +9,14 @@ import React, {
     useState,
 } from 'react';
 
+import {PlayFill} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import ReactPlayer from 'react-player';
 
 import {MobileContext} from '../../context/mobileContext';
 import {VideoContext} from '../../context/videoContext';
 import {useAnalytics, useMount} from '../../hooks';
-import {PlayVideo} from '../../icons';
 import {
     AnalyticsEvent,
     ClassNameProps,
@@ -227,7 +227,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                     break;
                 case PlayButtonType.Default:
                 default:
-                    playButtonContent = <Icon className={b('icon')} data={PlayVideo} size={24} />;
+                    playButtonContent = <Icon className={b('icon')} data={PlayFill} size={24} />;
                     break;
             }
 

diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
@@ -70,6 +70,14 @@ $block: '.#{$ns}table';
                 border: 1px solid var(--g-color-text-hint);
             }
         }
+
+        &_tick {
+            stroke: var(--g-color-text-light-primary);
+
+            &_check {
+                stroke: var(--g-color-base-brand);
+            }
+        }
     }
 
     &__legend {

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
+import {Check, Minus} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 
 import {HTML, YFMWrapper} from '../';
-import {Minus, Tick} from '../../icons';
 import {ClassNameProps, Justify, LegendTableMarkerType, TableProps} from '../../models';
 import {block} from '../../utils';
 
@@ -63,7 +63,12 @@ export default class Table extends React.Component<TableProps & ClassNameProps>
                 aria-labelledby={getMarkerId(Number(cell))}
                 className={b('marker', {type, index: String(cell)})}
             >
-                {type === 'tick' ? <Icon data={Number(cell) === 1 ? Tick : Minus} /> : null}
+                {type === 'tick' ? (
+                    <Icon
+                        className={b('marker_tick', {check: Number(cell) === 1})}
+                        data={Number(cell) === 1 ? Check : Minus}
+                    />
+                ) : null}
             </div>
         );
     }

diff --git a/src/components/VideoBlock/VideoBlock.scss b/src/components/VideoBlock/VideoBlock.scss
@@ -46,6 +46,6 @@ $block: '.#{$ns}VideoBlock';
     }
 
     &__icon {
-        margin-left: 6px;
+        margin-left: 2px;
     }
 }
diff --git a/src/components/VideoBlock/VideoBlock.tsx b/src/components/VideoBlock/VideoBlock.tsx
@@ -1,11 +1,11 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 
+import {PlayFill} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import {v4 as uuidv4} from 'uuid';
 
 import {useAnalytics} from '../../hooks/useAnalytics';
-import {PlayVideo} from '../../icons';
 import {AnalyticsEventsBase, DefaultEventNames} from '../../models/common';
 import {block, getPageSearchParams} from '../../utils';
 import Image from '../Image/Image';
@@ -162,7 +162,7 @@ const VideoBlock = (props: VideoBlockProps) => {
                     />
                     {playButton || (
                         <button title="Play" className={b('button')}>
-                            <Icon className={b('icon')} data={PlayVideo} size={24} />
+                            <Icon className={b('icon')} data={PlayFill} size={24} />
                         </button>
                     )}
                 </div>

diff --git a/src/icons/ArrowConstructor.tsx b/src/icons/ArrowConstructor.tsx
diff --git a/src/icons/ArrowSidebar.tsx b/src/icons/ArrowSidebar.tsx
diff --git a/src/icons/Fullscreen.tsx b/src/icons/Fullscreen.tsx
diff --git a/src/icons/Minus.tsx b/src/icons/Minus.tsx
diff --git a/src/icons/Mute.tsx b/src/icons/Mute.tsx