Skip to content

A Brunch plugin for the librsvg node module


Notifications You must be signed in to change notification settings


Repository files navigation


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

Build Status Coverage Status

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


1. Install system-wide librsvg


brew install librsvg


sudo apt-get install librsvg2-dev

RedHat / OpenSUSE

sudo yum install librsvg2-devel


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:

    - ubuntu-toolchain-r-test
    - g++-4.8
    - librsvg2-dev
  - CXX=g++-4.8