postcss-material-icons

postcss-material-icons

PostCSS plugin that imports icons google's material design icon library

Install

$ npm install --save postcss-material-icons

Usage

const material = require('postcss-material-icons');

const css = 'body {background: material(face, white, 18)}';

//Use stand-alone:
material.process(css).then(res => console.log(res.css));
//=> 'body {background: url(/* base64-encoded white face icon */)}'

// Or as PostCSS plugin:
postcss([material()]).process(css).then(res => console.log(res.css));
//=> 'body {background: url(/* base64-encoded white face icon */)}'

Icons are being cached in the file system, so you won't download them twice.

CSS API

The plugin transforms material() into base64 encoded icon inside url() notation.

material(icon, [color], [size])

icon

Required

Icon name in the library:

.cart {
	background-image: material(shopping cart);
}

Yeah, without quotes and with whitespaces!

color

Default: black

Icon color. Either black or white.

size

Default: 24

Icon size in pixels. 18, 24, 36 or 48.

License

MIT © Dmitriy Sobolev