postcss-morphicon

1.0.0 • Public • Published

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

Package Sidebar

Install

npm i postcss-morphicon

Weekly Downloads

0

Version

1.0.0

License

MIT

Last publish

Collaborators

  • arpadhegedus