ca136 / svg-url-loader

A webpack loader which loads SVG file as utf-8 encoded DataUrl string.

svg-url-loader

A webpack loader which loads SVG file as utf-8 encoded DataUrl string.

Existing url-loader always does Base64 encoding for data-uri. As SVG content is a human-readable xml string, using base64 encoding is not mandatory. Instead, one may only escape unsafe characters and replace " with ' as described in this article.

There are some benefits for choosing utf-8 encoding over base64.

1. Resulting string is shorter (can be ~2 times shorter for 2K-sized icons);
2. Resulting string will be compressed better when using gzip compression;
3. Browser parses utf-8 encoded string faster than its base64 equivalent.

Supported parameters

The loader supports the following parameters:

noquotes - passing this parameter (or setting to true) tells to loader not to include resulting string in quotes. This can be useful if one wants to use data-url for SVG image as a value for JavaScript variable.

Parameters can be passed both in a url or from webpack config file. See Using loaders section in webpack documentation for more details.

Usage

Documentation: Using loaders

In JS:

require("svg-url!./file.svg");
// => DataUrl for file.svg, enclosed in quotes

require("svg-url?noquotes!./file.svg");
// => DataUrl for file.svg, without quotes

In CSS (with webpack.config.js below):

.icon {
    background: url('../images/file.svg');
}

module.exports = {
  //...
	module: {
		loaders: [
			{test: /\.svg/, loader: 'svg-url-loader'}
		]
	},
	//...
};

License

MIT (http://www.opensource.org/licenses/mit-license.php)