diff --git a/README_RU.md b/README_RU.md
index a41fcdc..0fe049f 100644
--- a/README_RU.md
+++ b/README_RU.md
@@ -1,6 +1,6 @@
# @gromlab/svg-sprites
-[π¬π§ English](README.md) | π·πΊ Π ΡΡΡΠΊΠΈΠΉ
+[π¬π§ English](https://github.com/gromlab-ru/svg-sprites/blob/master/README.md) | π·πΊ Π ΡΡΡΠΊΠΈΠΉ
 
@@ -24,20 +24,6 @@
Π ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π΅ ΠΏΡΠΈΡ
ΠΎΠ΄ΠΈΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎ ΡΠΏΡΠ°ΠΉΡΠΎΠΌ Π½Π°ΠΏΡΡΠΌΡΡ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π΅Π³ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΡ SVG-ΠΈΠΊΠΎΠ½ΠΊΡ, Π½ΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, Π°Π²ΡΠΎΠΊΠΎΠΌΠΏΠ»ΠΈΡ ΠΈ TypeScript-ΠΏΡΠΎΠ²Π΅ΡΠΊΡ Π²ΡΠ΅Ρ
ΠΈΠΌΡΠ½.
-Π `standalone@vite` ΠΈ `standalone@webpack` ΡΠΎΡ ΠΆΠ΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π±Π΅Π· React:
-
-```ts
-import { defineAppIconElement } from './app-icons'
-
-defineAppIconElement()
-```
-
-```html
-
-```
-
-Bare `standalone` ΠΎΡΡΠ°ΡΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ SVG asset ΠΈ JSON manifest Π±Π΅Π· JavaScript runtime.
-
## AI-friendly ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
`@gromlab/svg-sprites` ΡΡΠ°Π·Ρ ΡΠ°ΡΡΡΠΈΡΠ°Π½ Π½Π° ΡΠ°Π±ΠΎΡΡ Ρ AI-Π°Π³Π΅Π½ΡΠ°ΠΌΠΈ. ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ Π³ΠΎΡΠΎΠ²ΡΠΉ skill ΠΈ ΠΏΠΎΡΡΡΠΈΡΠ΅ Π°Π³Π΅Π½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ, ΠΌΠΈΠ³ΡΠ°ΡΠΈΡ ΠΈΠ»ΠΈ Π΄ΠΈΠ°Π³Π½ΠΎΡΡΠΈΠΊΡ Π±Π΅Π· Π΄Π»ΠΈΠ½Π½ΡΡ
ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΉ ΠΈ ΡΡΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
@@ -46,61 +32,54 @@ Bare `standalone` ΠΎΡΡΠ°ΡΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅
[π¬π§ Π‘ΠΊΠ°ΡΠ°ΡΡ AI skill (Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ)](https://github.com/gromlab-ru/svg-sprites/releases/latest/download/svg-sprites.zip)
-## ΠΡ SVG Π΄ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π·Π° ΡΠ΅ΡΡΡΠ΅ ΡΠ°Π³Π°
+## ΠΡ SVG Π΄ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π·Π° ΡΡΠΈ ΡΠ°Π³Π°
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Next.js App Router ΠΈ Turbopack.
-### 1. ΠΠ΅Π½Π΅ΡΠΈΡΡΠΉΡΠ΅ Π±Π΅Π· ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ°
+### 1. Π£ΠΊΠ°ΠΆΠΈΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ
-```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites --help
-```
-
-`npx` Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅Ρ CLI, Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ `@gromlab/svg-sprites` Π²
-`package.json`, Π° generated production runtime Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ package.
-
-### 2. Π£ΠΊΠ°ΠΆΠΈΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ
-
-SVG ΠΌΠΎΠ³ΡΡ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΉ ΡΡΡΡΠΊΡΡΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΏΠ°ΠΏΠΊΠΈ Π΄Π»Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΡ
ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ ΡΠΏΡΠ°ΠΉΡΠ°:
```text
-src/
-βββ assets/icons/
-β βββ search.svg
-β βββ settings.svg
-βββ features/profile/
-β βββ user.svg
-βββ ui/app-icons/
- βββ svg-sprite.config.ts
+assets/
+βββ app-icons/
+β βββ svg-sprite.config.json
+βββ svg-icons/
+ βββ search.svg
+ βββ settings.svg
```
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°:
-```ts
-// src/ui/app-icons/svg-sprite.config.ts
-export default {
- mode: 'next@app/turbopack',
- name: 'app',
- input: [
- '../../assets/icons/search.svg',
- '../../assets/icons/settings.svg',
- '../../features/profile/user.svg',
- ],
+```json
+{
+ "mode": "next@app/turbopack",
+ "name": "app",
+ "input": "../svg-icons/**/*.svg"
}
```
-### 3. ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ
+`input` ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΡΠΈ ΠΊ ΠΏΠ°ΠΏΠΊΠ°ΠΌ, ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ SVG ΠΈ glob-ΡΠ°Π±Π»ΠΎΠ½Ρ.
+
+### 2. ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/ui/app-icons/svg-sprite.config.ts",
+ "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
"predev": "npm run sprites",
"prebuild": "npm run sprites"
}
}
```
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΊΡ Π²Ρ
ΠΎΠ΄Π° Π΄Π»Ρ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ API:
+
+```ts
+// assets/app-icons/index.ts
+export * from './.svg-sprite/index.js'
+```
+
ΠΠ΅ΡΠ²ΡΠΉ Π·Π°ΠΏΡΡΠΊ:
```bash
@@ -109,10 +88,11 @@ npm run sprites
ΠΠ°ΠΊΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ `AppIcon`, TypeScript-ΡΠΈΠΏΡ ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ SVG-ΡΠΏΡΠ°ΠΉΡ.
-### 4. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ
+### 3. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ
```tsx
-import { AppIcon } from '@/ui/app-icons'
+// app/page.tsx
+import { AppIcon } from '../assets/app-icons'
export default function SearchButton() {
return (
@@ -277,6 +257,7 @@ README Π·Π½Π°ΠΊΠΎΠΌΠΈΡ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ ΠΏΠΎΠΊΠ°
### Π’Π΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ
- [ΠΠ½Π΄Π΅ΠΊΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ](docs/ru/README.md)
+- [ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ](docs/ru/configuration.md)
- [Π’Π΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ](docs/ru/reference/technical.md)
- [ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ API](docs/ru/reference/programmatic-api.md)
diff --git a/docs/ru/README.md b/docs/ru/README.md
index e226abb..c68ddf5 100644
--- a/docs/ru/README.md
+++ b/docs/ru/README.md
@@ -3,6 +3,8 @@
ΠΠ»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ guide ΠΎΠ΄Π½ΠΎΠ³ΠΎ exact mode. ΠΠ°ΠΆΠ΄ΡΠΉ guide ΡΠ²Π»ΡΠ΅ΡΡΡ
ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΡΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² AI skills.
+ΠΠ±ΡΠΈΠΉ ΡΠΎΡΠΌΠ°Ρ JSON, JavaScript ΠΈ TypeScript config-ΡΠ°ΠΉΠ»ΠΎΠ² ΠΎΠΏΠΈΡΠ°Π½ Π² [ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΠΎ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ](configuration.md).
+
## ΠΠ°ΠΉΠ΄Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΡΠ°ΡΡΠ°
| ΠΡΠΎΠ΅ΠΊΡ | Exact mode | Guide |
@@ -20,10 +22,11 @@
ΠΡΠ΅ guides ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΡΡΠ΄ΠΎΠΊ:
1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ° ΡΠ΅ΡΠ΅Π· `npx` Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ package Π² ΠΏΡΠΎΠ΅ΠΊΡ.
-2. ΠΠ΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Viewer Π΄Π»Ρ Π΄Π΅Π±Π°Π³Π° ΠΈ ΠΏΡΠ΅Π²ΡΡ.
-3. ΠΠ΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½Π°Ρ ΡΠΈΠΏΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³Π° ΡΠ΅ΡΠ΅Π· package ΠΈΠ»ΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ copy-paste type.
+2. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ° Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
+3. ΠΠ΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Viewer Π΄Π»Ρ Π΄Π΅Π±Π°Π³Π° ΠΈ ΠΏΡΠ΅Π²ΡΡ.
## Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠΈ
+- [ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ](configuration.md)
- [Π’Π΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ](reference/technical.md)
- [ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ API](reference/programmatic-api.md)
diff --git a/docs/ru/configuration.md b/docs/ru/configuration.md
new file mode 100644
index 0000000..2a16704
--- /dev/null
+++ b/docs/ru/configuration.md
@@ -0,0 +1,99 @@
+# ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ
+
+ΠΠ°ΠΆΠ΄ΡΠΉ config-ΡΠ°ΠΉΠ» ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΎΠ΄ΠΈΠ½ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΉ ΡΠΏΡΠ°ΠΉΡ. CLI Π½Π΅ ΠΈΡΠ΅Ρ ΠΊΠΎΠ½ΡΠΈΠ³ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π²ΡΠ΅Π³Π΄Π° ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΡΡ ΡΠ²Π½ΠΎ:
+
+```bash
+npx --yes @gromlab/svg-sprites path/to/svg-sprite.config.json
+```
+
+## JSON
+
+JSON ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ°:
+
+```json
+{
+ "mode": "next@app/turbopack",
+ "name": "app",
+ "description": "ΠΠ±ΡΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ",
+ "input": [
+ "./icons",
+ "../../assets/icons/**/*.svg",
+ "!../../assets/icons/deprecated-*.svg"
+ ],
+ "transform": {
+ "removeSize": true,
+ "replaceColors": true,
+ "addTransition": true
+ },
+ "generatedNotice": true
+}
+```
+
+| ΠΠΎΠ»Π΅ | ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ |
+|---|---|---|
+| `mode` | ΠΠ΅Ρ | Exact mode, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ framework ΠΈ ΡΠ±ΠΎΡΡΠΈΠΊΡ |
+| `name` | Kebab-case ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° ΠΌΠΎΠ΄ΡΠ»Ρ; Π΄Π»Ρ `svg-sprite` ΠΈ `svg-sprites` β ΠΈΠΌΠ΅Π½ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° | ΠΠΌΡ ΡΠΏΡΠ°ΠΉΡΠ°; Π² modes Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π΄Π°ΡΡ ΠΈΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈ ΡΠΈΠΏΠΎΠ² |
+| `description` | ΠΠ΅Ρ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΈΠΏΠΎΠ² ΠΈ Viewer |
+| `input` | `./icons` | ΠΠ°ΡΠ°Π»ΠΎΠ³, SVG-ΡΠ°ΠΉΠ», glob-ΡΠ°Π±Π»ΠΎΠ½ ΠΈΠ»ΠΈ ΠΌΠ°ΡΡΠΈΠ² ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² |
+| `transform` | ΠΡΠ΅ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ | ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠΈ SVG |
+| `generatedNotice` | `true` | ΠΠΈΠ΄ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ Π² generated-ΡΠ°ΠΉΠ»Π°Ρ
|
+
+ΠΡΡΠΈ ΠΈ glob-ΡΠ°Π±Π»ΠΎΠ½Ρ Π² `input` ΡΡΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° config-ΡΠ°ΠΉΠ»Π°. ΠΠ°ΡΡΠ΅ΡΠ½ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ `!` ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΡ.
+
+## JavaScript
+
+JavaScript-ΠΊΠΎΠ½ΡΠΈΠ³ ΡΠΊΡΠΏΠΎΡΡΠΈΡΡΠ΅Ρ ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
+
+```js
+export default {
+ mode: 'react@vite',
+ name: 'icons',
+ input: './icons',
+}
+```
+
+ΠΠ΅ΡΠ΅Π΄Π°ΠΉΡΠ΅ CLI ΠΏΡΡΡ ΠΊ `.js`-ΡΠ°ΠΉΠ»Ρ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΊ JSON:
+
+```bash
+npx --yes @gromlab/svg-sprites path/to/svg-sprite.config.js
+```
+
+## TypeScript
+
+ΠΠ»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΊΠΎΠ½ΡΠΈΠ³Π° TypeScript ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΠ°ΠΊΠ΅Ρ ΠΊΠ°ΠΊ dev dependency:
+
+```bash
+npm install --save-dev @gromlab/svg-sprites
+```
+
+ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ `defineSpriteConfig`:
+
+```ts
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+ mode: 'react@vite',
+ name: 'icons',
+ input: './icons',
+})
+```
+
+ΠΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ `satisfies` Ρ type-only ΠΈΠΌΠΏΠΎΡΡΠΎΠΌ:
+
+```ts
+import type { SpriteConfig } from '@gromlab/svg-sprites'
+
+export default {
+ mode: 'react@vite',
+ name: 'icons',
+ input: './icons',
+} satisfies SpriteConfig
+```
+
+CLI Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ `.ts`-ΠΊΠΎΠ½ΡΠΈΠ³ Π½Π°ΠΏΡΡΠΌΡΡ:
+
+```bash
+npx --yes @gromlab/svg-sprites path/to/svg-sprite.config.ts
+```
+
+ΠΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ modes, CLI-ΡΠ»Π°Π³ΠΎΠ², ΠΏΡΠ°Π²ΠΈΠ» ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΡ ΠΈ transform-ΠΎΠΏΡΠΈΠΉ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² [ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠ΅](reference/technical.md).
diff --git a/docs/ru/guides/AGENTS.md b/docs/ru/guides/AGENTS.md
new file mode 100644
index 0000000..472147f
--- /dev/null
+++ b/docs/ru/guides/AGENTS.md
@@ -0,0 +1,78 @@
+# ΠΡΠ°Π²ΠΈΠ»Π° Π³Π°ΠΉΠ΄ΠΎΠ² Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΡΠ°ΡΡΠ°
+
+## Π¦Π΅Π»Ρ
+
+ΠΠ°ΠΉΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠΌΠΎΡΡ ΡΠΈΡΠ°ΡΠ΅Π»Ρ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΡΡΡΠ΅Π΅ ΡΠΎΠ·Π΄Π°ΡΡ SVG-ΡΠΏΡΠ°ΠΉΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΡΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
+
+Π‘ΠΏΡΠ°ΠΉΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π³Π»Π°Π²Π½ΡΠΌ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ. ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΊ ΡΡΠ΅Π΄ΡΡΠ²Π° Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
+
+## ΠΠ±Π»Π°ΡΡΡ Π³Π°ΠΉΠ΄Π°
+
+ΠΠ°ΠΆΠ΄ΡΠΉ Π³Π°ΠΉΠ΄ ΠΏΠΎΡΠ²ΡΡΡΠ½ ΠΎΠ΄Π½ΠΎΠΌΡ exact mode.
+
+Π Π³Π°ΠΉΠ΄ Π²ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ, ΠΎΡΠ½ΠΎΡΡΡΠΈΠ΅ΡΡ ΠΊ ΡΡΠΎΠΌΡ mode. ΠΠ΅Π»ΡΠ·Ρ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ
ΡΠ±ΠΎΡΡΠΈΠΊΠΎΠ², ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² ΠΈΠ»ΠΈ modes.
+
+ΠΡΠ΅ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΠΏΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ adapter.
+
+## Π‘ΡΡΡΠΊΡΡΡΠ°
+
+ΠΠ°ΠΉΠ΄ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΡΡΡ
ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠ°ΡΡΠ΅ΠΉ:
+
+1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°.
+2. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°.
+3. ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ ΡΠ΅ΡΠ΅Π· Viewer.
+
+ΠΠ΅ΡΠ²Π°Ρ ΡΡΡΠΎΠΊΠ° ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΠ±ΡΡΡΠ½ΡΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° ΠΈ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎΠ½Π° ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π°.
+
+## ΠΡΠΈΠΌΠ΅ΡΡ
+
+ΠΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠΈ Π³Π°ΠΉΠ΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ.
+
+ΠΡΡΠΈ, ΠΈΠΌΠ΅Π½Π°, ΠΊΠΎΠΌΠ°Π½Π΄Ρ, ΠΈΠΌΠΏΠΎΡΡΡ ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
API Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Ρ ΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ.
+
+ΠΠΎ Π²ΡΠ΅Ρ
Π³Π°ΠΉΠ΄Π°Ρ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ:
+
+- ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ SVG Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² `assets/svg-icons`;
+- ΡΠΏΡΠ°ΠΉΡ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π² `assets/app-icons`;
+- ΠΊΠΎΠ½ΡΠΈΠ³ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² JSON;
+- ΠΈΠΌΡ ΡΠΏΡΠ°ΠΉΡΠ° Π² ΠΊΠΎΠ½ΡΠΈΠ³Π΅ β `app`.
+
+## ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ
+
+Π ΡΠ°Π·Π΄Π΅Π»Π΅ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠ²Π½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ: Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ° ΠΏΠ°ΠΊΠ΅Ρ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
+
+Viewer ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Viewer ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ, ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΌ ΡΠ΅ΠΊΡΡΠ΅ΠΌΡ mode.
+
+## Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
+
+ΠΠ°ΠΉΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΡΡ:
+
+- ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°;
+- ΠΊΠΎΠ½ΡΠΈΠ³;
+- ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ;
+- Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅Π΄ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΠΈ ΡΠ±ΠΎΡΠΊΠΎΠΉ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠ°;
+- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ;
+- Π±Π°Π·ΠΎΠ²ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠ²Π΅ΡΠΎΠ²;
+- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Viewer.
+
+ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ mode Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π±Π΅Π· Π½ΠΈΡ
ΠΏΡΠΈΠΌΠ΅Ρ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈΠ»ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ.
+
+## Π’Π΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΡΠΌ
+
+ΠΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ°, ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ ΡΠ±ΠΎΡΡΠΈΠΊΠ°.
+
+ΠΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ API, ΡΠ΅Π΄ΠΊΠΈΠ΅ ΡΡΠ΅Π½Π°ΡΠΈΠΈ ΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ, Π½Π΅ ΠΎΡΠ½ΠΎΡΡΡΠΈΠ΅ΡΡ ΠΊ Π±ΡΡΡΡΠΎΠΌΡ ΡΡΠ°ΡΡΡ.
+
+ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² reference-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
+
+## Π‘ΡΠΈΠ»Ρ
+
+ΠΠΈΡΠ°ΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π° Π½Π΅ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
+
+ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅, ΠΏΡΡΠΌΡΠ΅ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΎΡΠΌΡΠ»ΠΈΡΠΎΠ²ΠΊΠΈ.
+
+Π‘Π½Π°ΡΠ°Π»Π° ΠΎΠ±ΡΡΡΠ½ΡΡΡ ΠΏΠΎΠ»ΡΠ·Ρ ΠΈΠ»ΠΈ ΡΠ΅Π»Ρ ΡΠ°Π³Π°, Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.
+
+ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΎΠ΄Ρ, ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΡΠ΅ ΡΠΎΡΠΌΡΠ»ΠΈΡΠΎΠ²ΠΊΠΈ ΠΈ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ.
+
+ΠΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½ΠΈΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
diff --git a/docs/ru/guides/next-app-turbopack.md b/docs/ru/guides/next-app-turbopack.md
index b56f876..12d8d66 100644
--- a/docs/ru/guides/next-app-turbopack.md
+++ b/docs/ru/guides/next-app-turbopack.md
@@ -1,153 +1,108 @@
-# Next.js App Router Ρ Turbopack
+# SVG-ΡΠΏΡΠ°ΠΉΡ Π΄Π»Ρ Next.js App Router Ρ Turbopack
-ΠΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΠΉ quick start Π΄Π»Ρ exact mode key `next@app/turbopack`: generated `IconsIcon` ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ Server Components ΠΈ asset pipeline Turbopack.
+ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Next.js Ρ App Router ΠΈ Turbopack.
-## 1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
+## ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ: Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² `package.json`. `npx` Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅Ρ CLI, Π° generated production runtime Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `@gromlab/svg-sprites`.
+ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠΏΡΠ°ΠΉΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ `assets/app-icons`, Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ SVG Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² `assets/svg-icons`.
-```text
-src/sprite/
-βββ icons/
-β βββ check.svg
-β βββ warning.svg
-βββ index.ts
-βββ svg-sprite.config.ts
-```
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ `assets/app-icons/svg-sprite.config.json`:
-ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ plain config:
-
-```ts
-export default {
- mode: 'next@app/turbopack',
- name: 'icons',
+```json
+{
+ "mode": "next@app/turbopack",
+ "name": "app",
+ "input": "../svg-icons/**/*.svg"
}
```
-ΠΡΠ»ΠΈ `input` Π½Π΅ ΡΠΊΠ°Π·Π°Π½, SVG ΡΠΈΡΠ°ΡΡΡΡ ΠΈΠ· `./icons` ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠΈΠ³Π°. ΠΠΎΠ½ΡΠΈΠ³ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ `.ts`, `.js` Ρ `default export` ΠΈΠ»ΠΈ `.json`.
+ΠΡΡΡ Π² `input` ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΠ°ΠΏΠΊΠΈ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ.
-```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts
-```
-
-Π CI Π·Π°ΡΠΈΠΊΡΠΈΡΡΠΉΡΠ΅ ΡΠΎΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ `@gromlab/svg-sprites@1.1.5`. Mode ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Next Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ bundler:
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π² `package.json`. Π‘Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ· Git, ΠΏΠΎΡΡΠΎΠΌΡ `predev` ΠΈ `prebuild` ΠΏΠ΅ΡΠ΅ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΠΈ ΡΠ±ΠΎΡΠΊΠΎΠΉ:
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts",
- "dev": "npm run sprites && next dev --turbopack",
- "build": "npm run sprites && next build --turbopack",
- "start": "next start",
- "typecheck": "npm run sprites && tsc --noEmit"
+ "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+ "predev": "npm run sprites",
+ "dev": "next dev --turbopack",
+ "prebuild": "npm run sprites",
+ "build": "next build --turbopack"
}
}
```
-ΠΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ `predev`/`prebuild` ΠΈ ΡΠ²Π½ΡΠΉ `npm run sprites`. Generated `.svg-sprite` Π½Π΅ ΠΊΠΎΠΌΠΌΠΈΡΠΈΡΡΡ. Generated Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ `.gitignore`, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Git ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. ΠΠ³ΠΎ `.d.ts` self-contained ΠΈ Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΡΡ generator package.
+## ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°
+
+ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ `name: "app"` ΡΠΎΠ·Π΄Π°ΡΡ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ `AppIcon`.
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΊΡ Π²Ρ
ΠΎΠ΄Π° `assets/app-icons/index.ts`:
```ts
-// src/sprite/index.ts
export * from './.svg-sprite/index.js'
```
-Generated icon Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ `'use client'`, ΠΏΠΎΡΡΠΎΠΌΡ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΡΠΌΠΎ Π² Server Component:
+ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π² Server Component:
```tsx
// app/page.tsx
-import { IconsIcon, iconsIconNames } from '../src/sprite'
+import { AppIcon } from '../assets/app-icons'
export default function Page() {
return (
-
-
- {iconsIconNames.length} ΠΈΠΊΠΎΠ½ΠΎΠΊ
-
+
)
}
```
-Turbopack ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ generated `new URL('../sprite.svg', import.meta.url).href` ΠΈ Π²ΡΠΏΡΡΠΊΠ°Π΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ hashed asset. ΠΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Client Component boundary ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π΄ΠΈ `IconsIcon`.
+ΠΠ»Ρ `AppIcon` Π½Π΅ Π½ΡΠΆΠ΅Π½ `'use client'`. Turbopack ΡΠ°ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ `sprite.svg` Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΡ ΡΠ±ΠΎΡΠΊΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡ Π΅Π³ΠΎ Π² `public` Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
-## 2. ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+## ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
-Viewer Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½ ΠΈ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ debug/preview:
+Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ CSS-ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. ΠΠ½ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ:
```bash
npm install --save-dev @gromlab/svg-sprites
```
-Viewer ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π΅Π½, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Client Component:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Client Component `app/svg-sprite/SvgSpriteViewer.tsx`:
```tsx
-// app/icons-debug/sprite-viewer.tsx
'use client'
import { SpriteViewer } from '@gromlab/svg-sprites/react'
const sources = [
- () => import('../../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+ () => import('../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
] as const
-export function AppSpriteViewer() {
+export function SvgSpriteViewer() {
return
}
```
-Server page ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡ boundary:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΌΠ°ΡΡΡΡΡ `app/svg-sprite/page.tsx`:
```tsx
-// app/icons-debug/page.tsx
-import { AppSpriteViewer } from './sprite-viewer'
+import { notFound } from 'next/navigation'
-export default function IconsDebugPage() {
- return
+import { SvgSpriteViewer } from './SvgSpriteViewer'
+
+export default function SvgSpritePage() {
+ if (process.env.NODE_ENV !== 'development') notFound()
+
+ return
}
```
-Viewer Π½Π΅ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² production icon runtime ΠΈ Π½Π΅ Π½ΡΠΆΠ΅Π½ ΠΎΠ±ΡΡΠ½ΡΠΌ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ Ρ `IconsIcon`.
-
-## 3. Π’ΠΈΠΏΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³Π°
-
-ΠΠΎΡΠ»Π΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ package ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ helper:
-
-```ts
-import { defineSpriteConfig } from '@gromlab/svg-sprites'
-
-export default defineSpriteConfig({
- mode: 'next@app/turbopack',
- name: 'icons',
-})
-```
-
-ΠΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ ΠΈ type-only import `SpriteConfig` Ρ `satisfies SpriteConfig`.
-
-ΠΠ΅Π· package Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ type Π² config:
-
-```ts
-type LocalSpriteConfig = {
- mode: 'next@app/turbopack'
- name?: string
- description?: string
- input?: string | string[]
- transform?: {
- removeSize?: boolean
- replaceColors?: boolean
- addTransition?: boolean
- }
- generatedNotice?: boolean
-}
-
-export default {
- mode: 'next@app/turbopack',
- name: 'icons',
-} satisfies LocalSpriteConfig
-```
-
-Exact literal Π·Π°ΡΠΈΡΠ°Π΅Ρ ΠΎΡ ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ App Router ΠΈ Π΄ΡΡΠ³ΠΈΡ
bundler contracts.
+ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ `npm run dev` ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ `/svg-sprite`. Π production ΠΌΠ°ΡΡΡΡΡ Π²Π΅ΡΠ½ΡΡ 404.
diff --git a/docs/ru/guides/next-app-webpack.md b/docs/ru/guides/next-app-webpack.md
index 40d10b0..493f202 100644
--- a/docs/ru/guides/next-app-webpack.md
+++ b/docs/ru/guides/next-app-webpack.md
@@ -1,151 +1,108 @@
-# Next.js App Router Ρ Webpack
+# SVG-ΡΠΏΡΠ°ΠΉΡ Π΄Π»Ρ Next.js App Router Ρ Webpack
-ΠΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΠΉ quick start Π΄Π»Ρ exact mode key `next@app/webpack`: generated `IconsIcon` ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ Server Components ΠΈ Webpack pipeline Next.js.
+ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Next.js Ρ App Router ΠΈ Webpack.
-## 1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
+## ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ: Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² `package.json`. `npx` Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅Ρ CLI, Π° generated production runtime Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `@gromlab/svg-sprites`.
+ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠΏΡΠ°ΠΉΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ `assets/app-icons`, Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ SVG Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² `assets/svg-icons`.
-```text
-src/sprite/
-βββ icons/
-β βββ check.svg
-β βββ warning.svg
-βββ index.ts
-βββ svg-sprite.config.ts
-```
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ `assets/app-icons/svg-sprite.config.json`:
-ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ plain config:
-
-```ts
-export default {
- mode: 'next@app/webpack',
- name: 'icons',
+```json
+{
+ "mode": "next@app/webpack",
+ "name": "app",
+ "input": "../svg-icons/**/*.svg"
}
```
-ΠΡΠ»ΠΈ `input` Π½Π΅ ΡΠΊΠ°Π·Π°Π½, SVG ΡΠΈΡΠ°ΡΡΡΡ ΠΈΠ· `./icons` ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠΈΠ³Π°. Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ `.js` Ρ `default export` ΠΈ `.json`.
+ΠΡΡΡ Π² `input` ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΠ°ΠΏΠΊΠΈ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ.
-```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts
-```
-
-Π CI Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ `latest` ΡΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠ΅ΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ `@gromlab/svg-sprites@1.1.5`. Exact Next commands Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ mode:
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π² `package.json`. Π‘Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ· Git, ΠΏΠΎΡΡΠΎΠΌΡ `predev` ΠΈ `prebuild` ΠΏΠ΅ΡΠ΅ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΠΈ ΡΠ±ΠΎΡΠΊΠΎΠΉ:
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts",
- "dev": "npm run sprites && next dev --webpack",
- "build": "npm run sprites && next build --webpack",
- "start": "next start",
- "typecheck": "npm run sprites && tsc --noEmit"
+ "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+ "predev": "npm run sprites",
+ "dev": "next dev --webpack",
+ "prebuild": "npm run sprites",
+ "build": "next build --webpack"
}
}
```
-ΠΠ΅ ΡΠΎΡΠ΅ΡΠ°ΠΉΡΠ΅ ΡΠ²Π½ΡΠΉ `npm run sprites` Ρ `predev` ΠΈΠ»ΠΈ `prebuild`. `.svg-sprite` generated ΠΈ Π½Π΅ ΠΊΠΎΠΌΠΌΠΈΡΠΈΡΡΡ. Generated Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ `.gitignore`, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Git ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. Generated declarations self-contained ΠΈ Π½Π΅ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ `@gromlab/svg-sprites`.
+## ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°
+
+ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ `name: "app"` ΡΠΎΠ·Π΄Π°ΡΡ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ `AppIcon`.
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΊΡ Π²Ρ
ΠΎΠ΄Π° `assets/app-icons/index.ts`:
```ts
-// src/sprite/index.ts
export * from './.svg-sprite/index.js'
```
-Production usage Π² Server Component:
+ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π² Server Component:
```tsx
// app/page.tsx
-import { IconsIcon, iconsIconNames } from '../src/sprite'
+import { AppIcon } from '../assets/app-icons'
export default function Page() {
return (
-
-
- {iconsIconNames.length} ΠΈΠΊΠΎΠ½ΠΎΠΊ
-
+
)
}
```
-Generated component Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ `'use client'`. Next Webpack ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ `new URL('../sprite.svg', import.meta.url).href` ΠΈ ΠΏΡΠ±Π»ΠΈΠΊΡΠ΅Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ SVG asset; Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ ΡΡΠΎΡ URL ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΠ΅ sprite Π² `public` Π²ΡΡΡΠ½ΡΡ.
+ΠΠ»Ρ `AppIcon` Π½Π΅ Π½ΡΠΆΠ΅Π½ `'use client'`. Next.js ΡΠ°ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ `sprite.svg` Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΡ ΡΠ±ΠΎΡΠΊΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡ Π΅Π³ΠΎ Π² `public` Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
-## 2. ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+## ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
-Viewer Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½. ΠΠ»Ρ debug/preview ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ package:
+Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ CSS-ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. ΠΠ½ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ:
```bash
npm install --save-dev @gromlab/svg-sprites
```
-App Router ΡΡΠ΅Π±ΡΠ΅Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Client Component boundary Π΄Π»Ρ Viewer:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Client Component `app/svg-sprite/SvgSpriteViewer.tsx`:
```tsx
-// app/icons-debug/sprite-viewer.tsx
'use client'
import { SpriteViewer } from '@gromlab/svg-sprites/react'
const sources = [
- () => import('../../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+ () => import('../../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
] as const
-export function AppSpriteViewer() {
+export function SvgSpriteViewer() {
return
}
```
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΌΠ°ΡΡΡΡΡ `app/svg-sprite/page.tsx`:
+
```tsx
-// app/icons-debug/page.tsx
-import { AppSpriteViewer } from './sprite-viewer'
+import { notFound } from 'next/navigation'
-export default function IconsDebugPage() {
- return
+import { SvgSpriteViewer } from './SvgSpriteViewer'
+
+export default function SvgSpritePage() {
+ if (process.env.NODE_ENV !== 'development') notFound()
+
+ return
}
```
-Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ loader ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Webpack ΡΠ²ΡΠ·Π°ΡΡ manifest ΠΈ emitted SVG. Viewer Π½Π΅ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² production runtime `IconsIcon`.
-
-## 3. Π’ΠΈΠΏΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³Π°
-
-ΠΡΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌ package ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ helper:
-
-```ts
-import { defineSpriteConfig } from '@gromlab/svg-sprites'
-
-export default defineSpriteConfig({
- mode: 'next@app/webpack',
- name: 'icons',
-})
-```
-
-ΠΡΡΠ³ΠΎΠΉ package-Π²Π°ΡΠΈΠ°Π½Ρ: type-only import `SpriteConfig` ΠΈ `satisfies SpriteConfig`.
-
-ΠΠ΅Π· package Π²ΡΡΠ°Π²ΡΡΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ type ΠΏΡΡΠΌΠΎ Π² config:
-
-```ts
-type LocalSpriteConfig = {
- mode: 'next@app/webpack'
- name?: string
- description?: string
- input?: string | string[]
- transform?: {
- removeSize?: boolean
- replaceColors?: boolean
- addTransition?: boolean
- }
- generatedNotice?: boolean
-}
-
-export default {
- mode: 'next@app/webpack',
- name: 'icons',
-} satisfies LocalSpriteConfig
-```
-
-ΠΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ exact literal ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΠ»ΡΡΠ°ΠΉΠ½ΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ Turbopack ΠΈΠ»ΠΈ Pages Router output.
+ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ `npm run dev` ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ `/svg-sprite`. Π production ΠΌΠ°ΡΡΡΡΡ Π²Π΅ΡΠ½ΡΡ 404.
diff --git a/docs/ru/guides/next-pages-turbopack.md b/docs/ru/guides/next-pages-turbopack.md
index b3e104a..638c690 100644
--- a/docs/ru/guides/next-pages-turbopack.md
+++ b/docs/ru/guides/next-pages-turbopack.md
@@ -1,140 +1,98 @@
-# Next.js Pages Router Ρ Turbopack
+# SVG-ΡΠΏΡΠ°ΠΉΡ Π΄Π»Ρ Next.js Pages Router Ρ Turbopack
-ΠΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΠΉ quick start Π΄Π»Ρ exact mode key `next@pages/turbopack`: generated `IconsIcon` ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΡΠΈ SSR, SSG ΠΈ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΡ
ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π°Ρ
Pages Router.
+ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Next.js Ρ Pages Router ΠΈ Turbopack.
-## 1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
+## ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ: Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² `package.json`. `npx` Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅Ρ CLI, Π° generated production runtime Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `@gromlab/svg-sprites`.
+ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠΏΡΠ°ΠΉΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ `assets/app-icons`, Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ SVG Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² `assets/svg-icons`.
-```text
-src/sprite/
-βββ icons/
-β βββ check.svg
-β βββ warning.svg
-βββ index.ts
-βββ svg-sprite.config.ts
-```
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ `assets/app-icons/svg-sprite.config.json`:
-ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ plain config:
-
-```ts
-export default {
- mode: 'next@pages/turbopack',
- name: 'icons',
+```json
+{
+ "mode": "next@pages/turbopack",
+ "name": "app",
+ "input": "../svg-icons/**/*.svg"
}
```
-ΠΡΠ»ΠΈ `input` Π½Π΅ ΡΠΊΠ°Π·Π°Π½, SVG ΡΠΈΡΠ°ΡΡΡΡ ΠΈΠ· `./icons` ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠΈΠ³Π°. ΠΠΎΠ½ΡΠΈΠ³ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ `.js` Ρ `default export` ΠΈΠ»ΠΈ `.json`.
+ΠΡΡΡ Π² `input` ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΠ°ΠΏΠΊΠΈ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ.
-```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts
-```
-
-ΠΠ»Ρ CI Π·Π°ΡΠΈΠΊΡΠΈΡΡΠΉΡΠ΅ ΡΠΎΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ `@gromlab/svg-sprites@1.1.5`. Exact commands Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΡ
ΡΠ°Π½ΡΡΡ Turbopack ΠΈ Π΄Π»Ρ dev, ΠΈ Π΄Π»Ρ production build:
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π² `package.json`. Π‘Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ· Git, ΠΏΠΎΡΡΠΎΠΌΡ `predev` ΠΈ `prebuild` ΠΏΠ΅ΡΠ΅ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΠΈ ΡΠ±ΠΎΡΠΊΠΎΠΉ:
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts",
- "dev": "npm run sprites && next dev --turbopack",
- "build": "npm run sprites && next build --turbopack",
- "start": "next start",
- "typecheck": "npm run sprites && tsc --noEmit"
+ "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+ "predev": "npm run sprites",
+ "dev": "next dev --turbopack",
+ "prebuild": "npm run sprites",
+ "build": "next build --turbopack"
}
}
```
-ΠΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ `predev`/`prebuild`, Π΅ΡΠ»ΠΈ scripts ΡΠΆΠ΅ ΡΠ²Π½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ `npm run sprites`. Generated `.svg-sprite` Π½Π΅ ΠΊΠΎΠΌΠΌΠΈΡΠΈΡΡΡ. Generated Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ `.gitignore`, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Git ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. Generated `.d.ts` self-contained ΠΈ Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΡΡ generator package.
+## ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°
+
+ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ `name: "app"` ΡΠΎΠ·Π΄Π°ΡΡ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ `AppIcon`.
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΊΡ Π²Ρ
ΠΎΠ΄Π° `assets/app-icons/index.ts`:
```ts
-// src/sprite/index.ts
export * from './.svg-sprite/index.js'
```
-Production usage Π½Π° ΠΎΠ±ΡΡΠ½ΠΎΠΉ page:
+ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅:
```tsx
// pages/index.tsx
-import { IconsIcon, iconsIconNames } from '../src/sprite'
+import { AppIcon } from '../assets/app-icons'
export default function Page() {
return (
-
-
- {iconsIconNames.length} ΠΈΠΊΠΎΠ½ΠΎΠΊ
-
+
)
}
```
-ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ `getServerSideProps`, `getStaticProps` ΠΈ client navigation. Turbopack ΡΠ°Π·ΡΠ΅ΡΠ°Π΅Ρ generated `new URL('../sprite.svg', import.meta.url).href` Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ hashed asset.
+ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ SSR, SSG ΠΈ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠΌΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π°ΠΌΠΈ. Turbopack ΡΠ°ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ `sprite.svg` Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΡ ΡΠ±ΠΎΡΠΊΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡ Π΅Π³ΠΎ Π² `public` Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
-## 2. ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+## ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
-Viewer Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½ ΠΈ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ debug/preview:
+Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ CSS-ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. ΠΠ½ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ:
```bash
npm install --save-dev @gromlab/svg-sprites
```
-Π Pages Router Viewer ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΡΠΌΠΎ Π² page, Π±Π΅Π· ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ App Router Client Component boundary:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ `pages/svg-sprite.tsx`:
```tsx
-// pages/icons-debug.tsx
+import type { GetStaticProps } from 'next'
import { SpriteViewer } from '@gromlab/svg-sprites/react'
const sources = [
- () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+ () => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
] as const
-export default function IconsDebugPage() {
+export default function SvgSpritePage() {
return
}
+
+export const getStaticProps: GetStaticProps = () =>
+ process.env.NODE_ENV === 'development'
+ ? { props: {} }
+ : { notFound: true }
```
-ΠΡΡΠ°Π²Π»ΡΠΉΡΠ΅ ΡΡΡ page ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΌ debug-ΡΠ°Π·Π΄Π΅Π»Π΅. Viewer Π½Π΅ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² production icon runtime `IconsIcon`.
-
-## 3. Π’ΠΈΠΏΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³Π°
-
-ΠΡΠ»ΠΈ package ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ helper:
-
-```ts
-import { defineSpriteConfig } from '@gromlab/svg-sprites'
-
-export default defineSpriteConfig({
- mode: 'next@pages/turbopack',
- name: 'icons',
-})
-```
-
-ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°: type-only import `SpriteConfig` ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ `satisfies SpriteConfig`.
-
-ΠΠ΅Π· package Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ copy-paste type Π² config:
-
-```ts
-type LocalSpriteConfig = {
- mode: 'next@pages/turbopack'
- name?: string
- description?: string
- input?: string | string[]
- transform?: {
- removeSize?: boolean
- replaceColors?: boolean
- addTransition?: boolean
- }
- generatedNotice?: boolean
-}
-
-export default {
- mode: 'next@pages/turbopack',
- name: 'icons',
-} satisfies LocalSpriteConfig
-```
-
-Exact literal Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ½ΠΎ ΡΠΌΠ΅ΡΠ°ΡΡ Pages Router Ρ App Router ΠΈΠ»ΠΈ Webpack output.
+ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ `npm run dev` ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ `/svg-sprite`. Π production ΠΌΠ°ΡΡΡΡΡ Π²Π΅ΡΠ½ΡΡ 404.
diff --git a/docs/ru/guides/next-pages-webpack.md b/docs/ru/guides/next-pages-webpack.md
index 072b7a7..d98d63a 100644
--- a/docs/ru/guides/next-pages-webpack.md
+++ b/docs/ru/guides/next-pages-webpack.md
@@ -1,140 +1,98 @@
-# Next.js Pages Router Ρ Webpack
+# SVG-ΡΠΏΡΠ°ΠΉΡ Π΄Π»Ρ Next.js Pages Router Ρ Webpack
-ΠΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΠΉ quick start Π΄Π»Ρ exact mode key `next@pages/webpack`: generated `IconsIcon` ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Pages Router ΠΈ ΠΏΡΠ±Π»ΠΈΠΊΡΠ΅Ρ SVG ΡΠ΅ΡΠ΅Π· Webpack pipeline Next.js.
+ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Next.js Ρ Pages Router ΠΈ Webpack.
-## 1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
+## ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ: Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² `package.json`. `npx` Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅Ρ CLI, Π° generated production runtime Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `@gromlab/svg-sprites`.
+ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠΏΡΠ°ΠΉΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ `assets/app-icons`, Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ SVG Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² `assets/svg-icons`.
-```text
-src/sprite/
-βββ icons/
-β βββ check.svg
-β βββ warning.svg
-βββ index.ts
-βββ svg-sprite.config.ts
-```
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ `assets/app-icons/svg-sprite.config.json`:
-ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ plain config:
-
-```ts
-export default {
- mode: 'next@pages/webpack',
- name: 'icons',
+```json
+{
+ "mode": "next@pages/webpack",
+ "name": "app",
+ "input": "../svg-icons/**/*.svg"
}
```
-ΠΡΠ»ΠΈ `input` Π½Π΅ ΡΠΊΠ°Π·Π°Π½, SVG ΡΠΈΡΠ°ΡΡΡΡ ΠΈΠ· `./icons` ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠΈΠ³Π°. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ `.ts`, `.js` Ρ `default export` ΠΈ `.json` configs.
+ΠΡΡΡ Π² `input` ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΠ°ΠΏΠΊΠΈ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ.
-```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts
-```
-
-Π CI Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ `latest` Π½Π° ΡΠΎΡΠ½ΡΡ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ `@gromlab/svg-sprites@1.1.5`. Exact Next commands Π΄Π»Ρ Webpack:
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π² `package.json`. Π‘Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ· Git, ΠΏΠΎΡΡΠΎΠΌΡ `predev` ΠΈ `prebuild` ΠΏΠ΅ΡΠ΅ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΠΈ ΡΠ±ΠΎΡΠΊΠΎΠΉ:
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts",
- "dev": "npm run sprites && next dev --webpack",
- "build": "npm run sprites && next build --webpack",
- "start": "next start",
- "typecheck": "npm run sprites && tsc --noEmit"
+ "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+ "predev": "npm run sprites",
+ "dev": "next dev --webpack",
+ "prebuild": "npm run sprites",
+ "build": "next build --webpack"
}
}
```
-ΠΠ΅ Π΄ΡΠ±Π»ΠΈΡΡΠΉΡΠ΅ ΡΡΠΈ Π²ΡΠ·ΠΎΠ²Ρ ΡΠ΅ΡΠ΅Π· `predev`, `prebuild` ΠΈΠ»ΠΈ `pretypecheck`. `.svg-sprite` generated ΠΈ Π½Π΅ ΠΊΠΎΠΌΠΌΠΈΡΠΈΡΡΡ. Generated Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ `.gitignore`, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Git ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. Generated declarations self-contained ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΡΡ `@gromlab/svg-sprites`.
+## ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°
+
+ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ `name: "app"` ΡΠΎΠ·Π΄Π°ΡΡ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ `AppIcon`.
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΊΡ Π²Ρ
ΠΎΠ΄Π° `assets/app-icons/index.ts`:
```ts
-// src/sprite/index.ts
export * from './.svg-sprite/index.js'
```
-Production usage:
+ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅:
```tsx
// pages/index.tsx
-import { IconsIcon, iconsIconNames } from '../src/sprite'
+import { AppIcon } from '../assets/app-icons'
export default function Page() {
return (
-
-
- {iconsIconNames.length} ΠΈΠΊΠΎΠ½ΠΎΠΊ
-
+
)
}
```
-ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ SSR, SSG ΠΈ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ. Next Webpack ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ generated `new URL('../sprite.svg', import.meta.url).href` Π²ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ hashed asset; Π½Π΅ ΠΊΠΎΠ½ΡΡΡΡΠΈΡΡΠΉΡΠ΅ URL ΡΠΏΡΠ°ΠΉΡΠ° Π²ΡΡΡΠ½ΡΡ.
+ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ SSR, SSG ΠΈ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠΌΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π°ΠΌΠΈ. Next.js ΡΠ°ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ `sprite.svg` Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΡ ΡΠ±ΠΎΡΠΊΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡ Π΅Π³ΠΎ Π² `public` Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
-## 2. ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+## ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
-Viewer Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½. Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΠΉΡΠ΅ package ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ debug/preview:
+Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ CSS-ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. ΠΠ½ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ:
```bash
npm install --save-dev @gromlab/svg-sprites
```
-Pages Router ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Viewer Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² page Π±Π΅Π· ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ App Router boundary:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ `pages/svg-sprite.tsx`:
```tsx
-// pages/icons-debug.tsx
+import type { GetStaticProps } from 'next'
import { SpriteViewer } from '@gromlab/svg-sprites/react'
const sources = [
- () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+ () => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
] as const
-export default function IconsDebugPage() {
+export default function SvgSpritePage() {
return
}
+
+export const getStaticProps: GetStaticProps = () =>
+ process.env.NODE_ENV === 'development'
+ ? { props: {} }
+ : { notFound: true }
```
-Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ loader Π΄Π°ΡΡ Webpack ΡΠΎΡΠ½ΡΠΉ manifest module ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ SVG asset. ΠΠ΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠΉΡΠ΅ Viewer ΠΈΠ· production pages, Π΅ΡΠ»ΠΈ preview ΡΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½; runtime `IconsIcon` ΠΎΡ Π½Π΅Π³ΠΎ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌ.
-
-## 3. Π’ΠΈΠΏΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³Π°
-
-ΠΠΎΡΠ»Π΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ package Π΄ΠΎΡΡΡΠΏΠ΅Π½ helper:
-
-```ts
-import { defineSpriteConfig } from '@gromlab/svg-sprites'
-
-export default defineSpriteConfig({
- mode: 'next@pages/webpack',
- name: 'icons',
-})
-```
-
-Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ `satisfies SpriteConfig` Ρ type-only ΠΈΠΌΠΏΠΎΡΡΠΎΠΌ `SpriteConfig`.
-
-ΠΠ΅Π· package Π²ΡΡΠ°Π²ΡΡΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ type ΠΏΡΡΠΌΠΎ Π² config:
-
-```ts
-type LocalSpriteConfig = {
- mode: 'next@pages/webpack'
- name?: string
- description?: string
- input?: string | string[]
- transform?: {
- removeSize?: boolean
- replaceColors?: boolean
- addTransition?: boolean
- }
- generatedNotice?: boolean
-}
-
-export default {
- mode: 'next@pages/webpack',
- name: 'icons',
-} satisfies LocalSpriteConfig
-```
-
-Π’Π°ΠΊΠΎΠΉ exact literal Π²ΡΡΠ²Π»ΡΠ΅Ρ ΠΎΡΠΈΠ±ΠΎΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ App Router ΠΈΠ»ΠΈ Turbopack Π΅ΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ΅ config.
+ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ `npm run dev` ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ `/svg-sprite`. Π production ΠΌΠ°ΡΡΡΡΡ Π²Π΅ΡΠ½ΡΡ 404.
diff --git a/docs/ru/guides/react-vite.md b/docs/ru/guides/react-vite.md
index cedad15..320168c 100644
--- a/docs/ru/guides/react-vite.md
+++ b/docs/ru/guides/react-vite.md
@@ -1,141 +1,115 @@
-# React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ Vite
+# SVG-ΡΠΏΡΠ°ΠΉΡ Π΄Π»Ρ React Π½Π° Vite
-ΠΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΠΉ quick start Π΄Π»Ρ exact mode key `react@vite`: Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΏΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ `IconsIcon`, Π° Vite ΠΏΡΠ±Π»ΠΈΠΊΡΠ΅Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ SVG asset.
+ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° Π² React-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Vite.
-## 1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
+## ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ: Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² `package.json`. `npx` Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅Ρ CLI, Π° generated production runtime Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `@gromlab/svg-sprites`.
+ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠΏΡΠ°ΠΉΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ `assets/app-icons`, Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ SVG Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² `assets/svg-icons`.
-```text
-src/sprite/
-βββ icons/
-β βββ check.svg
-β βββ warning.svg
-βββ index.ts
-βββ svg-sprite.config.ts
-```
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ `assets/app-icons/svg-sprite.config.json`:
-ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ plain config:
-
-```ts
-export default {
- mode: 'react@vite',
- name: 'icons',
+```json
+{
+ "mode": "react@vite",
+ "name": "app",
+ "input": "../svg-icons/**/*.svg"
}
```
-ΠΡΠ»ΠΈ `input` Π½Π΅ ΡΠΊΠ°Π·Π°Π½, SVG ΡΠΈΡΠ°ΡΡΡΡ ΠΈΠ· `./icons` ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠΈΠ³Π°. ΠΠΌΠ΅ΡΡΠΎ `.ts` ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ `.js` Ρ `default export` ΠΈΠ»ΠΈ `.json`.
+ΠΡΡΡ Π² `input` ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΠ°ΠΏΠΊΠΈ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ.
-```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts
-```
-
-Π CI Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ `latest` Π½Π° ΡΠΎΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ `@gromlab/svg-sprites@1.1.5`. Exact Vite commands:
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π² `package.json`. Π‘Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ· Git, ΠΏΠΎΡΡΠΎΠΌΡ `predev` ΠΈ `prebuild` ΠΏΠ΅ΡΠ΅ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΠΈ ΡΠ±ΠΎΡΠΊΠΎΠΉ:
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts",
- "dev": "npm run sprites && vite",
- "build": "npm run sprites && tsc --noEmit && vite build",
- "typecheck": "npm run sprites && tsc --noEmit"
+ "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+ "predev": "npm run sprites",
+ "dev": "vite",
+ "prebuild": "npm run sprites",
+ "build": "tsc --noEmit && vite build"
}
}
```
-ΠΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ `predev`, `prebuild` ΠΈΠ»ΠΈ `pretypecheck`, Π΅ΡΠ»ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ scripts ΡΠΆΠ΅ ΡΠ²Π½ΠΎ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ `npm run sprites`. Generated `.svg-sprite` Π½Π΅ ΠΊΠΎΠΌΠΌΠΈΡΠΈΡΡΡ. Generated Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ `.gitignore`, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Git ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. Generated declarations self-contained: ΠΎΠ½ΠΈ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈ manifest Π±Π΅Π· ΠΈΠΌΠΏΠΎΡΡΠ° `@gromlab/svg-sprites`.
+## ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ barrel Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ generated API:
+ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ `name: "app"` ΡΠΎΠ·Π΄Π°ΡΡ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ `AppIcon`.
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΊΡ Π²Ρ
ΠΎΠ΄Π° `assets/app-icons/index.ts`:
```ts
-// src/sprite/index.ts
export * from './.svg-sprite/index.js'
```
-Production usage:
+ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ:
```tsx
-import { IconsIcon, iconsIconNames } from './sprite'
+import { AppIcon } from '../assets/app-icons'
-export function SaveButton() {
+export function SaveIcon() {
return (
-
+
)
}
-
-console.log(iconsIconNames)
```
-Prop `icon` ΡΠ²Π»ΡΠ΅ΡΡΡ union ΠΈΠΌΡΠ½ ΠΈΡΡ
ΠΎΠ΄Π½ΡΡ
ΡΠ°ΠΉΠ»ΠΎΠ². Vite Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ generated CSS Module ΠΈ ΠΈΠΌΠΏΠΎΡΡ `sprite.svg?no-inline`; query Π·Π°ΠΏΡΠ΅ΡΠ°Π΅Ρ inline ΠΈ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Vite Π²ΡΠΏΡΡΡΠΈΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ hashed SVG asset. ΠΡΠ»ΠΈ TypeScript Π½Π΅ Π·Π½Π°Π΅Ρ Vite asset imports, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ `/// ` Π² `src/vite-env.d.ts`.
+Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ `icon` ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΈΠΌΠ΅Π½Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΡ
SVG Π±Π΅Π· ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ. ΠΠΎΠ½ΠΎΡ
ΡΠΎΠΌΠ½Π°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ° Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ `color`, Π° ΡΠ²Π΅ΡΠ° ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠ΅ΡΠ΅Π· `--icon-color-N`.
-## 2. ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+Vite ΡΠ°ΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ `sprite.svg` Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΡ ΡΠ±ΠΎΡΠΊΡ.
-Viewer Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½ ΠΈ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ debug/preview. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ package ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ:
+## ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+
+Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ CSS-ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. ΠΠ½ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ:
```bash
npm install --save-dev @gromlab/svg-sprites
```
-ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ React bridge ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΌΠ°ΡΡΠΈΠ²ΠΎΠΌ loaders:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ `svg-sprite.html` Π² ΠΊΠΎΡΠ½Π΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
+
+```html
+
+
+
+
+ ΠΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°
+
+
+
+
+
+
+
+
+
+```
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ `src/svg-sprite-debug.tsx`:
```tsx
+import { createRoot } from 'react-dom/client'
import { SpriteViewer } from '@gromlab/svg-sprites/react'
const sources = [
- () => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
+ () => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
] as const
-export function IconsDebugPage() {
- return
-}
+createRoot(document.getElementById('svg-sprite-viewer')!).render(
+ ,
+)
```
-Π‘ΡΡΠΎΠΊΠΎΠ²ΡΠΉ ΠΏΡΡΡ Π² `import()` Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° generated JS manifest. ΠΠ΅ΡΠΆΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π·Π° debug-ΠΌΠ°ΡΡΡΡΡΠΎΠΌ; `SpriteViewer` Π½Π΅ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² production runtime `IconsIcon`.
+ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ `npm run dev` ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ `/svg-sprite.html`.
-## 3. Π’ΠΈΠΏΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³Π°
-
-ΠΡΠ»ΠΈ package ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ helper:
-
-```ts
-import { defineSpriteConfig } from '@gromlab/svg-sprites'
-
-export default defineSpriteConfig({
- mode: 'react@vite',
- name: 'icons',
-})
-```
-
-Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ `SpriteConfig` ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΊ type ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ `satisfies SpriteConfig`.
-
-ΠΠ΅Π· package Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ type ΠΏΡΡΠΌΠΎ Π² config:
-
-```ts
-type LocalSpriteConfig = {
- mode: 'react@vite'
- name?: string
- description?: string
- input?: string | string[]
- transform?: {
- removeSize?: boolean
- replaceColors?: boolean
- addTransition?: boolean
- }
- generatedNotice?: boolean
-}
-
-export default {
- mode: 'react@vite',
- name: 'icons',
-} satisfies LocalSpriteConfig
-```
-
-ΠΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ type ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΡ exact mode ΠΈ Π½Π΅ ΡΠΎΠ·Π΄Π°ΡΡ runtime-Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ.
+Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ production-ΡΠ±ΠΎΡΠΊΠ° Vite ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ `index.html` ΠΈ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Viewer.
diff --git a/docs/ru/guides/react-webpack.md b/docs/ru/guides/react-webpack.md
index a7591a2..b265fc7 100644
--- a/docs/ru/guides/react-webpack.md
+++ b/docs/ru/guides/react-webpack.md
@@ -1,141 +1,126 @@
-# React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ Webpack 5
+# SVG-ΡΠΏΡΠ°ΠΉΡ Π΄Π»Ρ React Π½Π° Webpack 5
-ΠΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΠΉ quick start Π΄Π»Ρ exact mode key `react@webpack`: generated `IconsIcon` ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Webpack 5 Asset Modules ΠΈ CSS Modules.
+ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° Π² React-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Webpack 5.
-## 1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
+## ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ: Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² `package.json`. `npx` Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅Ρ CLI, Π° generated production runtime Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `@gromlab/svg-sprites`.
+ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠΏΡΠ°ΠΉΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ `assets/app-icons`, Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ SVG Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² `assets/svg-icons`.
-```text
-src/sprite/
-βββ icons/
-β βββ check.svg
-β βββ warning.svg
-βββ index.ts
-βββ svg-sprite.config.ts
-```
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ `assets/app-icons/svg-sprite.config.json`:
-ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ plain config:
-
-```ts
-export default {
- mode: 'react@webpack',
- name: 'icons',
+```json
+{
+ "mode": "react@webpack",
+ "name": "app",
+ "input": "../svg-icons/**/*.svg"
}
```
-ΠΡΠ»ΠΈ `input` Π½Π΅ ΡΠΊΠ°Π·Π°Π½, SVG ΡΠΈΡΠ°ΡΡΡΡ ΠΈΠ· `./icons` ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠΈΠ³Π°. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ `.ts`, `.js` Ρ `default export` ΠΈ `.json` configs.
+ΠΡΡΡ Π² `input` ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΠ°ΠΏΠΊΠΈ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ.
-```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts
-```
-
-Π CI Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ `latest` Π½Π° ΡΠΎΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ `@gromlab/svg-sprites@1.1.5`. Exact Webpack commands:
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π² `package.json`. Π‘Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ· Git, ΠΏΠΎΡΡΠΎΠΌΡ `predev` ΠΈ `prebuild` ΠΏΠ΅ΡΠ΅ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΠΈ ΡΠ±ΠΎΡΠΊΠΎΠΉ:
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts",
- "dev": "npm run sprites && webpack serve --mode development",
- "build": "npm run sprites && webpack --mode production",
- "typecheck": "npm run sprites && tsc --noEmit"
+ "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+ "predev": "npm run sprites",
+ "dev": "webpack serve --mode development",
+ "prebuild": "npm run sprites",
+ "build": "webpack --mode production"
}
}
```
-ΠΠ΅ ΡΠΎΡΠ΅ΡΠ°ΠΉΡΠ΅ ΡΡΠΈ ΡΠ²Π½ΡΠ΅ Π²ΡΠ·ΠΎΠ²Ρ Ρ `predev`/`prebuild`: ΠΈΠ½Π°ΡΠ΅ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ Π·Π°Π΄ΡΠ±Π»ΠΈΡΡΠ΅ΡΡΡ. `.svg-sprite` Π½Π΅ ΠΊΠΎΠΌΠΌΠΈΡΠΈΡΡΡ. Generated Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ `.gitignore`, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Git ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. Generated `.d.ts` self-contained ΠΈ Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΡΡ generator package.
+## ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°
+
+ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ `name: "app"` ΡΠΎΠ·Π΄Π°ΡΡ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ `AppIcon`.
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΊΡ Π²Ρ
ΠΎΠ΄Π° `assets/app-icons/index.ts`:
```ts
-// src/sprite/index.ts
export * from './.svg-sprite/index.js'
```
-Production usage:
+ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ:
```tsx
-import { IconsIcon, iconsIconNames } from './sprite'
+import { AppIcon } from '../assets/app-icons'
-export function SaveButton() {
+export function SaveIcon() {
return (
-
+
)
}
-
-console.log(iconsIconNames)
```
-Generated component ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ URL ΡΠ΅ΡΠ΅Π· `new URL('../sprite.svg', import.meta.url).href`. Webpack 5 Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ SVG ΠΊΠ°ΠΊ Asset Module. ΠΡΠΊΠ»ΡΡΠΈΡΠ΅ generated `sprite.svg` ΠΈΠ· `@svgr/webpack`, inline/raw loaders ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΠΎΠ±ΡΠΈΡ
SVG rules Π»ΠΈΠ±ΠΎ Π·Π°Π΄Π°ΠΉΡΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ `type: 'asset/resource'`.
+Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ `icon` ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΈΠΌΠ΅Π½Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΡ
SVG Π±Π΅Π· ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ. ΠΠΎΠ½ΠΎΡ
ΡΠΎΠΌΠ½Π°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ° Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ `color`, Π° ΡΠ²Π΅ΡΠ° ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠ΅ΡΠ΅Π· `--icon-color-N`.
-ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `react-component.module.css`. Webpack config Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ `*.module.css` ΡΠ΅ΡΠ΅Π· `css-loader` Ρ CSS Modules ΠΈ `style-loader` ΠΈΠ»ΠΈ `MiniCssExtractPlugin`. ΠΠ»Ρ TypeScript ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΡ `declare module '*.module.css'`.
+ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ CSS Modules. ΠΡΠ»ΠΈ ΠΏΡΠΎΠ΅ΠΊΡ Π΅ΡΡ Π½Π΅ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΈΡ
Ρ default export, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² `webpack.config.js`:
-## 2. ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+```js
+{
+ test: /\.module\.css$/i,
+ use: [
+ 'style-loader',
+ {
+ loader: 'css-loader',
+ options: { modules: { namedExport: false } },
+ },
+ ],
+}
+```
-Viewer Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½. Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΠΉΡΠ΅ package ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ debug/preview:
+Webpack 5 ΡΠ°ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ `sprite.svg` Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΡ ΡΠ±ΠΎΡΠΊΡ.
+
+## ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+
+Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ CSS-ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. ΠΠ½ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ.
+
+Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Viewer:
```bash
npm install --save-dev @gromlab/svg-sprites
```
-Webpack Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ `import.meta.glob`; ΠΏΠ΅ΡΠ΅Π΄Π°ΠΉΡΠ΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ loader:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ entry `src/svg-sprite-debug.tsx`:
```tsx
+import { createRoot } from 'react-dom/client'
import { SpriteViewer } from '@gromlab/svg-sprites/react'
const sources = [
- () => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
+ () => import('../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'),
] as const
-export function IconsDebugPage() {
- return
-}
+const container = document.createElement('div')
+document.body.append(container)
+
+createRoot(container).render(
+ ,
+)
```
-Webpack ΡΠΎΠ·Π΄Π°ΡΡ chunk manifest ΠΈ ΡΠ°Π·ΡΠ΅ΡΠΈΡ Π΅Π³ΠΎ SVG ΡΠ΅ΡΠ΅Π· ΡΠΎΡ ΠΆΠ΅ Asset Modules pipeline. Viewer Π΄Π΅ΡΠΆΠΈΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π² debug route; production `IconsIcon` ΠΎΡ Π½Π΅Π³ΠΎ Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ.
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΊΡΠΈΠΏΡ ΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ entry ΡΠΎΠ»ΡΠΊΠΎ Π² development-ΡΠ΅ΠΆΠΈΠΌΠ΅. Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ `webpack.config.js`:
-## 3. Π’ΠΈΠΏΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³Π°
-
-Π‘ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ package Π΄ΠΎΡΡΡΠΏΠ΅Π½ helper:
-
-```ts
-import { defineSpriteConfig } from '@gromlab/svg-sprites'
-
-export default defineSpriteConfig({
- mode: 'react@webpack',
- name: 'icons',
+```js
+export default (_env, argv) => ({
+ // ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Webpack.
+ entry: [
+ './src/main.tsx',
+ ...(argv.mode === 'development' ? ['./src/svg-sprite-debug.tsx'] : []),
+ ],
})
```
-ΠΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½Π°Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ°: type-only import `SpriteConfig` ΠΈ `satisfies SpriteConfig`.
-
-ΠΠ΅Π· package ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ copy-paste type Π² config:
-
-```ts
-type LocalSpriteConfig = {
- mode: 'react@webpack'
- name?: string
- description?: string
- input?: string | string[]
- transform?: {
- removeSize?: boolean
- replaceColors?: boolean
- addTransition?: boolean
- }
- generatedNotice?: boolean
-}
-
-export default {
- mode: 'react@webpack',
- name: 'icons',
-} satisfies LocalSpriteConfig
-```
-
-ΠΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ literal Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠΈΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ Vite ΠΈΠ»ΠΈ Next mode.
+ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ `npm run dev`. Viewer ΠΏΠΎΡΠ²ΠΈΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄ΡΡ Π² production-ΡΠ±ΠΎΡΠΊΡ.
diff --git a/docs/ru/guides/standalone-vite.md b/docs/ru/guides/standalone-vite.md
index 03e53fe..379db66 100644
--- a/docs/ru/guides/standalone-vite.md
+++ b/docs/ru/guides/standalone-vite.md
@@ -1,151 +1,114 @@
-# ΠΠ°ΡΠΈΠ²Π½ΡΠΉ icon Web Component Ρ Vite
+# SVG-ΡΠΏΡΠ°ΠΉΡ Π΄Π»Ρ Vite Π±Π΅Π· ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°
-ΠΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΠΉ quick start Π΄Π»Ρ exact mode key `standalone@vite`: generated facade ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠ΅Ρ `` ΠΈ ΠΎΡΠ΄Π°ΡΡ SVG Π² asset pipeline Vite.
+ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Vite Π±Π΅Π· ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°.
-## 1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
+## ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ: Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² `package.json`. `npx` Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅Ρ CLI, Π° generated production runtime Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `@gromlab/svg-sprites`.
+ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠΏΡΠ°ΠΉΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ `assets/app-icons`, Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ SVG Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² `assets/svg-icons`.
-Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ° Π΄Π΅ΡΠΆΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΡΠ΄ΠΎΠΌ:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ `assets/app-icons/svg-sprite.config.json`:
-```text
-src/sprite/
-βββ icons/
-β βββ check.svg
-β βββ warning.svg
-βββ index.ts
-βββ svg-sprite.config.ts
-```
-
-ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ plain config:
-
-```ts
-export default {
- mode: 'standalone@vite',
- name: 'icons',
+```json
+{
+ "mode": "standalone@vite",
+ "name": "app",
+ "input": "../svg-icons/**/*.svg"
}
```
-ΠΡΠ»ΠΈ `input` Π½Π΅ ΡΠΊΠ°Π·Π°Π½, SVG ΡΠΈΡΠ°ΡΡΡΡ ΠΈΠ· `./icons` ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠΈΠ³Π°. ΠΠΎΠ½ΡΠΈΠ³ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ `.js` Ρ `default export` ΠΈΠ»ΠΈ `.json`.
+ΠΡΡΡ Π² `input` ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΠ°ΠΏΠΊΠΈ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ.
-```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts
-```
-
-Π CI Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ `latest` Π½Π° ΡΠΎΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ `@gromlab/svg-sprites@1.1.5`. Exact dev/build commands Π΄Π»Ρ Vite:
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π² `package.json`. Π‘Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ· Git, ΠΏΠΎΡΡΠΎΠΌΡ `predev` ΠΈ `prebuild` ΠΏΠ΅ΡΠ΅ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΠΈ ΡΠ±ΠΎΡΠΊΠΎΠΉ:
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts",
- "dev": "npm run sprites && vite",
- "build": "npm run sprites && vite build",
- "typecheck": "npm run sprites && tsc --noEmit"
+ "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+ "predev": "npm run sprites",
+ "dev": "vite",
+ "prebuild": "npm run sprites",
+ "build": "vite build"
}
}
```
-ΠΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ `predev`/`prebuild` ΠΈ ΡΠ²Π½ΡΠΉ `npm run sprites` Π² ΡΡΠΈΡ
scripts. `.svg-sprite` ΡΠ²Π»ΡΠ΅ΡΡΡ generated-ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΎΠΌ ΠΈ Π½Π΅ ΠΊΠΎΠΌΠΌΠΈΡΠΈΡΡΡ. Generated Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ `.gitignore`, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Git ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. Generated `.d.ts` self-contained ΠΈ Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΡΡ `@gromlab/svg-sprites`.
+## ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠ΅ΡΠ½ΠΈΡΠ΅ facade ΡΠ΅ΡΠ΅Π· ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ barrel:
+ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ `name: "app"` ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ``.
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΊΡ Π²Ρ
ΠΎΠ΄Π° `assets/app-icons/index.ts`:
```ts
-// src/sprite/index.ts
export * from './.svg-sprite/index.js'
```
-Production entry ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠ΅Ρ native Web Component:
+ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² `src/main.ts`:
```ts
-import { defineIconsIconElement, iconsIconNames } from './sprite'
+import { defineAppIconElement } from '../assets/app-icons'
+import './style.css'
-defineIconsIconElement()
-
-document.querySelector('#app')!.innerHTML = `
-
-`
-
-console.log(iconsIconNames)
+defineAppIconElement()
```
-Generated facade ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `sprite.svg?no-inline`: Vite Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠΏΡΡΠΊΠ°Π΅Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ hashed SVG asset ΠΈ Π½Π΅ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅Ρ Π΅Π³ΠΎ Π² data URL. TypeScript-ΠΏΡΠΎΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ Vite types:
+ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΡ Π² HTML:
-```ts
-///
+```html
+
```
-Π Π°Π·ΠΌΠ΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°Π²Π΅Π½ `1em`, ΠΏΠΎΡΡΠΎΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΡΠ΅Π· `font-size`. Π¦Π²Π΅Ρ Π·Π°Π΄Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· `color` ΠΈ generated custom properties:
+Π€Π°ΠΉΠ» `check.svg` Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΠΊΠ°ΠΊ `icon="check"`. Π Π°Π·ΠΌΠ΅Ρ ΠΈ ΡΠ²Π΅ΡΠ° Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· CSS:
```css
-icons-icon {
+app-icon {
font-size: 24px;
color: #334155;
--icon-color-2: #f59e0b;
}
```
-## 2. ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+ΠΠΎΠ½ΠΎΡ
ΡΠΎΠΌΠ½Π°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ° Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ `color`, Π° ΡΠ²Π΅ΡΠ° ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠ΅ΡΠ΅Π· `--icon-color-N`. ΠΡΠΆΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Viewer.
-Viewer Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½ ΠΈ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ debug/preview. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ:
+Vite ΡΠ°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ `sprite.svg` Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΡ ΡΠ±ΠΎΡΠΊΡ. ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² `public` Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
+
+## ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+
+Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ CSS-ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. ΠΠ½ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ:
```bash
npm install --save-dev @gromlab/svg-sprites
```
-ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ Viewer ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΠΉΡΠ΅ generated JS manifest ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ `sources`:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ `svg-sprite.html` Π² ΠΊΠΎΡΠ½Π΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
+
+```html
+
+
+
+
+ ΠΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°
+
+
+
+
+
+
+
+
+
+```
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ `src/svg-sprite-debug.ts`:
```ts
import '@gromlab/svg-sprites/viewer/element'
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
-import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
-
-document.querySelector('#app')!.insertAdjacentHTML(
- 'beforeend',
- '',
-)
+import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
const viewer = document.querySelector('gromlab-sprite-viewer')!
-viewer.viewerTitle = 'ΠΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°'
viewer.sources = [spriteManifest]
```
-Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ ΡΠΎΠ»ΡΠΊΠΎ Π² debug entry ΠΈΠ»ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΌ ΠΌΠ°ΡΡΡΡΡΠ΅. Viewer Π½Π΅ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² production runtime ``.
+ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ `npm run dev` ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ `/svg-sprite.html`.
-## 3. Π’ΠΈΠΏΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³Π°
-
-ΠΡΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌ package ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ helper:
-
-```ts
-import { defineSpriteConfig } from '@gromlab/svg-sprites'
-
-export default defineSpriteConfig({
- mode: 'standalone@vite',
- name: 'icons',
-})
-```
-
-ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π° Ρ package: `import type { SpriteConfig }` ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ `satisfies SpriteConfig`.
-
-ΠΠ΅Π· package ΡΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ type ΠΏΡΡΠΌΠΎ Π² config:
-
-```ts
-type LocalSpriteConfig = {
- mode: 'standalone@vite'
- name?: string
- description?: string
- input?: string | string[]
- transform?: {
- removeSize?: boolean
- replaceColors?: boolean
- addTransition?: boolean
- }
- generatedNotice?: boolean
-}
-
-export default {
- mode: 'standalone@vite',
- name: 'icons',
-} satisfies LocalSpriteConfig
-```
-
-ΠΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ type ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ `mode` ΠΎΠ΄Π½ΠΈΠΌ exact literal ΠΈ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ.
+Viewer Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ `` ΠΈ Π½Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ ΠΊΠΎΠ΄Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
diff --git a/docs/ru/guides/standalone-webpack.md b/docs/ru/guides/standalone-webpack.md
index f60ca05..bc3bb31 100644
--- a/docs/ru/guides/standalone-webpack.md
+++ b/docs/ru/guides/standalone-webpack.md
@@ -1,145 +1,111 @@
-# ΠΠ°ΡΠΈΠ²Π½ΡΠΉ icon Web Component Ρ Webpack 5
+# SVG-ΡΠΏΡΠ°ΠΉΡ Π΄Π»Ρ Webpack 5 Π±Π΅Π· ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°
-ΠΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΠΉ quick start Π΄Π»Ρ exact mode key `standalone@webpack`: generated facade ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ``, Π° Webpack 5 ΠΏΡΠ±Π»ΠΈΠΊΡΠ΅Ρ SVG ΡΠ΅ΡΠ΅Π· Asset Modules.
+ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Webpack 5 Π±Π΅Π· ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°.
-## 1. ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
+## ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ°
-ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ: Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² `package.json`. `npx` Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅Ρ CLI, Π° generated production runtime Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅Ρ `@gromlab/svg-sprites`.
+ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠΏΡΠ°ΠΉΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ `assets/app-icons`, Π° ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ SVG Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² `assets/svg-icons`.
-```text
-src/sprite/
-βββ icons/
-β βββ check.svg
-β βββ warning.svg
-βββ index.ts
-βββ svg-sprite.config.ts
-```
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ `assets/app-icons/svg-sprite.config.json`:
-ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ config ΡΡΠ΄ΠΎΠΌ Ρ `icons/`:
-
-```ts
-export default {
- mode: 'standalone@webpack',
- name: 'icons',
+```json
+{
+ "mode": "standalone@webpack",
+ "name": "app",
+ "input": "../svg-icons/**/*.svg"
}
```
-ΠΡΠ»ΠΈ `input` Π½Π΅ ΡΠΊΠ°Π·Π°Π½, SVG ΡΠΈΡΠ°ΡΡΡΡ ΠΈΠ· `./icons` ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠΈΠ³Π°. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ°ΠΊΠΆΠ΅ `.js` Ρ `default export` ΠΈ `.json`.
+ΠΡΡΡ Π² `input` ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΠ°ΠΏΠΊΠΈ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ.
-```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts
-```
-
-ΠΠ»Ρ CI Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΠ΅ ΡΠΎΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ `@gromlab/svg-sprites@1.1.5`. Exact Webpack commands:
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π² `package.json`. Π‘Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ· Git, ΠΏΠΎΡΡΠΎΠΌΡ `predev` ΠΈ `prebuild` ΠΏΠ΅ΡΠ΅ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΡΠΏΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΠΈ ΡΠ±ΠΎΡΠΊΠΎΠΉ:
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/sprite/svg-sprite.config.ts",
- "dev": "npm run sprites && webpack serve --mode development",
- "build": "npm run sprites && webpack --mode production",
- "typecheck": "npm run sprites && tsc --noEmit"
+ "sprites": "npx --yes @gromlab/svg-sprites assets/app-icons/svg-sprite.config.json",
+ "predev": "npm run sprites",
+ "dev": "webpack serve --mode development",
+ "prebuild": "npm run sprites",
+ "build": "webpack --mode production"
}
}
```
-ΠΠ΅ Π΄ΡΠ±Π»ΠΈΡΡΠΉΡΠ΅ Π·Π°ΠΏΡΡΠΊ ΡΠ΅ΡΠ΅Π· `predev`/`prebuild`, Π΅ΡΠ»ΠΈ scripts ΡΠΆΠ΅ ΡΠ²Π½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ `npm run sprites`. Generated `.svg-sprite` Π½Π΅ ΠΊΠΎΠΌΠΌΠΈΡΠΈΡΡΡ. Generated Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ `.gitignore`, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Git ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. ΠΠ³ΠΎ declarations self-contained ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΡΡ `@gromlab/svg-sprites`.
+## ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ°
+
+ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ `name: "app"` ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ``.
+
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΊΡ Π²Ρ
ΠΎΠ΄Π° `assets/app-icons/index.ts`:
```ts
-// src/sprite/index.ts
export * from './.svg-sprite/index.js'
```
-Production usage:
+ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ entry ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
```ts
-import { defineIconsIconElement, iconsIconNames } from './sprite'
+import { defineAppIconElement } from '../assets/app-icons'
+import './style.css'
-defineIconsIconElement()
-
-document.querySelector('#app')!.innerHTML = `
-
-`
-
-console.log(iconsIconNames)
+defineAppIconElement()
```
-Generated facade ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ `new URL('./sprite.svg', import.meta.url).href`. Webpack 5 Asset Modules Π²ΡΠΏΡΡΠΊΠ°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ asset; Π΅Π³ΠΎ ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΉ URL ΡΡΠΈΡΡΠ²Π°Π΅Ρ `output.publicPath` ΠΈ `assetModuleFilename`.
+ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΡ Π² HTML:
-ΠΡΠ»ΠΈ ΠΏΡΠΎΠ΅ΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ `@svgr/webpack`, `svg-inline-loader`, `raw-loader` ΠΈΠ»ΠΈ ΠΎΠ±ΡΠΈΠΉ SVG rule, ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅ `src/sprite/.svg-sprite/sprite.svg` ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°. Generated SVG Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ `asset/resource`, Π° Π½Π΅ ΠΊΠ°ΠΊ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΠ»ΠΈ inline source.
+```html
+
+```
-Π Π°Π·ΠΌΠ΅Ρ Web Component ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ `1em`; ΡΠΏΡΠ°Π²Π»ΡΠΉΡΠ΅ ΠΈΠΌ ΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ ΠΎΠ±ΡΡΠ½ΡΠΌ CSS:
+Π€Π°ΠΉΠ» `check.svg` Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΠΊΠ°ΠΊ `icon="check"`. Π Π°Π·ΠΌΠ΅Ρ ΠΈ ΡΠ²Π΅ΡΠ° Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· CSS:
```css
-icons-icon {
+app-icon {
font-size: 24px;
color: #334155;
--icon-color-2: #f59e0b;
}
```
-## 2. ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+ΠΠΎΠ½ΠΎΡ
ΡΠΎΠΌΠ½Π°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ° Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ `color`, Π° ΡΠ²Π΅ΡΠ° ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠ΅ΡΠ΅Π· `--icon-color-N`. ΠΡΠΆΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Viewer.
-Viewer Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½. ΠΠ»Ρ debug/preview ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ package ΠΊΠ°ΠΊ dev dependency:
+Webpack 5 ΡΠ°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ `sprite.svg` Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΡ ΡΠ±ΠΎΡΠΊΡ.
+
+## ΠΠ΅Π±Π°Π³ ΠΈ ΠΏΡΠ΅Π²ΡΡ
+
+Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ CSS-ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. ΠΠ½ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ.
+
+Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Viewer:
```bash
npm install --save-dev @gromlab/svg-sprites
```
-ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ element entry ΠΈ generated JS manifest:
+Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ entry `src/svg-sprite-debug.ts`:
```ts
import '@gromlab/svg-sprites/viewer/element'
import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
-import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
+import spriteManifest from '../assets/app-icons/.svg-sprite/svg-sprite.manifest.js'
-document.querySelector('#app')!.insertAdjacentHTML(
- 'beforeend',
- '',
-)
-
-const viewer = document.querySelector('gromlab-sprite-viewer')!
+const viewer = document.createElement('gromlab-sprite-viewer') as SpriteViewerElement
viewer.viewerTitle = 'ΠΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°'
viewer.sources = [spriteManifest]
+document.body.append(viewer)
```
-Webpack ΡΠ²ΡΠΆΠ΅Ρ manifest Ρ ΡΠ΅ΠΌ ΠΆΠ΅ emitted SVG asset. ΠΡΡΠ°Π²Π»ΡΠΉΡΠ΅ Viewer ΡΠΎΠ»ΡΠΊΠΎ Π² debug entry: production `` ΠΎΡ Π½Π΅Π³ΠΎ Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ.
+ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΊΡΠΈΠΏΡ ΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ entry ΡΠΎΠ»ΡΠΊΠΎ Π² development-ΡΠ΅ΠΆΠΈΠΌΠ΅. Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ `webpack.config.js`:
-## 3. Π’ΠΈΠΏΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³Π°
-
-ΠΠΎΡΠ»Π΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ package ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ helper:
-
-```ts
-import { defineSpriteConfig } from '@gromlab/svg-sprites'
-
-export default defineSpriteConfig({
- mode: 'standalone@webpack',
- name: 'icons',
+```js
+export default (_env, argv) => ({
+ // ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Webpack.
+ entry: [
+ './src/main.ts',
+ ...(argv.mode === 'development' ? ['./src/svg-sprite-debug.ts'] : []),
+ ],
})
```
-ΠΠΈΠ±ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠΉΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ `SpriteConfig` ΠΊΠ°ΠΊ type ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ `satisfies SpriteConfig`.
+ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ `npm run dev`. Viewer ΠΏΠΎΡΠ²ΠΈΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
-ΠΠ΅Π· package Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ copy-paste type Π² ΡΠ°ΠΌ config:
-
-```ts
-type LocalSpriteConfig = {
- mode: 'standalone@webpack'
- name?: string
- description?: string
- input?: string | string[]
- transform?: {
- removeSize?: boolean
- replaceColors?: boolean
- addTransition?: boolean
- }
- generatedNotice?: boolean
-}
-
-export default {
- mode: 'standalone@webpack',
- name: 'icons',
-} satisfies LocalSpriteConfig
-```
-
-ΠΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ exact mode Π±Π΅Π· runtime import ΠΈ Π±Π΅Π· Π·Π°ΠΏΠΈΡΠΈ generator package Π² ΠΏΡΠΎΠ΅ΠΊΡ.
+Viewer Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² development-ΡΠ±ΠΎΡΠΊΡ ΠΈ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² production.
diff --git a/docs/ru/next-app.md b/docs/ru/next-app.md
deleted file mode 100644
index 9b8acea..0000000
--- a/docs/ru/next-app.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Guides Next.js App Router ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½Ρ
-
-- [App Router + Turbopack](guides/next-app-turbopack.md)
-- [App Router + Webpack](guides/next-app-webpack.md)
diff --git a/docs/ru/next-pages.md b/docs/ru/next-pages.md
deleted file mode 100644
index 07429da..0000000
--- a/docs/ru/next-pages.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Guides Next.js Pages Router ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½Ρ
-
-- [Pages Router + Turbopack](guides/next-pages-turbopack.md)
-- [Pages Router + Webpack](guides/next-pages-webpack.md)
diff --git a/docs/ru/programmatic-api.md b/docs/ru/programmatic-api.md
deleted file mode 100644
index b5e68be..0000000
--- a/docs/ru/programmatic-api.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ API ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠ½
-
-Canonical Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ: [ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ API](reference/programmatic-api.md).
diff --git a/docs/ru/react-vite.md b/docs/ru/react-vite.md
deleted file mode 100644
index 0a92e9b..0000000
--- a/docs/ru/react-vite.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Guide React + Vite ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠ½
-
-Canonical guide: [React + Vite](guides/react-vite.md).
diff --git a/docs/ru/react-webpack.md b/docs/ru/react-webpack.md
deleted file mode 100644
index b47ded9..0000000
--- a/docs/ru/react-webpack.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Guide React + Webpack ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠ½
-
-Canonical guide: [React + Webpack](guides/react-webpack.md).
diff --git a/docs/ru/reference.md b/docs/ru/reference.md
deleted file mode 100644
index caa74ab..0000000
--- a/docs/ru/reference.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Π’Π΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠ½
-
-Canonical Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ: [ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ](reference/technical.md).
diff --git a/docs/ru/reference/programmatic-api.md b/docs/ru/reference/programmatic-api.md
index 209c76f..3a644b2 100644
--- a/docs/ru/reference/programmatic-api.md
+++ b/docs/ru/reference/programmatic-api.md
@@ -14,6 +14,21 @@ const result = await generateSprite(
)
```
+Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠΌΡ ΠΈ mode ΡΠΏΡΠ°ΠΉΡΠ°, ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ filesystem paths:
+
+```ts
+result.name
+result.mode
+result.target
+result.iconCount
+result.rootDir
+result.generatedDir
+result.spritePath
+result.manifestPath
+```
+
+Next.js modes Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ `router` ΠΈ `bundler`.
+
ΠΠ»Ρ static standalone mode `result.spritePath` ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² build-ΡΠΊΡΠΈΠΏΡΠ΅,
ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ SVG ΠΏΠΎ URL ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
@@ -29,7 +44,7 @@ await copyFile(result.spritePath, 'dist/app-icons/sprite.svg')
`spritePath` ΡΠ²Π»ΡΠ΅ΡΡΡ filesystem path, Π° Π½Π΅ browser URL. Deployment-neutral JSON
manifest Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΡΠ΅ΡΠ΅Π· `result.manifestPath` ΠΈ ΠΊΠΎΠΏΠΈΡΡΠ΅ΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ SVG.
-ΠΠ΅ΡΠ²ΡΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΡΡ ΠΊ config-ΡΠ°ΠΉΠ»Ρ Ρ Π»ΡΠ±ΡΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ `.ts`, `.js` ΠΈΠ»ΠΈ `.json`. ΠΠ°ΡΠ°Π»ΠΎΠ³ Π²ΠΌΠ΅ΡΡΠΎ ΡΠ°ΠΉΠ»Π° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ config-less ΡΠ΅ΠΆΠΈΠΌ: ΠΊΠΎΡΠ½Π΅ΠΌ sprite-ΠΌΠΎΠ΄ΡΠ»Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³.
+ΠΠ΅ΡΠ²ΡΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΡΡ ΠΊ config-ΡΠ°ΠΉΠ»Ρ Ρ Π»ΡΠ±ΡΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ `.ts`, `.js` ΠΈΠ»ΠΈ `.json`. ΠΠ°ΡΠ°Π»ΠΎΠ³ Π²ΠΌΠ΅ΡΡΠΎ ΡΠ°ΠΉΠ»Π° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ config-less ΡΠ΅ΠΆΠΈΠΌ: ΠΊΠΎΡΠ½Π΅ΠΌ sprite-ΠΌΠΎΠ΄ΡΠ»Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΡΠΎΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³.
ΠΡΠΎΡΠΎΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ overrides ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ Π½Π°Π΄ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ:
@@ -107,13 +122,17 @@ await generateNextSprite('path/to/config.ts', {
```ts
import {
+ isSpriteMode,
loadSpriteConfig,
resolveSpriteConfig,
+ resolveSpriteConfigSource,
validateSpriteConfig,
} from '@gromlab/svg-sprites'
```
+- `isSpriteMode(value)` ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ, ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΌ exact mode.
- `loadSpriteConfig(file)` Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠ²Π½ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ `.ts`, `.js` ΠΈΠ»ΠΈ `.json` ΡΠ°ΠΉΠ».
+- `resolveSpriteConfigSource(source)` ΡΠ°Π·ΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΡΡ ΠΊΠ°ΠΊ config-ΡΠ°ΠΉΠ» ΠΈΠ»ΠΈ config-less ΠΊΠ°ΡΠ°Π»ΠΎΠ³.
- `validateSpriteConfig(value)` Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ runtime-Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ°.
- `resolveSpriteConfig(root, config, overrides)` ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ defaults ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ `root`.
@@ -138,6 +157,16 @@ import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
Browser entry ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠ΅Ρ ``. Bare standalone ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΡΠΉ `dist/viewer-element.js` Π±Π΅Π· bundler.
+ΠΠ»Ρ ΡΡΡΠ½ΠΎΠΉ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠΉΡΠ΅ runtime Π±Π΅Π· auto-register entry:
+
+```ts
+import { defineSpriteViewerElement } from '@gromlab/svg-sprites/viewer'
+
+defineSpriteViewerElement()
+```
+
+ΠΡΠΎΡ entry ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΡΠΏΠΎΡΡΠΈΡΡΠ΅Ρ ΡΠΈΠΏΡ `SpriteViewerElement`, `SpriteViewerManifest`, `SpriteViewerSource`, `SpriteViewerSources` ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠΈΠΏΡ manifest ΠΈ loaders.
+
React bridge ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ½ΡΠΉ API:
```tsx
diff --git a/docs/ru/reference/technical.md b/docs/ru/reference/technical.md
index 0122739..2ccbc54 100644
--- a/docs/ru/reference/technical.md
+++ b/docs/ru/reference/technical.md
@@ -2,6 +2,8 @@
[ΠΠ½Π΄Π΅ΠΊΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ](../README.md)
+[ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ JSON, JavaScript ΠΈ TypeScript](../configuration.md)
+
Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΠΏΠΎ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ, generated API ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ `@gromlab/svg-sprites`. ΠΠΎΡΠ°Π³ΠΎΠ²ΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π² ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΡΠ΅ΠΊΠ°:
- [Bare standalone](../guides/standalone.md)
@@ -24,7 +26,7 @@
ΠΠ»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π½Π΅ Π½ΡΠΆΠ½Π° dependency ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ°ΠΏΡΡΠΊΠ°ΠΉΡΠ΅ CLI ΡΠ΅ΡΠ΅Π· `npx`:
```bash
-npx --yes --package=@gromlab/svg-sprites@latest svg-sprites path/to/svg-sprite.config.ts
+npx --yes @gromlab/svg-sprites path/to/svg-sprite.config.json
```
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΠΉΡΠ΅ ΠΏΠ°ΠΊΠ΅Ρ ΠΊΠ°ΠΊ development dependency, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΠΏΡΠΎΠ΅ΠΊΡΡ Π½ΡΠΆΠ½Ρ
@@ -36,7 +38,7 @@ npm install --save-dev @gromlab/svg-sprites
## CLI ΠΈ ΡΠ΅ΠΆΠΈΠΌΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ
-CLI ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠΎΠ²Π½ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡΡΡ: ΡΠ²Π½ΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ config-ΡΠ°ΠΉΠ» Π»ΠΈΠ±ΠΎ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Π΄Π»Ρ config-less Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ:
+ΠΠ»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ CLI ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠΎΠ²Π½ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡΡΡ: ΡΠ²Π½ΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ config-ΡΠ°ΠΉΠ» Π»ΠΈΠ±ΠΎ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Π΄Π»Ρ config-less Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ:
```text
svg-sprites [options]
@@ -54,11 +56,11 @@ svg-sprites [options]
| Next.js Pages Router + Turbopack | `next@pages/turbopack` |
| Next.js Pages Router + Webpack 5 | `next@pages/webpack` |
-Config-ΡΠ°ΠΉΠ» ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΈΠΌΡ ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ `.ts`, `.js` ΠΈΠ»ΠΈ `.json`. CLI Π½Π΅ ΠΈΡΠ΅Ρ ΠΊΠΎΠ½ΡΠΈΠ³ ΠΏΠΎ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡ: ΡΠ°ΠΉΠ» Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠ²Π½ΠΎ. Π ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π°Ρ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠΎΠ΅ ΠΈΠΌΡ `svg-sprite.config.ts`.
+Config-ΡΠ°ΠΉΠ» ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΈΠΌΡ ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ `.ts`, `.js` ΠΈΠ»ΠΈ `.json`. CLI Π½Π΅ ΠΈΡΠ΅Ρ ΠΊΠΎΠ½ΡΠΈΠ³ ΠΏΠΎ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡ: ΡΠ°ΠΉΠ» Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠ²Π½ΠΎ. Π ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π°Ρ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠΎΠ΅ ΠΈΠΌΡ `svg-sprite.config.json`.
ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π½ ΠΊΠ°ΡΠ°Π»ΠΎΠ³, Π²ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π±Π΅ΡΡΡΡΡ ΠΈΠ· CLI. ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π½ config-ΡΠ°ΠΉΠ», CLI-ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°ΠΉΠ»Π°. ΠΠ±ΡΠΈΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ: `defaults β config β CLI`.
-ΠΠΎΡΡΡΠΏΠ½Ρ `--mode`, `--name`, `--description`, ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΠΌΡΠΉ `--input `, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ°ΡΡ `--remove-size`/`--no-remove-size`, `--replace-colors`/`--no-replace-colors`, `--add-transition`/`--no-add-transition` ΠΈ `--generated-notice`/`--no-generated-notice`. ΠΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΠ΅ transform-ΡΠ»Π°Π³ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ, Π° Ρ
ΠΎΡΡ Π±Ρ ΠΎΠ΄ΠΈΠ½ `--input` ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΌΠ΅Π½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ `input` ΠΈΠ· config.
+`--help` ΠΈ `-h` Π²ΡΠ²ΠΎΠ΄ΡΡ ΡΠΏΡΠ°Π²ΠΊΡ Π±Π΅Π· ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΡΠΈ. ΠΠ»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ `--mode`, `--name`, `--description`, ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΠΌΡΠΉ `--input `, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ°ΡΡ `--remove-size`/`--no-remove-size`, `--replace-colors`/`--no-replace-colors`, `--add-transition`/`--no-add-transition` ΠΈ `--generated-notice`/`--no-generated-notice`. ΠΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΠ΅ transform-ΡΠ»Π°Π³ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ, Π° Ρ
ΠΎΡΡ Π±Ρ ΠΎΠ΄ΠΈΠ½ `--input` ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΌΠ΅Π½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ `input` ΠΈΠ· config.
Π CLI Π·Π°ΠΊΠ»ΡΡΠ°ΠΉΡΠ΅ glob-ΠΏΠ°ΡΡΠ΅ΡΠ½Ρ Π² ΠΎΠ΄ΠΈΠ½Π°ΡΠ½ΡΠ΅ ΠΊΠ°Π²ΡΡΠΊΠΈ, ΡΡΠΎΠ±Ρ shell Π½Π΅ ΡΠ°ΡΠΊΡΡΠ» ΠΈΡ
Π΄ΠΎ Π·Π°ΠΏΡΡΠΊΠ° Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ°:
@@ -96,7 +98,7 @@ export default defineSpriteConfig({
| ΠΠΏΡΠΈΡ | Π’ΠΈΠΏ | ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ |
|---|---|---|---|
| `mode` | `SpriteMode` | ΠΠ΅Ρ | Π Π΅ΠΆΠΈΠΌ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ; ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠ΅ΡΠ΅Π· CLI/API |
-| `name` | `string` | ΠΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΈΠ· ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° | ΠΠΌΡ ΡΠΏΡΠ°ΠΉΡΠ°, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈ ΠΏΡΠ±Π»ΠΈΡΠ½ΡΡ
ΡΠΈΠΏΠΎΠ² |
+| `name` | `string` | ΠΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΈΠ· ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° | ΠΠΌΡ ΡΠΏΡΠ°ΠΉΡΠ°; Π² modes Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π΄Π°ΡΡ ΠΈΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈ ΠΏΡΠ±Π»ΠΈΡΠ½ΡΡ
ΡΠΈΠΏΠΎΠ² |
| `description` | `string` | ΠΠ΅Ρ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΈΠΏΠΎΠ² ΠΈ debug manifest |
| `input` | `string \| string[]` | `./icons` | ΠΠ°ΠΏΠΊΠΈ, SVG-ΡΠ°ΠΉΠ»Ρ ΠΈ glob-ΠΏΠ°ΡΡΠ΅ΡΠ½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ°ΠΏΠΊΠΈ ΠΊΠΎΠ½ΡΠΈΠ³Π° |
| `transform` | `TransformOptions` | ΠΡΠ΅ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ | ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠΈ SVG |
@@ -111,7 +113,7 @@ app β AppIcon
file-manager β FileManagerIcon
```
-ΠΡΠ»ΠΈ `name` Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ, Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π΅Π³ΠΎ ΠΈΠ· ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π°. ΠΠ»Ρ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ `svg-sprite` ΠΈΠ»ΠΈ `svg-sprites` ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΈΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π°.
+ΠΡΠ»ΠΈ `name` Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ, Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΠΈΠΌΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° Π² kebab-case. ΠΠ»Ρ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ `svg-sprite` ΠΈΠ»ΠΈ `svg-sprites` ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΈΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π°.
### ΠΡΡΠΎΡΠ½ΠΈΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ
@@ -141,7 +143,7 @@ file-manager β FileManagerIcon
```text
app-icons/
βββ .gitignore
-βββ svg-sprite.config.ts
+βββ svg-sprite.config.json
βββ index.ts # Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ barrel
βββ .svg-sprite/
βββ index.js
@@ -183,10 +185,10 @@ runtime asset ΠΈ deployment-neutral manifest data:
generated Web Component Π±Π΅Π· Π²Π½Π΅ΡΠ½ΠΈΡ
runtime-Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ. Bare `standalone`
Π½Π°ΠΌΠ΅ΡΠ΅Π½Π½ΠΎ Π½Π΅ ΡΠΎΠ·Π΄Π°ΡΡ JavaScript-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ.
-ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΈ ΡΠ΄Π°Π»ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΠ»Ρ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ marker. ΠΡΠ»ΠΈ Π² managed-ΠΏΡΡΠΈ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ°ΠΉΠ», Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ Π·Π°Π²Π΅ΡΡΠ°Π΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ. ΠΠΎΡΠ½Π΅Π²ΠΎΠΉ `index.ts` Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΡ Π½Π΅ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ; ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ barrel:
+`.svg-sprite` ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠΎΠΌ ΠΈ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ. ΠΡΠ±ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠ΅ Π² Π½Π΅Π³ΠΎ ΡΠ°ΠΉΠ»Ρ Π±ΡΠ΄ΡΡ ΡΠ΄Π°Π»Π΅Π½Ρ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΉΡΠ΅ ΡΡΠ΄ΠΎΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΌ `index.ts`:
```ts
-export * from './.svg-sprite'
+export * from './.svg-sprite/index.js'
```
## Standalone Web Component ΠΈ TypeScript
@@ -307,7 +309,7 @@ folder open.svg β icon="folder open" β id="icon-"
## ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠΏΡΠ°ΠΉΡΡ
-ΠΠ°ΠΆΠ΄ΡΠΉ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΡΠΈΠΏΡ, manifest ΠΈ SVG asset:
+ΠΠ°ΠΆΠ΄ΡΠΉ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΠΎΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΉ mode-specific ΠΊΠΎΠ½ΡΡΠ°ΠΊΡ. React ΠΈ Next.js ΡΠΎΠ·Π΄Π°ΡΡ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈ ΡΠΈΠΏΡ, `standalone@vite` ΠΈ `standalone@webpack` β Web Component ΠΈ ΡΠΈΠΏΡ, Π° bare `standalone` β SVG ΠΈ JSON manifest:
```text
app-icons β AppIcon β ΠΎΠ±ΡΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ
@@ -353,7 +355,7 @@ Static HTML ΠΏΠΎΡΠ»Π΅ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ `.svg-sprite/sprite.svg` ΠΏΡΠΈΠ»ΠΎ
```
-Standalone Vite/Webpack ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ generated `getIconsIconHref()` ΠΈ mapping
+Standalone Vite/Webpack ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ generated `getAppIconHref()` ΠΈ mapping
Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
IDs. ΠΠ΅ ΠΊΠΎΠ½ΡΡΡΡΠΈΡΡΠΉΡΠ΅ fragment ΠΈΠ· Π½Π΅Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ ΡΠ°ΠΉΠ»Π° Π²ΡΡΡΠ½ΡΡ.
Vite:
@@ -602,7 +604,7 @@ Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π³ΡΡΠΏΠΏΡ, ΠΏΠΎΠΈΡΠΊ, `viewBox`, CSS-ΠΏΠ΅ΡΠ΅ΠΌ
```json
{
"scripts": {
- "sprites": "npx --yes --package=@gromlab/svg-sprites@latest svg-sprites src/ui/app-icons/svg-sprite.config.ts",
+ "sprites": "npx --yes @gromlab/svg-sprites src/ui/app-icons/svg-sprite.config.ts",
"predev": "npm run sprites",
"prebuild": "npm run sprites",
"pretypecheck": "npm run sprites"
@@ -610,22 +612,22 @@ Viewer ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π³ΡΡΠΏΠΏΡ, ΠΏΠΎΠΈΡΠΊ, `viewBox`, CSS-ΠΏΠ΅ΡΠ΅ΠΌ
}
```
-CI Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ generation script Π΄ΠΎ ΡΠ±ΠΎΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΡΠΈΠΏΠΎΠ². ΠΠ»Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ `latest` Π½Π° ΡΠΎΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ. ΠΠΎΠΊΠ°Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° package Π½Π΅ Π½ΡΠΆΠ½Π°, Π΅ΡΠ»ΠΈ CI Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Viewer, package-ΡΠΈΠΏΡ config ΠΈΠ»ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ API.
+CI Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ generation script Π΄ΠΎ ΡΠ±ΠΎΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΡΠΈΠΏΠΎΠ². ΠΠΎΠΊΠ°Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° package Π½Π΅ Π½ΡΠΆΠ½Π°, Π΅ΡΠ»ΠΈ CI Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Viewer, package-ΡΠΈΠΏΡ config ΠΈΠ»ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ API.
-Bare `standalone` Π½Π΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ `.gitignore`: ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΌΠΎ ΡΠ΅ΡΠ°Π΅Ρ, ΠΊΠΎΠΌΠΌΠΈΡΠΈΡΡ ΠΈΠ»ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ `.svg-sprite/`. Π ΠΎΡΡΠ°Π»ΡΠ½ΡΡ
modes Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ `.gitignore`. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ°ΠΉΠ» Π²Π½ΡΡΡΠΈ `.svg-sprite`. ΠΠΎΡΠ½Π΅Π²ΠΎΠΉ `index.ts` ΠΎΡΡΠ°ΡΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ generated API.
+Bare `standalone` Π½Π΅ ΡΠΎΠ·Π΄Π°ΡΡ `.gitignore` ΠΈ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ°ΠΉΠ». ΠΡΠ»ΠΈ ΠΏΠΎΡΠ»Π΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ mode ΠΎΡΡΠ°Π»ΡΡ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ `.gitignore`, bare mode ΡΠ΄Π°Π»ΠΈΡ Π΅Π³ΠΎ. Π ΠΎΡΡΠ°Π»ΡΠ½ΡΡ
modes Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΎΡΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ `.gitignore` Π±Π΅Π· generated marker. ΠΠΎΡΠ½Π΅Π²ΠΎΠΉ `index.ts` ΠΎΡΡΠ°ΡΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ generated API.
## ΠΠΈΠ°Π³Π½ΠΎΡΡΠΈΠΊΠ°
-- ΠΠ΅Ρ `.svg-sprite/index.js`: Π·Π°ΠΏΡΡΡΠΈΡΠ΅ generation script Π΄ΠΎ ΠΈΠΌΠΏΠΎΡΡΠ° generated-ΠΌΠΎΠ΄ΡΠ»Ρ.
+- ΠΠ»Ρ Π²ΡΠ΅Ρ
modes, ΠΊΡΠΎΠΌΠ΅ bare `standalone`: Π΅ΡΠ»ΠΈ Π½Π΅Ρ `.svg-sprite/index.js`, Π·Π°ΠΏΡΡΡΠΈΡΠ΅ generation script Π΄ΠΎ ΠΈΠΌΠΏΠΎΡΡΠ° generated-ΠΌΠΎΠ΄ΡΠ»Ρ.
- ΠΠ΅ Π½Π°ΠΉΠ΄Π΅Π½ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ: ΠΏΠ΅ΡΠ΅Π΄Π°ΠΉΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ config-ΡΠ°ΠΉΠ» ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ sprite-ΠΌΠΎΠ΄ΡΠ»Ρ.
- ΠΠ΅ ΡΠΊΠ°Π·Π°Π½ mode: Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ `mode` Π² config Π»ΠΈΠ±ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΠΉΡΠ΅ `--mode`.
- ΠΠΊΠΎΠ½ΠΊΠ° ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ Π² ΡΠΈΠΏΠ΅: ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ `input`, ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ `.svg`, glob-ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ `**/*.svg` Π΄Π»Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΠΏΠ°ΠΏΠΎΠΊ.
- ΠΠΎΠ½ΡΠ»ΠΈΠΊΡ ΠΈΠΌΠ΅Π½ΠΈ: Π΄Π²Π° ΡΠ°Π·Π½ΡΡ
SVG ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ basename; ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ».
-- `Refusing to overwrite a user file`: Π² managed-ΠΏΡΡΠΈ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΡΠ°ΠΉΠ» Π±Π΅Π· generated marker.
+- `Refusing to overwrite a user file`: Π² ΠΊΠΎΡΠ½Π΅ sprite-ΠΌΠΎΠ΄ΡΠ»Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ `.gitignore`, ΠΊΠΎΡΠΎΡΡΠΉ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ.
- ΠΠΊΠΎΠ½ΠΊΠ° Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ: ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ `