Package Exports
- postcss-morphicon
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-morphicon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
A PostCSS plugin to add special morphable icons done in pure HTML/CSS
Installation
npm install postcss-morphiconExamples
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