mirror of
https://github.com/gromlab-ru/svg-sprites.git
synced 2026-07-22 04:40:17 +03:00
114 lines
3.7 KiB
Markdown
114 lines
3.7 KiB
Markdown
# Универсальный SVG-спрайт на сервере
|
||
|
||
Сгенерируйте в CI или server worker универсальный SVG-спрайт, который смогут использовать приложения с разными frameworks и bundlers.
|
||
|
||
## Генерация спрайта
|
||
|
||
Устанавливать пакет в worker не нужно.
|
||
|
||
### 1. Подготовьте рабочий каталог
|
||
|
||
Поместите исходные SVG в папку `icons` текущего workspace:
|
||
|
||
```text
|
||
.
|
||
└── icons/
|
||
├── search.svg
|
||
└── settings.svg
|
||
```
|
||
|
||
Имена файлов без расширения станут именами иконок.
|
||
|
||
### 2. Запустите генерацию
|
||
|
||
Передайте mode, имя спрайта и путь к SVG через CLI:
|
||
|
||
```bash
|
||
npx --yes @gromlab/svg-sprites \
|
||
--mode standalone@server \
|
||
--name app \
|
||
--input './icons/**/*.svg' \
|
||
.
|
||
```
|
||
|
||
Config-файл для этого worker-сценария не нужен. Результат появится в `./.svg-sprite`:
|
||
|
||
```text
|
||
.
|
||
├── icons/
|
||
│ ├── search.svg
|
||
│ └── settings.svg
|
||
└── .svg-sprite/
|
||
├── sprite.<content-hash>.svg
|
||
├── sprite-root-viewbox.<content-hash>.svg
|
||
└── svg-sprite.manifest.json
|
||
```
|
||
|
||
### 3. Опубликуйте результат
|
||
|
||
Загрузите содержимое `.svg-sprite` в отдельный каталог S3 bucket:
|
||
|
||
```bash
|
||
aws s3 sync ./.svg-sprite/ s3://my-bucket/app-icons/
|
||
```
|
||
|
||
Этот же каталог можно раздавать через CDN. В публичном URL нет сегмента `.svg-sprite`:
|
||
|
||
```text
|
||
https://cdn.example.com/app-icons/
|
||
├── sprite.<content-hash>.svg
|
||
├── sprite-root-viewbox.<content-hash>.svg
|
||
└── svg-sprite.manifest.json
|
||
```
|
||
|
||
`standalone@server` также можно запускать через JSON, JavaScript или TypeScript config. Config подходит для постоянных настроек, локальных SVG из нескольких каталогов и SVG, загружаемых по HTTP(S).
|
||
|
||
## Использование спрайта
|
||
|
||
В consumer-приложении создайте обычный config. Например, для React с Vite:
|
||
|
||
```text
|
||
src/app-icons/
|
||
├── index.ts
|
||
└── svg-sprite.config.json
|
||
```
|
||
|
||
Укажите consumer mode и URL manifest из CDN:
|
||
|
||
```json
|
||
{
|
||
"mode": "react@vite",
|
||
"source": "remote",
|
||
"input": "https://cdn.example.com/app-icons/svg-sprite.manifest.json"
|
||
}
|
||
```
|
||
|
||
Добавьте пользовательскую точку входа:
|
||
|
||
```ts
|
||
// src/app-icons/index.ts
|
||
export * from './.svg-sprite/index.js'
|
||
```
|
||
|
||
Запустите обычную генерацию:
|
||
|
||
```bash
|
||
npx --yes @gromlab/svg-sprites src/app-icons/svg-sprite.config.json
|
||
```
|
||
|
||
После этого используйте generated-компонент так же, как со спрайтом из локальных SVG:
|
||
|
||
```tsx
|
||
import { AppIcon } from './app-icons'
|
||
|
||
export function SearchButton() {
|
||
return <AppIcon icon="search" aria-label="Поиск" />
|
||
}
|
||
```
|
||
|
||
Тот же CDN manifest поддерживают все 29 consumer modes. В каждом из них сохраняется нативный API выбранного framework и bundler.
|
||
|
||
## Дебаг и превью
|
||
|
||
`standalone@server` не создаёт отдельную страницу для просмотра иконок. Подключите опубликованный спрайт к consumer-приложению и откройте его в SpriteViewer: удалённый набор будет отображаться так же, как локальный.
|