timur.gorodetskiy/tnsu-ui-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: перенос быстрой пачки компонентов 0.1.0

Browse Source
This commit is contained in:
Тимур Городецкий
2026-08-13 14:53:11 +05:00
parent f5637f8b2c
commit e65805379e
42 changed files with 1911 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Icon/Icon.module.scss
+22
View File
@@ -0,0 +1,22 @@
@import '../tokens/tokens';
.icon {
width: 20px;
height: 20px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.sm {
width: 16px;
height: 16px;
}
.lg {
width: 24px;
height: 24px;
}
src/Icon/Icon.tsx
+30
View File
@@ -0,0 +1,30 @@
import * as React from 'react';
import styles from './Icon.module.scss';
import { IconName } from './iconNames';
type IconSize = 'sm' | 'md' | 'lg';
interface IIconProps {
name: IconName;
size?: IconSize;
className?: string;
}
const sizeClass: Record<IconSize, string> = {
sm: styles.sm,
md: '',
lg: styles.lg
};
/**
* Иконка из общего спрайта. Спрайт (IconSprite) должен быть отрисован
* один раз в корне портала, иначе ссылки #i-<name> ничего не покажут.
*/
export const Icon: React.FC<IIconProps> = ({ name, size = 'md', className }) => {
const classes = [styles.icon, sizeClass[size], className].filter(Boolean).join(' ');
return (
<svg className={classes} aria-hidden="true" focusable="false">
<use href={`#i-${name}`} />
</svg>
);
};
src/Icon/IconSprite.tsx
+140
View File
@@ -0,0 +1,140 @@
import * as React from 'react';
/**
* Скрытый SVG-спрайт со всеми иконками портала.
* Рендерится один раз в корне (RequestPortal). Компонент Icon ссылается
* на символы по id `#i-<name>` (см. iconNames.ts).
*/
export const IconSprite: React.FC = () => (
<svg xmlns="http://www.w3.org/2000/svg" style={{ display: 'none' }} aria-hidden="true">
<symbol id="i-building" viewBox="0 0 24 24">
<path d="M3 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16" />
<path d="M13 21V9a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v12" />
<path d="M3 21h18" />
<rect x="7" y="7" width="2" height="2" rx=".5" fill="currentColor" stroke="none" />
<rect x="7" y="12" width="2" height="2" rx=".5" fill="currentColor" stroke="none" />
<rect x="16" y="11" width="2" height="2" rx=".5" fill="currentColor" stroke="none" />
</symbol>
<symbol id="i-chart" viewBox="0 0 24 24">
<rect x="3" y="12" width="4" height="9" rx="1" />
<rect x="10" y="7" width="4" height="14" rx="1" />
<rect x="17" y="3" width="4" height="18" rx="1" />
</symbol>
<symbol id="i-monitor" viewBox="0 0 24 24">
<rect x="2" y="4" width="20" height="13" rx="2" />
<path d="M8 21h8M12 17v4" />
</symbol>
<symbol id="i-helmet" viewBox="0 0 24 24">
<path d="M3 16a9 9 0 0 1 18 0" />
<path d="M2 16h20" />
<path d="M9 8V6a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
</symbol>
<symbol id="i-user-check" viewBox="0 0 24 24">
<circle cx="9" cy="7" r="4" />
<path d="M3 21v-1a5 5 0 0 1 5-5h3" />
<path d="M15 12l2.5 2.5L22 10" />
</symbol>
<symbol id="i-calculator" viewBox="0 0 24 24">
<rect x="4" y="2" width="16" height="20" rx="2" />
<path d="M8 6h8M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01M8 18h4" />
</symbol>
<symbol id="i-send" viewBox="0 0 24 24">
<path d="M22 2 11 13" />
<path d="m22 2-7 20-4-9-9-4z" />
</symbol>
<symbol id="i-download" viewBox="0 0 24 24">
<path d="M12 3v12m0 0-4-4m4 4 4-4" />
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
</symbol>
<symbol id="i-upload" viewBox="0 0 24 24">
<path d="M12 15V3m0 0-4 4m4-4 4 4" />
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
</symbol>
<symbol id="i-folder" viewBox="0 0 24 24">
<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
</symbol>
<symbol id="i-document" viewBox="0 0 24 24">
<path d="M6 3h8l5 5v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
<path d="M14 3v5h5" />
</symbol>
<symbol id="i-calendar" viewBox="0 0 24 24">
<rect x="3" y="4" width="18" height="17" rx="2" />
<path d="M3 9h18M8 2v4M16 2v4" />
</symbol>
<symbol id="i-clipboard" viewBox="0 0 24 24">
<path d="M9 3h6v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z" />
<rect x="5" y="5" width="14" height="16" rx="2" />
<path d="M9 12h6M9 16h4" />
</symbol>
<symbol id="i-people" viewBox="0 0 24 24">
<circle cx="9" cy="7" r="3" />
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
<circle cx="17" cy="8" r="2.5" />
<path d="M17 13.5a3.5 3.5 0 0 1 3.5 3.5v1" />
</symbol>
<symbol id="i-vehicle" viewBox="0 0 24 24">
<path d="M5 11l1.5-4.5A2 2 0 0 1 8.4 5h7.2a2 2 0 0 1 1.9 1.5L19 11" />
<rect x="3" y="11" width="18" height="7" rx="2" />
<circle cx="7.5" cy="15.5" r="1.5" fill="currentColor" stroke="none" />
<circle cx="16.5" cy="15.5" r="1.5" fill="currentColor" stroke="none" />
</symbol>
<symbol id="i-chat" viewBox="0 0 24 24">
<path d="M21 12a9 9 0 0 1-9 9 9 9 0 0 1-5.46-1.84L3 21l1.84-3.54A9 9 0 1 1 21 12z" />
</symbol>
<symbol id="i-camera" viewBox="0 0 24 24">
<path d="M3 8a2 2 0 0 1 2-2h2l1.5-2h7L17 6h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<circle cx="12" cy="13" r="4" />
</symbol>
<symbol id="i-image" viewBox="0 0 24 24">
<rect x="3" y="3" width="18" height="18" rx="2" />
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" stroke="none" />
<path d="m21 15-5-5L5 21" />
</symbol>
<symbol id="i-edit" viewBox="0 0 24 24">
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z" />
</symbol>
<symbol id="i-copy" viewBox="0 0 24 24">
<rect x="9" y="9" width="11" height="11" rx="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</symbol>
<symbol id="i-more" viewBox="0 0 24 24">
<circle cx="12" cy="5" r="1.5" fill="currentColor" stroke="none" />
<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" />
<circle cx="12" cy="19" r="1.5" fill="currentColor" stroke="none" />
</symbol>
<symbol id="i-trash" viewBox="0 0 24 24">
<path d="M4 7h16M10 11v6M14 11v6" />
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12" />
<path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
</symbol>
<symbol id="i-close" viewBox="0 0 24 24">
<path d="M18 6 6 18M6 6l12 12" />
</symbol>
<symbol id="i-chevron-right" viewBox="0 0 24 24">
<path d="m9 6 6 6-6 6" />
</symbol>
<symbol id="i-chevron-down" viewBox="0 0 24 24">
<path d="m6 9 6 6 6-6" />
</symbol>
<symbol id="i-chevron-left" viewBox="0 0 24 24">
<path d="m15 6-6 6 6 6" />
</symbol>
<symbol id="i-arrow-left" viewBox="0 0 24 24">
<path d="M19 12H5m0 0 5-5m-5 5 5 5" />
</symbol>
<symbol id="i-search" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="7" />
<path d="m21 21-4.35-4.35" />
</symbol>
<symbol id="i-warning" viewBox="0 0 24 24">
<path d="M12 2 1 21h22z" strokeLinejoin="round" />
<path d="M12 9v5M12 17h.01" />
</symbol>
<symbol id="i-check" viewBox="0 0 24 24">
<path d="M5 12l5 5L20 7" />
</symbol>
<symbol id="i-plus" viewBox="0 0 24 24">
<path d="M12 5v14M5 12h14" />
</symbol>
</svg>
);
src/Icon/iconNames.ts
+37
View File
@@ -0,0 +1,37 @@
// Единый набор имён иконок. Значение = id символа в спрайте (см. IconSprite).
// Добавляя иконку: 1) добавь имя сюда, 2) добавь <symbol> в IconSprite.
export const ICON_NAMES = [
'building',
'chart',
'monitor',
'calculator',
'helmet',
'user-check',
'send',
'download',
'upload',
'folder',
'document',
'calendar',
'clipboard',
'people',
'vehicle',
'chat',
'camera',
'image',
'edit',
'copy',
'more',
'trash',
'close',
'chevron-right',
'chevron-down',
'chevron-left',
'arrow-left',
'search',
'warning',
'check',
'plus'
] as const;
export type IconName = (typeof ICON_NAMES)[number];