SassyIcons
Flexible system to manipulate icons, SVG, PNG, sprites.
Works on top of compass sprite API.
It was designed to easily switch between SVG and PNG while working with icons as background-images.
So you have more granular control over which icons to use as SVG or PNG.
SVG first with PNG sprite fallback, or PNG first with hidpi sprite support.
Also managing several "thematic" sprites a breeze.
Best workflow used in conjunction with grunt-svg2png.
Online preview (test folder).
Online Documentation (generated with SassDoc).
Mixins
sprite-map-create($name [, $spacing])
icon($map, $sprite [, $offset, $format])
icon-single($map, $sprite [, $format])
icon-generated($map, $sprite [, $pos, $centered, $format])
Configuration
// Default settings. ;
Override default values in a new $icons-settings
map.
Requirements
- Sass ~> 3.3.0
- Compass ~> 1.0.0.rc.1
Install
Git
git clone git@github.com:pascalduez/SassyIcons.git
npm
npm install sassyicons --save
Bower
bower install SassyIcons --save
Compass extension
Since SassyIcons is dependant on Compass, this is the recommended installation and usage.
- Add
gem 'SassyIcons', '~>0.1.0'
to yourGemfile
bundle install --path .
(manage your gems in project dir, not globally)- Add
require 'SassyIcons'
to yourconfig.rb
- Import it in your stylesheets with
@import 'SassyIcons'
Usage
Compass
Example usage with;
bundle exec compass watch
Roadmap
- More documentation
icon-generated()
andgenerated()
Don't force absolute positioning.- Rewrite
generated()
mixin icon-generated()
configurablecalc()
fallback- Helper mixin to work with
background-size
- Support for SVG sprites ?
- Support for SVG stacks ?
- Try to further improve output CSS
- More control over print position in the stylesheet ?
- Abstract and move away from compass sprites ?
- Move away from Modernizr classes ? Or make it an option.
- Clarify or remove the
@content
thing to pass additional rules to.svg
.
Development
You need
How to
- Fork this repository
- Run
npm install
- Make your changes + write tests
grunt test
- Commit + Pull request
Authors
Licence
SassyIcons is available under the MIT license.