docs: обновить установку и команды генерации

- пакет указан как development dependency
- команды переведены на локальный CLI без npx
- удалены версионные ограничения Next.js
- синхронизированы английская и русская документация и skills
This commit is contained in:
2026-07-11 18:23:41 +03:00
parent b3a3a8347a
commit 1b5b446d8f
40 changed files with 468 additions and 430 deletions

View File

@@ -7,7 +7,7 @@
## 1. Установите пакет
```bash
npm install @gromlab/svg-sprites
npm install --save-dev @gromlab/svg-sprites
```
## 2. Подготовьте иконки и конфиг
@@ -37,10 +37,21 @@ export default defineLegacyConfig({
})
```
## 3. Запустите генерацию
## 3. Добавьте генерацию
```json
{
"scripts": {
"sprites": "svg-sprites --mode legacy .",
"prebuild": "npm run sprites"
}
}
```
Запустите локально установленный пакет через script:
```bash
npx svg-sprites --mode legacy .
npm run sprites
```
Результат:
@@ -61,17 +72,6 @@ public/sprites/
</svg>
```
## 5. Добавьте package script
```json
{
"scripts": {
"sprites": "svg-sprites --mode legacy .",
"prebuild": "npm run sprites"
}
}
```
## Несколько спрайтов
Добавьте несколько записей в `sprites`:

View File

@@ -4,13 +4,21 @@
Версия 1.0 разделяет локальную генерацию для React и Next.js и централизованный legacy-режим. Старый config нельзя смешивать с новым API в одном вызове CLI.
## Установка
Установите пакет как development dependency, чтобы миграция использовала версию из lockfile проекта:
```bash
npm install --save-dev @gromlab/svg-sprites
```
## CLI
CLI теперь всегда требует явный `--mode` и путь к каталогу конфигурации:
```text
svg-sprites
→ svg-sprites --mode <mode> <path>
"sprites": "svg-sprites"
"sprites": "svg-sprites --mode <mode> <path>"
```
Выберите mode по окружению:
@@ -40,6 +48,18 @@ export default defineNextSpriteConfig({
Для обычного React используйте `defineReactSpriteConfig`. Папку и явный список общих SVG можно объединить через `inputFolder` и `inputFiles`.
Добавьте локальный CLI с выбранным mode в `package.json`, например:
```json
{
"scripts": {
"sprite:global": "svg-sprites --mode next@app/turbopack src/ui/global/svg-sprite"
}
}
```
Запустите его командой `npm run sprite:global` до импорта generated-компонента.
Старые `publicPath` и `react` больше не нужны. Generated-модуль создаётся рядом с конфигом, сам добавляет `.gitignore`, а Vite, Webpack или Next.js выпускает SVG как отдельный asset с content hash.
Компонент `<SvgSprite icon="..." />` заменяется компонентом, имя которого выводится из `name`:
@@ -76,12 +96,18 @@ export default defineLegacyConfig({
- `loadConfig` заменён на `loadLegacyConfig`;
- `publicPath` и генерация старого общего React-компонента удалены.
Запуск:
Добавьте локальный CLI в `package.json`:
```bash
svg-sprites --mode legacy .
```json
{
"scripts": {
"sprites": "svg-sprites --mode legacy ."
}
}
```
Запустите его командой `npm run sprites`.
## Программный API
Пакет распространяется только как ESM. Замените `require()` на `import`.
@@ -90,7 +116,7 @@ svg-sprites --mode legacy .
## После миграции
1. Удалите старые generated-файлы и правила, которые игнорировали целиком каталог с исходными иконками.
2. Добавьте явную команду генерации перед `dev`, `build` и `typecheck`.
3. Запустите генерацию и проверку типов.
4. Проверьте все иконки и цветовые переменные через `SpriteViewer` или legacy `preview.html`.
1. Добавьте явную команду генерации перед `dev`, `build` и `typecheck`.
2. Создайте новый output и запустите проверку типов, пока старые artifacts остаются доступны.
3. Замените imports и проверьте иконки и цветовые переменные через `SpriteViewer` или legacy `preview.html`.
4. Только после этого удалите подтверждённые старые generated-файлы и устаревшие ignore rules, не затрагивая исходные SVG.

View File

@@ -4,15 +4,15 @@
Поддерживаются два явных режима:
| Сборщик | Mode key | Версия Next.js |
|---|---|---|
| Turbopack | `next@app/turbopack` | 16.2+ |
| Webpack 5 | `next@app/webpack` | 13.4+ |
| Сборщик | Mode key |
|---|---|
| Turbopack | `next@app/turbopack` |
| Webpack 5 | `next@app/webpack` |
## 1. Установите пакет
```bash
npm install @gromlab/svg-sprites
npm install --save-dev @gromlab/svg-sprites
```
## 2. Создайте sprite-модуль
@@ -49,7 +49,13 @@ export default defineNextSpriteConfig({
}
```
Для Webpack замените mode key на `next@app/webpack`. В Next 1315 Webpack используется обычной командой `next build`, в Next 16 — командой `next build --webpack`.
Для Webpack замените mode key на `next@app/webpack`.
До импорта generated-модуля выполните первую генерацию:
```bash
npm run sprite:file-manager
```
## 4. Используйте в Server Component
@@ -89,14 +95,10 @@ export default function SpritesPage() {
## Проверка сборщика
```bash
# Turbopack
npx next build --turbopack
Запустите build script проекта, настроенный на выбранный сборщик:
# Webpack 5
npx next build --webpack
```bash
npm run build
```
Для Next 1315 с Webpack используйте `npx next build` без флага.
Команда Next.js и mode key генератора должны указывать один и тот же сборщик.
Build script и mode key генератора должны указывать один и тот же сборщик.

View File

@@ -4,17 +4,15 @@
Поддерживаются два явных режима:
| Сборщик | Mode key | Версия Next.js |
|---|---|---|
| Turbopack | `next@pages/turbopack` | 16.2+ |
| Webpack 5 | `next@pages/webpack` | 12.2+ |
Для Next.js 12.2 требуется React 18.
| Сборщик | Mode key |
|---|---|
| Turbopack | `next@pages/turbopack` |
| Webpack 5 | `next@pages/webpack` |
## 1. Установите пакет
```bash
npm install @gromlab/svg-sprites
npm install --save-dev @gromlab/svg-sprites
```
## 2. Создайте sprite-модуль
@@ -49,7 +47,13 @@ export default defineNextSpriteConfig({
}
```
Для Next.js 16.2 с Turbopack замените mode key на `next@pages/turbopack`.
Для Turbopack замените mode key на `next@pages/turbopack`.
До импорта generated-модуля выполните первую генерацию:
```bash
npm run sprite:file-manager
```
## 4. Используйте на странице
@@ -83,14 +87,10 @@ export default function SpritesPage() {
## Проверка сборщика
```bash
# Turbopack
npx next build --turbopack
Запустите build script проекта, настроенный на выбранный сборщик:
# Webpack 5
npx next build --webpack
```bash
npm run build
```
Для Next 1215 с Webpack используйте `npx next build` без флага.
Команда Next.js и mode key генератора должны указывать один и тот же сборщик.
Build script и mode key генератора должны указывать один и тот же сборщик.

View File

@@ -9,7 +9,7 @@
## 1. Установите пакет
```bash
npm install @gromlab/svg-sprites
npm install --save-dev @gromlab/svg-sprites
```
## 2. Создайте папку спрайта

View File

@@ -9,7 +9,7 @@
## 1. Установите пакет
```bash
npm install @gromlab/svg-sprites
npm install --save-dev @gromlab/svg-sprites
```
## 2. Создайте папку спрайта