A PostCSS plugin to add special morphable icons done in pure HTML/CSS

Installation

npm install postcss-morphicon

Examples

Use HTML like this

<div class="icon">
    <span></span>
    <span></span>
    <span></span>
</div>

Then you can use morhicons like this in PostCSS:

.icon {
    morphicon: menu;
}
.icon:hover {
    morphicon: close;
}

that will produce

You can also pass-in more values to style the icons like so

.icon {
    /* a comma separated list of the following values */
    /* 
    [icon], 
    [icon width], 
    [icon height], 
    [icon line length], 
    [icon line thickness],
    [icon line color],
    [icon gap between lines]
    */
    morhicon: menu, 50px, 50px, 40px, 3px, red, 2px;
}

Icons

There are a number of available icons morphicons can create and morph into:

• menu
• arrow-right
• arrow-left
• arrow-up
• arrow-down
• caret-left
• caret-right
• caret-up
• caret-down
• close
• plus
• minus

Usage

Using Gulp.

var gulp            = require('gulp'),
    postcss         = require('gulp-postcss'),
    morphicon       = require('postcss-morphicon');

gulp.task('css', function() {
    gulp.src('path/to/dev/css').
        .pipe(postcss({
            morphicon
        }))
        .pipe(gulp.dest('path/to/build/css'));
});
// rest of the gulp file