@cloud-ru/uikit-product-site-header 1.2.2 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.3.0 (2026-02-17)
+
+
+### Features
+
+* **SITE-10702:** add icon for header menu items ([e4b57e1](https://github.com/cloud-ru-tech/uikit-product/commit/e4b57e19cd9d0647f158a4431d46c9cb83fa958f))
+
+
+
+
+
 ## 1.2.2 (2026-02-16)
 
 

package/dist/cjs/components/HeaderItems/HeaderItem.js

@@ -68,7 +68,7 @@ function HeaderItems({ linkItems, isMobileTabletView, activeLinkItemId }) {
     if (!linkItems || isMobileTabletView)
         return null;
     const isVisibleEmpty = visibleItems.length === 0;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.linkItemsContainer, styles_module_scss_1.default.hiddenRow), ref: hiddenRowElementRef, children: linkItems.map((linkItem, index) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.lastItemContainer, linkItem.className), ref: setItemElement(linkItem, index) }, linkItem.dataAttributes, { children: (0, jsx_runtime_1.jsx)(helperComponents_1.LinkItemHeader, { label: linkItem.label, target: linkItem.target, href: linkItem.href, onClick: linkItem.onClick }) }), linkItem.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.linkItemsContainer, {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.linkItemsContainer, styles_module_scss_1.default.hiddenRow), ref: hiddenRowElementRef, children: linkItems.map((linkItem, index) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.lastItemContainer, linkItem.className), ref: setItemElement(linkItem, index) }, linkItem.dataAttributes, { children: (0, jsx_runtime_1.jsx)(helperComponents_1.LinkItemHeader, { label: linkItem.label, target: linkItem.target, href: linkItem.href, onClick: linkItem.onClick, icon: linkItem.icon }) }), linkItem.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.linkItemsContainer, {
                     [styles_module_scss_1.default.linkItemsFirstViewContainer]: isVisibleEmpty,
-                }), children: [(isVisibleEmpty ? linkItems : visibleItems).map(linkItem => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.lastItemContainer, linkItem.className) }, linkItem.dataAttributes, { children: (0, jsx_runtime_1.jsx)(helperComponents_1.LinkItemHeader, { label: linkItem.label, href: linkItem.href, onClick: linkItem.onClick, active: activeLinkItemId === linkItem.id }) }), linkItem.id))), hiddenItems.length > 0 && (0, jsx_runtime_1.jsx)(helperComponents_1.MoreButton, { linkItemsArray: hiddenItems, activeItemId: activeLinkItemId })] })] }));
+                }), children: [(isVisibleEmpty ? linkItems : visibleItems).map(linkItem => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.lastItemContainer, linkItem.className) }, linkItem.dataAttributes, { children: (0, jsx_runtime_1.jsx)(helperComponents_1.LinkItemHeader, { label: linkItem.label, href: linkItem.href, onClick: linkItem.onClick, active: activeLinkItemId === linkItem.id, icon: linkItem.icon }) }), linkItem.id))), hiddenItems.length > 0 && (0, jsx_runtime_1.jsx)(helperComponents_1.MoreButton, { linkItemsArray: hiddenItems, activeItemId: activeLinkItemId })] })] }));
 }

package/dist/cjs/components/HeaderItems/types.d.ts

@@ -1,3 +1,4 @@
+import { IconProps } from '../../helperComponents/Icon';
 export type LinkItem = {
     /** id Элемента */
     id: string;
@@ -15,4 +16,6 @@ export type LinkItem = {
     dataAttributes?: {
         [key: string]: string;
     };
+    /** Иконка */
+    icon?: IconProps['icon'] | null;
 };

package/dist/cjs/helperComponents/Icon/Icon.d.ts

@@ -0,0 +1,15 @@
+import { JSXElementConstructor, ReactNode } from 'react';
+export type IconElement = JSXElementConstructor<{
+    size?: number;
+    className?: string;
+}>;
+export type IconProps = {
+    icon: ReactNode | IconElement | {
+        src: string;
+        alt?: string;
+    };
+    size: 's' | 'm' | 'l';
+    'data-test-id'?: string;
+    decor?: boolean;
+};
+export declare function Icon({ icon: Icon, size, 'data-test-id': dataTestId, decor }: IconProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/cjs/helperComponents/Icon/Icon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = Icon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const isElementConstructor = (icon) => typeof icon === 'object' && icon !== null && 'render' in icon;
+function Icon({ icon: Icon, size = 'm', 'data-test-id': dataTestId, decor }) {
+    const isIcon = isElementConstructor(Icon);
+    const isImg = !isIcon && typeof Icon === 'object' && Icon !== null && 'src' in Icon;
+    if (isIcon || isImg) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.icon, "data-size": size, "data-test-id": dataTestId, "data-decor": decor || undefined, children: [isIcon && (0, jsx_runtime_1.jsx)(Icon, {}), isImg && (0, jsx_runtime_1.jsx)("img", { src: Icon.src, alt: Icon.alt })] }));
+    }
+    return Icon;
+}

package/dist/cjs/helperComponents/Icon/index.d.ts

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

package/dist/cjs/helperComponents/Icon/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Icon"), exports);

package/dist/cjs/helperComponents/Icon/styles.module.css

@@ -0,0 +1,45 @@
+.icon{
+  flex-shrink:0;
+  color:var(--sys-graphite-text-main, #222222);
+  position:relative;
+}
+.icon svg,
+.icon img{
+  width:100% !important;
+  height:100% !important;
+}
+.icon[data-decor]{
+  padding:8px;
+}
+.icon[data-decor] svg,
+.icon[data-decor] img{
+  position:absolute;
+  top:8px;
+  left:8px;
+  width:calc(100% - 2 * 8px) !important;
+  height:calc(100% - 2 * 8px) !important;
+}
+.icon[data-decor]:before{
+  position:absolute;
+  top:0;
+  left:0;
+  content:"";
+  display:block;
+  width:100%;
+  height:100%;
+  opacity:50%;
+  background-color:var(--sys-graphite-decor-default, #ececec);
+  border-radius:var(--radius-icon-predefined-decor-square-m, 4px);
+}
+.icon[data-size=s]{
+  height:16px;
+  width:16px;
+}
+.icon[data-size=m]{
+  height:24px;
+  width:24px;
+}
+.icon[data-size=l]{
+  height:48px;
+  width:48px;
+}

package/dist/cjs/helperComponents/LinkItemHeader/LinkItemHeader.d.ts

@@ -1,3 +1,4 @@
+import { IconProps } from '../Icon';
 type LinkItemHeaderProps = {
     href?: string;
     target?: string;
@@ -5,6 +6,7 @@ type LinkItemHeaderProps = {
     withoutHover?: boolean;
     active?: boolean;
     onClick?: () => void;
+    icon?: IconProps['icon'] | null;
 };
-export declare function LinkItemHeader({ href, label, onClick, withoutHover, target, active }: LinkItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkItemHeader({ href, label, onClick, withoutHover, target, active, icon }: LinkItemHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/LinkItemHeader/LinkItemHeader.js

@@ -7,13 +7,14 @@ exports.LinkItemHeader = LinkItemHeader;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const typography_1 = require("@snack-uikit/typography");
+const Icon_1 = require("../Icon");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function LinkItemHeader({ href, label, onClick, withoutHover, target, active }) {
+function LinkItemHeader({ href, label, onClick, withoutHover, target, active, icon }) {
     if (href) {
-        return ((0, jsx_runtime_1.jsx)("a", { href: href, target: target, onClick: onClick, className: styles_module_scss_1.default.item, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleS, { children: label }) }));
+        return ((0, jsx_runtime_1.jsxs)("a", { href: href, target: target, onClick: onClick, className: styles_module_scss_1.default.item, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleS, { children: label }), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon, size: 's' })] }));
     }
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, className: (0, classnames_1.default)(styles_module_scss_1.default.item, styles_module_scss_1.default.button, {
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: (0, classnames_1.default)(styles_module_scss_1.default.item, styles_module_scss_1.default.button, {
             [styles_module_scss_1.default.active]: active,
             [styles_module_scss_1.default.hovered]: !withoutHover && !active,
-        }), children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleS, { children: label }) }));
+        }), children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleS, { children: label }), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon, size: 's' })] }));
 }

package/dist/cjs/helperComponents/LinkItemHeader/styles.module.css

@@ -14,6 +14,9 @@
   color:var(--sys-graphite-accent-default, #222222);
   transition:color 0.3s ease-in-out;
   cursor:pointer;
+  display:flex;
+  align-items:center;
+  gap:var(--dimension-050m, 4px);
 }
 .item:hover{
   color:var(--sys-graphite-accent-hovered, #383838);

package/dist/cjs/helperComponents/MoreButton/MoreButton.js

@@ -25,5 +25,5 @@ function MoreButton({ linkItemsArray, activeItemId }) {
                 }, item.className) }, item.dataAttributes, { children: (0, jsx_runtime_1.jsx)(LinkItemHeader_1.LinkItemHeader, { label: item.label, onClick: () => {
                         item.onClick && item.onClick();
                         onClickOpen();
-                    }, href: item.href, withoutHover: true }) }), item.id))) }), children: (0, jsx_runtime_1.jsx)("button", { className: styles_module_scss_1.default.button, onClick: onClickOpen, children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.MoreSVG, {}) }) }));
+                    }, href: item.href, icon: item.icon, withoutHover: true }) }), item.id))) }), children: (0, jsx_runtime_1.jsx)("button", { className: styles_module_scss_1.default.button, onClick: onClickOpen, children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.MoreSVG, {}) }) }));
 }

package/dist/esm/components/HeaderItems/HeaderItem.js

@@ -62,7 +62,7 @@ export function HeaderItems({ linkItems, isMobileTabletView, activeLinkItemId })
     if (!linkItems || isMobileTabletView)
         return null;
     const isVisibleEmpty = visibleItems.length === 0;
-    return (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { className: cn(styles.linkItemsContainer, styles.hiddenRow), ref: hiddenRowElementRef, children: linkItems.map((linkItem, index) => (_jsx("div", Object.assign({ className: cn(styles.lastItemContainer, linkItem.className), ref: setItemElement(linkItem, index) }, linkItem.dataAttributes, { children: _jsx(LinkItemHeader, { label: linkItem.label, target: linkItem.target, href: linkItem.href, onClick: linkItem.onClick }) }), linkItem.id))) }), _jsxs("div", { className: cn(styles.linkItemsContainer, {
+    return (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { className: cn(styles.linkItemsContainer, styles.hiddenRow), ref: hiddenRowElementRef, children: linkItems.map((linkItem, index) => (_jsx("div", Object.assign({ className: cn(styles.lastItemContainer, linkItem.className), ref: setItemElement(linkItem, index) }, linkItem.dataAttributes, { children: _jsx(LinkItemHeader, { label: linkItem.label, target: linkItem.target, href: linkItem.href, onClick: linkItem.onClick, icon: linkItem.icon }) }), linkItem.id))) }), _jsxs("div", { className: cn(styles.linkItemsContainer, {
                     [styles.linkItemsFirstViewContainer]: isVisibleEmpty,
-                }), children: [(isVisibleEmpty ? linkItems : visibleItems).map(linkItem => (_jsx("div", Object.assign({ className: cn(styles.lastItemContainer, linkItem.className) }, linkItem.dataAttributes, { children: _jsx(LinkItemHeader, { label: linkItem.label, href: linkItem.href, onClick: linkItem.onClick, active: activeLinkItemId === linkItem.id }) }), linkItem.id))), hiddenItems.length > 0 && _jsx(MoreButton, { linkItemsArray: hiddenItems, activeItemId: activeLinkItemId })] })] }));
+                }), children: [(isVisibleEmpty ? linkItems : visibleItems).map(linkItem => (_jsx("div", Object.assign({ className: cn(styles.lastItemContainer, linkItem.className) }, linkItem.dataAttributes, { children: _jsx(LinkItemHeader, { label: linkItem.label, href: linkItem.href, onClick: linkItem.onClick, active: activeLinkItemId === linkItem.id, icon: linkItem.icon }) }), linkItem.id))), hiddenItems.length > 0 && _jsx(MoreButton, { linkItemsArray: hiddenItems, activeItemId: activeLinkItemId })] })] }));
 }

package/dist/esm/components/HeaderItems/types.d.ts

@@ -1,3 +1,4 @@
+import { IconProps } from '../../helperComponents/Icon';
 export type LinkItem = {
     /** id Элемента */
     id: string;
@@ -15,4 +16,6 @@ export type LinkItem = {
     dataAttributes?: {
         [key: string]: string;
     };
+    /** Иконка */
+    icon?: IconProps['icon'] | null;
 };

package/dist/esm/helperComponents/Icon/Icon.d.ts

@@ -0,0 +1,15 @@
+import { JSXElementConstructor, ReactNode } from 'react';
+export type IconElement = JSXElementConstructor<{
+    size?: number;
+    className?: string;
+}>;
+export type IconProps = {
+    icon: ReactNode | IconElement | {
+        src: string;
+        alt?: string;
+    };
+    size: 's' | 'm' | 'l';
+    'data-test-id'?: string;
+    decor?: boolean;
+};
+export declare function Icon({ icon: Icon, size, 'data-test-id': dataTestId, decor }: IconProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/esm/helperComponents/Icon/Icon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './styles.module.css';
+const isElementConstructor = (icon) => typeof icon === 'object' && icon !== null && 'render' in icon;
+export function Icon({ icon: Icon, size = 'm', 'data-test-id': dataTestId, decor }) {
+    const isIcon = isElementConstructor(Icon);
+    const isImg = !isIcon && typeof Icon === 'object' && Icon !== null && 'src' in Icon;
+    if (isIcon || isImg) {
+        return (_jsxs("div", { className: styles.icon, "data-size": size, "data-test-id": dataTestId, "data-decor": decor || undefined, children: [isIcon && _jsx(Icon, {}), isImg && _jsx("img", { src: Icon.src, alt: Icon.alt })] }));
+    }
+    return Icon;
+}

package/dist/esm/helperComponents/Icon/index.d.ts

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

package/dist/esm/helperComponents/Icon/index.js

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

package/dist/esm/helperComponents/Icon/styles.module.css

@@ -0,0 +1,45 @@
+.icon{
+  flex-shrink:0;
+  color:var(--sys-graphite-text-main, #222222);
+  position:relative;
+}
+.icon svg,
+.icon img{
+  width:100% !important;
+  height:100% !important;
+}
+.icon[data-decor]{
+  padding:8px;
+}
+.icon[data-decor] svg,
+.icon[data-decor] img{
+  position:absolute;
+  top:8px;
+  left:8px;
+  width:calc(100% - 2 * 8px) !important;
+  height:calc(100% - 2 * 8px) !important;
+}
+.icon[data-decor]:before{
+  position:absolute;
+  top:0;
+  left:0;
+  content:"";
+  display:block;
+  width:100%;
+  height:100%;
+  opacity:50%;
+  background-color:var(--sys-graphite-decor-default, #ececec);
+  border-radius:var(--radius-icon-predefined-decor-square-m, 4px);
+}
+.icon[data-size=s]{
+  height:16px;
+  width:16px;
+}
+.icon[data-size=m]{
+  height:24px;
+  width:24px;
+}
+.icon[data-size=l]{
+  height:48px;
+  width:48px;
+}

package/dist/esm/helperComponents/LinkItemHeader/LinkItemHeader.d.ts

@@ -1,3 +1,4 @@
+import { IconProps } from '../Icon';
 type LinkItemHeaderProps = {
     href?: string;
     target?: string;
@@ -5,6 +6,7 @@ type LinkItemHeaderProps = {
     withoutHover?: boolean;
     active?: boolean;
     onClick?: () => void;
+    icon?: IconProps['icon'] | null;
 };
-export declare function LinkItemHeader({ href, label, onClick, withoutHover, target, active }: LinkItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkItemHeader({ href, label, onClick, withoutHover, target, active, icon }: LinkItemHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/helperComponents/LinkItemHeader/LinkItemHeader.js

@@ -1,13 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { Typography } from '@snack-uikit/typography';
+import { Icon } from '../Icon';
 import styles from './styles.module.css';
-export function LinkItemHeader({ href, label, onClick, withoutHover, target, active }) {
+export function LinkItemHeader({ href, label, onClick, withoutHover, target, active, icon }) {
     if (href) {
-        return (_jsx("a", { href: href, target: target, onClick: onClick, className: styles.item, children: _jsx(Typography.SansTitleS, { children: label }) }));
+        return (_jsxs("a", { href: href, target: target, onClick: onClick, className: styles.item, children: [_jsx(Typography.SansTitleS, { children: label }), icon && _jsx(Icon, { icon: icon, size: 's' })] }));
     }
-    return (_jsx("button", { onClick: onClick, className: cn(styles.item, styles.button, {
+    return (_jsxs("button", { onClick: onClick, className: cn(styles.item, styles.button, {
             [styles.active]: active,
             [styles.hovered]: !withoutHover && !active,
-        }), children: _jsx(Typography.SansTitleS, { children: label }) }));
+        }), children: [_jsx(Typography.SansTitleS, { children: label }), icon && _jsx(Icon, { icon: icon, size: 's' })] }));
 }

package/dist/esm/helperComponents/LinkItemHeader/styles.module.css

@@ -14,6 +14,9 @@
   color:var(--sys-graphite-accent-default, #222222);
   transition:color 0.3s ease-in-out;
   cursor:pointer;
+  display:flex;
+  align-items:center;
+  gap:var(--dimension-050m, 4px);
 }
 .item:hover{
   color:var(--sys-graphite-accent-hovered, #383838);

package/dist/esm/helperComponents/MoreButton/MoreButton.js

@@ -19,5 +19,5 @@ export function MoreButton({ linkItemsArray, activeItemId }) {
                 }, item.className) }, item.dataAttributes, { children: _jsx(LinkItemHeader, { label: item.label, onClick: () => {
                         item.onClick && item.onClick();
                         onClickOpen();
-                    }, href: item.href, withoutHover: true }) }), item.id))) }), children: _jsx("button", { className: styles.button, onClick: onClickOpen, children: _jsx(MoreSVG, {}) }) }));
+                    }, href: item.href, icon: item.icon, withoutHover: true }) }), item.id))) }), children: _jsx("button", { className: styles.button, onClick: onClickOpen, children: _jsx(MoreSVG, {}) }) }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-header",
   "title": "Siteheader",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -52,5 +52,5 @@
   "peerDependencies": {
     "@cloud-ru/figma-tokens-web": "*"
   },
-  "gitHead": "2c5f4aadeb5beac7a522f3183a7250dc20d6f9a9"
+  "gitHead": "8e8439e29e7ea98e2a1ca8f02c39f7ac50f4e156"
 }

package/src/components/HeaderItems/HeaderItem.tsx

@@ -101,6 +101,7 @@ export function HeaderItems({ linkItems, isMobileTabletView, activeLinkItemId }:
               target={linkItem.target}
               href={linkItem.href}
               onClick={linkItem.onClick}
+              icon={linkItem.icon}
             />
           </div>
         ))}
@@ -122,6 +123,7 @@ export function HeaderItems({ linkItems, isMobileTabletView, activeLinkItemId }:
               href={linkItem.href}
               onClick={linkItem.onClick}
               active={activeLinkItemId === linkItem.id}
+              icon={linkItem.icon}
             />
           </div>
         ))}

package/src/components/HeaderItems/types.ts

@@ -1,3 +1,5 @@
+import { IconProps } from '../../helperComponents/Icon';
+
 export type LinkItem = {
   /** id Элемента */
   id: string;
@@ -15,4 +17,6 @@ export type LinkItem = {
   dataAttributes?: {
     [key: string]: string;
   };
+  /** Иконка */
+  icon?: IconProps['icon'] | null;
 };

package/src/helperComponents/Icon/Icon.tsx

@@ -0,0 +1,31 @@
+import { JSXElementConstructor, ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+export type IconElement = JSXElementConstructor<{ size?: number; className?: string }>;
+
+export type IconProps = {
+  icon: ReactNode | IconElement | { src: string; alt?: string };
+  size: 's' | 'm' | 'l';
+  'data-test-id'?: string;
+  decor?: boolean;
+};
+
+const isElementConstructor = (icon: IconProps['icon']): icon is IconElement =>
+  typeof icon === 'object' && icon !== null && 'render' in icon;
+
+export function Icon({ icon: Icon, size = 'm', 'data-test-id': dataTestId, decor }: IconProps) {
+  const isIcon = isElementConstructor(Icon);
+  const isImg = !isIcon && typeof Icon === 'object' && Icon !== null && 'src' in Icon;
+
+  if (isIcon || isImg) {
+    return (
+      <div className={styles.icon} data-size={size} data-test-id={dataTestId} data-decor={decor || undefined}>
+        {isIcon && <Icon />}
+        {isImg && <img src={Icon.src} alt={Icon.alt} />}
+      </div>
+    );
+  }
+
+  return Icon as ReactNode;
+}

package/src/helperComponents/Icon/index.ts

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

package/src/helperComponents/Icon/styles.module.scss

@@ -0,0 +1,56 @@
+@use '@cloud-ru/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+$decor-padding: 8px;
+
+.icon {
+  flex-shrink: 0;
+  color: ste.$sys-graphite-text-main;
+  position: relative;
+
+  svg,
+  img {
+    width: 100% !important; /* stylelint-disable-line declaration-no-important */
+    height: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  &[data-decor] {
+    padding: $decor-padding;
+
+    & svg,
+    img {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      width: calc(100% - 2 * #{$decor-padding}) !important; /* stylelint-disable-line declaration-no-important */
+      height: calc(100% - 2 * #{$decor-padding}) !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      opacity: 50%;
+      background-color: ste.$sys-graphite-decor-default;
+      border-radius: ste.$radius-icon-predefined-decor-square-m;
+    }
+  }
+
+  &[data-size='s'] {
+    height: 16px;
+    width: 16px;
+  }
+
+  &[data-size='m'] {
+    height: 24px;
+    width: 24px;
+  }
+
+  &[data-size='l'] {
+    height: 48px;
+    width: 48px;
+  }
+}

package/src/helperComponents/LinkItemHeader/LinkItemHeader.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames';
 
 import { Typography } from '@snack-uikit/typography';
 
+import { Icon, IconProps } from '../Icon';
 import styles from './styles.module.scss';
 
 type LinkItemHeaderProps = {
@@ -11,13 +12,15 @@ type LinkItemHeaderProps = {
   withoutHover?: boolean;
   active?: boolean;
   onClick?: () => void;
+  icon?: IconProps['icon'] | null;
 };
 
-export function LinkItemHeader({ href, label, onClick, withoutHover, target, active }: LinkItemHeaderProps) {
+export function LinkItemHeader({ href, label, onClick, withoutHover, target, active, icon }: LinkItemHeaderProps) {
   if (href) {
     return (
       <a href={href} target={target} onClick={onClick} className={styles.item}>
         <Typography.SansTitleS>{label}</Typography.SansTitleS>
+        {icon && <Icon icon={icon} size='s' />}
       </a>
     );
   }
@@ -31,6 +34,7 @@ export function LinkItemHeader({ href, label, onClick, withoutHover, target, act
       })}
     >
       <Typography.SansTitleS>{label}</Typography.SansTitleS>
+      {icon && <Icon icon={icon} size='s' />}
     </button>
   );
 }

package/src/helperComponents/LinkItemHeader/styles.module.scss

@@ -18,6 +18,9 @@
   color: ste.$sys-graphite-accent-default;
   transition: color 0.3s ease-in-out;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: ste.$dimension-050m;
 
   &:hover {
     color: ste.$sys-graphite-accent-hovered;

package/src/helperComponents/MoreButton/MoreButton.tsx

@@ -49,6 +49,7 @@ export function MoreButton({ linkItemsArray, activeItemId }: MoreButtonProps) {
                   onClickOpen();
                 }}
                 href={item.href}
+                icon={item.icon}
                 withoutHover
               />
             </div>