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

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 @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. Run generation

npx svg-sprites --mode legacy .

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>

5. Add a package script

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

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