Feather Webpack Plugin

Combine Feather icons into one using <symbol> elements which you may <use> in your markup and write the output to a file.

Uses svgstore on the back to create the <symbol> element.

This plugin is intended to be used with html-webpack-plugin, where the template is the output file this package produces.

Install

$ npm install --save feather-webpack-plugin

Usage

webpack.config.js

const FeatherPlugin = require('feather-webpack-plugin').default;

module.exports = {
  plugins: {
    new FeatherPlugin({
      template: 'template.ejs',
      output: 'output.ejs',
      line: 1,
      whitelist: [
        'home'
      ]
    })
  }
};

template.ejs

<a>Before</a>
<b>After</b>

Note

The template will only be generated before Webpack runs (by using the before-run plugin callback). Additional webpack compilations (with the --watch flag) won't trigger the template creation script. This plugin is intended for templates ready for production, and as the Webpack config cannot be modified during runtime, there's no way for the plugin to check for config changes.

Options

new FeatherPlugin(options: object)

| Name | Type | Description | |:---------------:|:-----------:|---------------------------------------------------------------------------------------| | template | {String} | The path where your template to be modified is stored. Relative to Webpack's context. | | output | {String} | The path where the generated template will be stored. Relative to Webpack's context. | | line | {Integer} | Line number where the SVG element is going to be inserted in the template file. | | whitelist | {Array} | Contains the names of Feather's icons you want to insert |

Additionally, all the options supported by svgstore are passed to the internal plugin instance. Take a look at their docs.