mirror of https://github.com/gromlab-ru/svg-sprites.git synced 2026-07-22 04:40:17 +03:00

Files

S.Gromov 81df9027cd feat: добавить локализацию документации и скиллов

- добавлены английские README и руководства с переключением языка
- сборка скиллов разделена на английскую и русскую версии
- локализованные документы включены в npm-пакет

2026-07-11 09:26:43 +03:00

2.3 KiB

Raw Blame History

Legacy mode

← Главная

Краткая инструкция по генерации централизованных SVG-спрайтов форматов symbol и stack с optional HTML preview.

1. Установите пакет

npm install @gromlab/svg-sprites

2. Подготовьте иконки и конфиг

project/
├── src/assets/icons/
│   ├── check.svg
│   └── folder.svg
└── svg-sprites.config.ts

// svg-sprites.config.ts
import { defineLegacyConfig } from '@gromlab/svg-sprites'

export default defineLegacyConfig({
  output: 'public/sprites',
  preview: true,
  sprites: [
    {
      name: 'icons',
      input: 'src/assets/icons',
      format: 'symbol',
    },
  ],
})

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

npx svg-sprites --mode legacy .

Результат:

public/sprites/
├── icons.sprite.svg
└── preview.html

При preview: false HTML-файл не создаётся. Для формата stack укажите format: 'stack'.

4. Используйте symbol-спрайт

<svg width="24" height="24" aria-label="Готово">
  <use href="/sprites/icons.sprite.svg#check"></use>
</svg>

5. Добавьте package script

{
  "scripts": {
    "sprites": "svg-sprites --mode legacy .",
    "prebuild": "npm run sprites"
  }
}

Несколько спрайтов

Добавьте несколько записей в sprites:

sprites: [
  {
    name: 'icons',
    input: 'src/assets/icons',
    format: 'symbol',
  },
  {
    name: 'logos',
    input: 'src/assets/logos',
    format: 'stack',
  },
]

Все результаты и общий preview.html будут записаны в output.

Если что-то не работает

Не найден конфиг: убедитесь, что svg-sprites.config.ts находится в переданном корне.
Нет иконок: проверьте sprites[].input и расширение .svg.
Не нужен preview: установите preview: false.

Для программного запуска используйте generateLegacy.

2.3 KiB Raw Blame History Unescape Escape