rsvg-brunch

Copyright 2017-2018, Caleb Evans
Released under the MIT License

This plugin enables you to generate PNG icons of various sizes from one or more SVG files.

Usage

1. Install system-wide librsvg

macOS

brew install librsvg

Ubuntu

sudo apt-get install librsvg2-dev

RedHat / OpenSUSE

sudo yum install librsvg2-devel

Windows

See this blog post for librsvg Windows binaries.

2. Set plugin options

In brunch-config.js, you can provide options which should be passed to the plugin.

module.exports = {
  // ...
  plugins: {
    rsvg: {
      // A single "conversion" takes a single SVG file and generates one or more
      // output files (PNG by default)
      conversions: [{
        // The path to the input SVG file
        input: 'app/icons/app-icon.svg',
        // Default values for the below output files (as shown below, these
        // defaults can be overridden)
        outputDefaults: {path: 'icons/app-icon-{w}x{h}.png'},
        // A list of output files to generate
        output: [
          // If the height is not specified, it is assumed to be equal to the
          // width (or vice-versa)
          {width: 32, path: 'favicon.png'},
          {width: 180, path: 'apple-touch-icon.png'},
          // The path for the below icons will inherit from outputDefaults
          {width: 192},
          {width: 256},
          {width: 384},
          {width: 512}
        ]
      }]
    }
  }
  // ...
};

The above configuration will generate the following icons in the user's defined public directory for the project (usually public/):

• favicon.png (size: 32 x 32)
• apple-touch-icon.png (size: 180 x 180)
• icons/app-icon-192x192.png (size: 192 x 192)
• icons/app-icon-256x256.png (size: 256 x 256)
• icons/app-icon-384x384.png (size: 384 x 384)
• icons/app-icon-512x512.png (size: 512 x 512)

Path variables

You will have noticed above that any of the output paths can contain references to that output file's width and height, enclosed in curly brackets. Available variables are:

• {width}
• {height}
• {format}
• {id}

Configure Travis CI (if necessary)

Because rsvg-brunch requires librsvg to be installed, you'll need to add the following to your .travis.yml if you use Travis CI:

addons:
  apt:
    sources:
    - ubuntu-toolchain-r-test
    packages:
    - g++-4.8
    - librsvg2-dev
env:
  - CXX=g++-4.8