Webpack plugin to generate PHP constants from SVG sprite symbol IDs.

Usage no npm install needed!

<script type="module">
  import wavevisionSpritesConstantsGeneratorPlugin from 'https://cdn.skypack.dev/@wavevision/sprites-constants-generator-plugin';


Wavevision s.r.o.

Sprites Constants Generator Plugin

Build Status Coverage Status npm (scoped) webpack

Webpack 4 plugin to generate PHP constants from SVG sprite symbol IDs based on svg-sprite-loader output.

Package contents


Use Yarn

yarn add --dev @wavevision/sprites-constants-generator-plugin

or npm

npm install --save-dev @wavevision/sprites-constants-generator-plugin

Note: It is highly recommended to install and include svgxuse in your bundle.


Assuming your sprites are loaded from <entry>/images/<spriteName>/<image>.svg and emitted into your build directory as <outputPath>/images/<spriteName>.svg, your webpack config can be:

import { basename, dirname, resolve } from 'path';

import SpritesConstantsGeneratorPlugin from '@wavevision/sprites-constants-generator-plugin';
import SVGSpriteLoaderPlugin from 'svg-sprite-loader/plugin';

const images = 'images';
const sprites = ['icons', 'pictograms'];

export default {
  // configure entries and output
  // ...
  module: {
    rules: [
        test: /\.svg$/,
        include: sprites.map(s => resolve(__dirname, 'src', images, s)),
        use: [
            loader: 'svg-sprite-loader',
            options: {
              extract: true,
              spriteFilename: pathname =>
              symbolId: '[folder]-[name]',
  plugins: [
    new SVGSpriteLoaderPlugin({ plainSprite: true }),
    new SpritesConstantsGeneratorPlugin({
      namespace: 'App\\UI\\Sprites',
      output: resolve(__dirname, 'src', 'App', 'UI', 'Sprites'),
      replace: sprite => [`${sprite}-`, ''],
      sprites: sprites.map(s => `${images}/${s}.svg`),

This will output to src/App/UI/Sprites:

  • Sprites.php containing constants with each sprite name
  • for every sprite a <SpriteName>.php containing constants with each symbolId as configured in svg-sprite-loader

Plugin options

ignoreErrors?: boolean

Run generator even if there are errors in webpack compilation. This option is disabled by default.

namespace: string

PHP namespace in which the generated classes will reside.

output: string

Absolute path to directory in which the generated classes will be put.

replace?: (sprite: string) => [RegExp | string, string]

Optional sprite name replacer function. Return a tuple in which:

  • the first element is a search value
  • the second element is a replacement

Replaces custom parts of sprite name before it is used in generated constants.


You can see in our webpack config we set symbolId: '[folder]-[name]' and spriteFilename to use images directory name as sprite name. For images in icons folder, that will output icons.svg sprite in which each symbol will have icons-<image> ID. When generating the constants class this will result in duplicate ICONS prefix so you will use the constant as Icons::ICONS_<image>. If you want to omit that duplicate, use the function as shown in the example, so the result will be Icons::<image>.

sprites: string[]

List of sprite paths relative to webpack output path.

useStaticClass?: boolean

If true, the generated classes will use Nette\StaticClass trait. This option is enabled by default.

useStrictTypes?: boolean

If true, the generated classes will have strict types declared. This option is enabled by default.