feat: use gravity icons

src/components/FeedHeader/components/Controls/Controls.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 
 import {useAnalytics} from '@gravity-ui/page-constructor';
 import {Button, Icon, MobileProvider, Select} from '@gravity-ui/uikit';
+import {Bookmark} from '@gravity-ui/icons';
 
 import {DefaultGoalIds} from '../../../../constants';
 import {LikesContext} from '../../../../contexts/LikesContext';
 import {MobileContext} from '../../../../contexts/MobileContext';
 import {AnalyticsCounter} from '../../../../counters/utils';
 import {Keyset, i18n} from '../../../../i18n';
-import {Save} from '../../../../icons/Save';
 import {DefaultEventNames, FetchArgs, Query} from '../../../../models/common';
 import {block} from '../../../../utils/cn';
 import {Search} from '../../../Search/Search';
@@ -208,7 +208,7 @@ export const Controls = ({
                                 selected={savedOnly}
                             >
                                 <Icon
-                                    data={Save}
+                                    data={Bookmark}
                                     size={ICON_SIZE}
                                     className={b('icon', {savedOnly})}
                                 />

src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss

@@ -3,7 +3,7 @@
 
 $block: '.#{$namespace}feed-custom-switcher';
 
-$clearIconSize: 11px;
+$clearIconSize: 18px;
 
 #{$block} {
     $root: &;
@@ -39,7 +39,7 @@ $clearIconSize: 11px;
         .g-select-clear {
             width: $clearIconSize;
             height: $clearIconSize;
-            margin-right: 9px;
+            margin-right: 6px;
         }
     }
 

src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 
 import {Icon, SelectProps, useUniqId} from '@gravity-ui/uikit';
+import {ChevronDown, Xmark} from '@gravity-ui/icons';
 
-import {DropdownArrow} from '../../../../icons/DropdownArrow';
-import {Close} from '../../../../icons/Close';
 import {block} from '../../../../utils/cn';
 import {SelectItem} from '../Controls/Controls';
 
@@ -31,7 +30,6 @@ export type CustomSwitcherProps = {
     Pick<TriggerProps, 'id' | 'disabled' | 'type'>;
 
 const ICON_SIZE = 12;
-const CLEAR_ICON_SIZE = 11;
 
 export const CustomSwitcher = ({
     id,
@@ -80,17 +78,15 @@ export const CustomSwitcher = ({
             </div>
             {renderClear &&
                 renderClear({
-                    renderIcon: () => (
-                        <Icon data={Close} size={CLEAR_ICON_SIZE} className={b('clear')} />
-                    ),
+                    renderIcon: () => <Icon data={Xmark} className={b('clear')} />,
                 })}
             {hasCounter && (
                 <div className={b('custom-switcher-element', {counter: true})}>
                     {itemsNames.length}
                 </div>
             )}
             <div className={b('custom-switcher-element', {arrow: true})}>
-                <Icon data={DropdownArrow} size={ICON_SIZE} className={b('switcher-arrow')} />
+                <Icon data={ChevronDown} size={ICON_SIZE} className={b('switcher-arrow')} />
             </div>
         </div>
     );

src/components/PostInfo/components/ReadingTime.tsx

@@ -1,7 +1,7 @@
 import {Icon} from '@gravity-ui/uikit';
+import {Clock} from '@gravity-ui/icons';
 
 import {Keyset, i18n} from '../../../i18n';
-import {Time} from '../../../icons/Time';
 import {block} from '../../../utils/cn';
 
 import {QAProps} from '../../../models/common';
@@ -20,7 +20,7 @@ type ReadingTimeProps = QAProps & {
 export const ReadingTime = ({readingTime, size = 's', id, qa}: ReadingTimeProps) => (
     <div className={b('item', {size})} id={id} data-qa={qa}>
         <span className={b('icon')}>
-            <Icon data={Time} size={ICON_SIZE} className={b('icon-color')} />
+            <Icon data={Clock} size={ICON_SIZE} className={b('icon-color')} />
         </span>
         {i18n(Keyset.ContextReadingTime, {count: readingTime})}
     </div>

src/components/PostInfo/components/Save.tsx

@@ -2,16 +2,15 @@ import * as React from 'react';
 
 import {AnalyticsEventsProp, useAnalytics} from '@gravity-ui/page-constructor';
 import {Icon, useUniqId} from '@gravity-ui/uikit';
+import {Bookmark, BookmarkFill} from '@gravity-ui/icons';
 
 import {LikesContext} from '../../../contexts/LikesContext';
-import {Save as SaveIcon} from '../../../icons/Save';
-import {SaveFilled} from '../../../icons/SaveFilled';
 import {DefaultEventNames, QAProps} from '../../../models/common';
 import {block} from '../../../utils/cn';
 import {postLikeStatus} from '../../../utils/common';
+import {Keyset, i18n} from '../../../i18n';
 
 import '../PostInfo.scss';
-import {Keyset, i18n} from '../../../i18n';
 
 const ICON_SIZE = 16;
 
@@ -87,7 +86,7 @@ export const Save = ({
             <div className={b('content', {cursor: isLikeable, theme})}>
                 <span className={b('icon')}>
                     <Icon
-                        data={hasUserLike ? SaveFilled : SaveIcon}
+                        data={hasUserLike ? BookmarkFill : Bookmark}
                         size={ICON_SIZE}
                         className={b({filled: Boolean(hasUserLike)})}
                     />

src/components/PostInfo/components/Sharing.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 
 import {ShareLayoutDirection, SharePopover} from '@gravity-ui/components';
 import {AnalyticsEventsProp, useAnalytics} from '@gravity-ui/page-constructor';
+import {ArrowUpFromSquare} from '@gravity-ui/icons';
 
 import {MobileContext} from '../../../contexts/MobileContext';
 import {PostPageContext} from '../../../contexts/PostPageContext';
 import {RouterContext} from '../../../contexts/RouterContext';
 import {Keyset, i18n} from '../../../i18n';
-import {ShareArrowUp} from '../../../icons/ShareArrowUp';
 import {DefaultEventNames} from '../../../models/common';
 import {block} from '../../../utils/cn';
 import {getAbsolutePath} from '../../../utils/common';
@@ -43,7 +43,7 @@ export const Sharing = ({theme, analyticsEvents}: SharingProps) => {
                     useWebShareApi={isMobile}
                     direction={ShareLayoutDirection.Column}
                     buttonTitle={i18n(Keyset.ActionShare)}
-                    customIcon={ShareArrowUp}
+                    customIcon={ArrowUpFromSquare}
                     placement="bottom"
                     openByHover={false}
                     shareOptions={shareOptions}

src/components/Search/Search.scss

@@ -24,6 +24,10 @@ $block: '.#{$namespace}search';
         background: none;
         color: var(--g-color-text-hint);
         cursor: pointer;
+
+        &_close {
+            padding-right: 5px;
+        }
     }
 
     &__search-suggest {

src/components/Search/Search.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 
 import {Icon, TextInput} from '@gravity-ui/uikit';
+import {Magnifier, Xmark} from '@gravity-ui/icons';
 import lodashDebounce from 'lodash/debounce';
 
 import {useIsIPhone} from '../../hooks/useIsIPhone';
 import {Keyset, i18n} from '../../i18n';
-import {Close} from '../../icons/Close';
-import {SearchIcon} from '../../icons/SearchIcon';
 import {ClassNameProps} from '../../models/common';
 import {block} from '../../utils/cn';
 
@@ -28,7 +27,7 @@ interface SearchProps extends ClassNameProps {
 }
 
 const SEARCH_ICON_SIZE = 16;
-const CLOSE_ICON_SIZE = 12;
+const CLOSE_ICON_SIZE = 20;
 const AUTOFOCUS_TIMEOUT = 0;
 
 /**
@@ -66,7 +65,7 @@ export const Search = ({
     }, [autoFocus, inputRef, isIPhone]);
 
     const rightContent = React.useMemo(() => {
-        const iconData = value ? Close : SearchIcon;
+        const isClose = Boolean(value);
         const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;
 
         const handleClick = () => {
@@ -80,12 +79,12 @@ export const Search = ({
 
         return (
             <button
-                className={b('input-icon')}
+                className={b('input-icon', {close: isClose})}
                 onClick={handleClick}
                 aria-label={value ? i18n(Keyset.ClearAction) : undefined}
                 aria-hidden={!value}
             >
-                <Icon size={iconSize} data={iconData} />
+                <Icon size={iconSize} data={isClose ? Xmark : Magnifier} />
             </button>
         );
     }, [handleChange, onSubmit, value]);