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

Files

S.Gromov 1b5b446d8f docs: обновить установку и команды генерации

- пакет указан как development dependency
- команды переведены на локальный CLI без npx
- удалены версионные ограничения Next.js
- синхронизированы английская и русская документация и skills

2026-07-11 18:23:41 +03:00

1.8 KiB

Raw Blame History

Legacy mode

← Back to home

A quick guide to generating centralized SVG sprites in symbol and stack formats, with an optional HTML preview.

1. Install the package

npm install --save-dev @gromlab/svg-sprites

2. Prepare the icons and config

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. Add generation

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

Run the local package through the script:

npm run sprites

Result:

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

With preview: false, the HTML file is not created. For the stack format, specify format: 'stack'.

4. Use the symbol sprite

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

Multiple sprites

Add multiple entries to sprites:

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

All output files and the shared preview.html will be written to output.

Troubleshooting

Config not found: make sure svg-sprites.config.ts is located in the specified root directory.
No icons: check sprites[].input and the .svg extension.
Preview not needed: set preview: false.

For programmatic use, see generateLegacy.

1.8 KiB Raw Blame History