gromov/svg-sprites
1
0
Fork 0
mirror of https://github.com/gromlab-ru/svg-sprites.git synced 2026-07-22 04:40:17 +03:00
Code Issues Packages Projects Releases Wiki Activity

docs: обновить документацию generated-контракта

Browse Source 
- описаны единая конфигурация и exact modes
- обновлена структура .svg-sprite
- удалены материалы legacy pipeline
- синхронизированы русская и английская версии skill
This commit is contained in:
Сергей Громов
2026-07-13 20:07:42 +03:00
parent f4f464a568
commit 7992adc9d3
55 changed files with 618 additions and 2168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/ru/react-webpack.md
View File

@@ -19,6 +19,7 @@ src/ui/file-manager/svg-sprite/
├── icons/
│ ├── check.svg
│ └── folder.svg
├── index.ts
└── svg-sprite.config.ts
```
@@ -28,24 +29,32 @@ src/ui/file-manager/svg-sprite/
```ts
// src/ui/file-manager/svg-sprite/svg-sprite.config.ts
import { defineReactSpriteConfig } from '@gromlab/svg-sprites'
import { defineSpriteConfig } from '@gromlab/svg-sprites'
export default defineReactSpriteConfig({
export default defineSpriteConfig({
mode: 'react@webpack',
name: 'file-manager',
description: 'Иконки файлового менеджера',
})
```
Корневой barrel принадлежит приложению и явно возвращает generated API:
```ts
// src/ui/file-manager/svg-sprite/index.ts
export * from './.svg-sprite'
```
По умолчанию SVG берутся из `./icons`. Общие иконки из других папок можно добавить через `inputFiles`: папка и список объединяются в один спрайт.
Полный список опций находится в разделе [«Конфигурация React и Next.js»](reference.md#конфигурация-react-и-nextjs).
Полный список опций находится в разделе [«Единая конфигурация»](reference.md#единая-конфигурация).
## 4. Добавьте генерацию в package.json
```json
{
"scripts": {
"sprite:file-manager": "svg-sprites --mode react@webpack src/ui/file-manager/svg-sprite",
"sprite:file-manager": "svg-sprites src/ui/file-manager/svg-sprite/svg-sprite.config.ts",
"predev": "npm run sprite:file-manager",
"prebuild": "npm run sprite:file-manager",
"pretypecheck": "npm run sprite:file-manager"
@@ -87,7 +96,7 @@ Webpack обработает generated `new URL('./sprite.svg', import.meta.url)
Если проект уже использует собственный SVG loader, убедитесь, что он не перехватывает generated `sprite.svg` вместо Asset Modules.
Generated-компонент импортирует `styles.module.css`, поэтому Webpack должен обрабатывать CSS Modules через `css-loader` и `style-loader` либо `MiniCssExtractPlugin`. Если TypeScript-проект не содержит декларации для CSS Modules, добавьте её отдельно.
Generated-компонент импортирует `react/react-component.module.css`, поэтому Webpack должен обрабатывать CSS Modules через `css-loader` и `style-loader` либо `MiniCssExtractPlugin`. Если TypeScript-проект не содержит декларации для CSS Modules, добавьте её отдельно.
## 6. Добавьте debug-страницу
@@ -97,8 +106,8 @@ Webpack не поддерживает Vite API `import.meta.glob`, поэтом
import { SpriteViewer } from '@gromlab/svg-sprites/react'
const sources = [
() => import('./ui/file-manager/svg-sprite/manifest'),
() => import('./ui/navigation/svg-sprite/manifest'),
() => import('./ui/file-manager/svg-sprite/.svg-sprite/svg-sprite.manifest.js'),
() => import('./ui/navigation/svg-sprite/.svg-sprite/svg-sprite.manifest.js'),
]
export const IconsDebugPage = () => (
@@ -112,8 +121,8 @@ export const IconsDebugPage = () => (
## Если что-то не работает
- Нет `index.ts`: запустите `npm run sprite:file-manager`.
- Viewer не загружает спрайт: проверьте путь в `import()` и наличие `manifest.ts`.
- Нет `.svg-sprite/index.js`: запустите `npm run sprite:file-manager`.
- Viewer не загружает спрайт: проверьте путь в `import()` к `.svg-sprite/svg-sprite.manifest.js`.
- Неверный URL asset: проверьте `output.publicPath`.
- SVG перехватывает другой loader: исключите generated sprite из несовместимого правила.