Norse Polytheistic Mythology

    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

    Install

    npm i postcss-morphicon

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • arpadhegedus