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.
moduleexports = // ... 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-devenv: - CXX=g++-4.8