Skip to content

Latest commit

 

History

History
110 lines (88 loc) · 2.83 KB

README.md

File metadata and controls

110 lines (88 loc) · 2.83 KB
Raw

rsvg-brunch

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.

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