diff --git a/README.md b/README.md
index 50f422f..4d62677 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,21 @@
# @gromlab/svg-sprites
+
+ 
+
Генерация SVG-спрайтов из папок с иконками. TypeScript-типизация, SVG-трансформации, React-компонент и HTML-превью из коробки.

+**Чем отличается от аналогов:**
+
+- Генерирует готовый типизированный React-компонент — не нужно писать обёртку
+- Автоматически заменяет цвета на CSS-переменные — для тем и hover-состояний
+- Выдаёт HTML-превью всех иконок — удобно пересылать дизайнеру
+
+## Требования
+
+- Node.js 18+
+- React 18+ (опционально, только если нужен генерируемый компонент)
## Установка
@@ -22,12 +35,11 @@ export default defineConfig({
output: 'public/sprites',
// URL-путь к спрайтам (для href в React-компоненте)
- publicPath: '/public/sprites',
+ publicPath: '/sprites',
// Папка для React-компонента и типов
react: 'src/shared/ui/svg-sprite',
- // Массив спрайтов имя и откуда наполняем.
sprites: [
{ name: 'icons', input: 'src/assets/icons' },
{ name: 'logos', input: 'src/assets/logos' },
@@ -38,21 +50,13 @@ export default defineConfig({
Запустите генерацию:
```bash
+# или добавьте "sprite": "svg-sprites" в scripts вашего package.json
npx svg-sprites
```
-Результат:
+В результате будут сгенерированы SVG-спрайты, типизированный React-компонент и HTML-превью.
-```
-public/
- icons.sprite.svg
- logos.sprite.svg
- preview.html
-
-src/shared/ui/svg-sprite/
- svg-sprite.tsx
- svg-sprite.module.css
-```
+Цвета иконок автоматически заменяются на CSS-переменные — см. раздел [Управление цветом](#управление-цветом).
## Использование компонента
@@ -69,11 +73,20 @@ import { SvgSprite } from './shared/ui/svg-sprite'
```
-Компонент полностью типизирован — автодополнение работает для имён иконок и спрайтов.
+Компонент полностью типизирован — автодополнение работает для имён иконок и спрайтов. Типы экспортируются из того же модуля:
+
+```ts
+import type {
+ IconsIconName, // 'check' | 'arrow-left' | ...
+ LogosIconName, // 'github' | 'twitter' | ...
+ SpriteName, // 'icons' | 'logos'
+ SpriteMap, // { icons: IconsIconName, logos: LogosIconName }
+} from './shared/ui/svg-sprite'
+```
## Управление цветом
-При сборке цвета иконок заменяются на CSS-переменные.
+При сборке цвета иконок заменяются на CSS-переменные. Это ключевая фича — иконки адаптируются к теме без дублирования SVG.
**Моно-иконка** (один цвет) — наследует `color` текста:
@@ -96,19 +109,27 @@ import { SvgSprite } from './shared/ui/svg-sprite'
}
```
+## Способы рендера
+
+| Способ | Управление цветом | Пример |
+|--------|-------------------|--------|
+| React / SVG `