Универсальный SVG-спрайт на сервере

Сгенерируйте в CI или server worker универсальный SVG-спрайт, который смогут использовать приложения с разными frameworks и bundlers.

Генерация спрайта

Устанавливать пакет в worker не нужно.

1. Подготовьте рабочий каталог

Поместите исходные SVG в папку icons текущего workspace:

.
└── icons/
    ├── search.svg
    └── settings.svg

Имена файлов без расширения станут именами иконок.

2. Запустите генерацию

Передайте mode, имя спрайта и путь к SVG через CLI:

npx --yes @gromlab/svg-sprites \
  --mode standalone@server \
  --name app \
  --input './icons/**/*.svg' \
  .

Config-файл для этого worker-сценария не нужен. Результат появится в ./.svg-sprite:

.
├── 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:

aws s3 sync ./.svg-sprite/ s3://my-bucket/app-icons/

Этот же каталог можно раздавать через CDN. В публичном URL нет сегмента .svg-sprite:

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:

src/app-icons/
├── index.ts
└── svg-sprite.config.json

Укажите consumer mode и URL manifest из CDN:

{
  "mode": "react@vite",
  "source": "remote",
  "input": "https://cdn.example.com/app-icons/svg-sprite.manifest.json"
}

Добавьте пользовательскую точку входа:

// src/app-icons/index.ts
export * from './.svg-sprite/index.js'

Запустите обычную генерацию:

npx --yes @gromlab/svg-sprites src/app-icons/svg-sprite.config.json

После этого используйте generated-компонент так же, как со спрайтом из локальных SVG:

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: удалённый набор будет отображаться так же, как локальный.

3.7 KiB Raw Permalink Blame History Unescape Escape