Sprites Constants Generator Plugin

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

Package contents

• webpack plugin
• runtime generator for svg-sprite-loader
• loader to de-colorize each SVG with fill="currentColor"

Installation

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.

Usage

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,
              runtimeGenerator:
                SpritesConstantsGeneratorPlugin.runtimeGenerator,
              spriteFilename: pathname =>
                `${images}/${basename(dirname(pathname))}.svg`,
              symbolId: '[folder]-[name]',
            },
          },
          SpritesConstantsGeneratorPlugin.loader,
        ],
      },
    ],
  },
  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.

Example

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.