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.
$icons-defaults: (

  // Space around sprites in generated spritemap.
  // Useful with `$offset` parameter.
  // This setting is global for all spritemaps.
  // Can be set per spritemap with the `$spacing` parameter.
  spacing: 0,

  // Main icons directory. `sprite-map-create()`, base for sub dirs.
  dir: "icons",

  // Name of the png sub-folders.
  dir-png: "png",

  // Name of the hidpi png sub-folders.
  dir-hidpi: "png_2x",

  // Scale of the hidpi pngs.
  hidpi-scale: 2,

  // Minimum resolution ratio used in the hidpi media query.
  hidpi-ratio: 1.3,

  // Whether to embed icons as data URI in the `icon-single()` mixin.
  single-embed: true,

  // Default file format unless overridden by parameter, svg | png.
  format: "svg",

  // Whether to support legacy browsers, svg fallback.
  legacy: true

);

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 your Gemfile
bundle install --path . (manage your gems in project dir, not globally)
Add require 'SassyIcons' to your config.rb
Import it in your stylesheets with @import 'SassyIcons'

Usage

Example usage with Compass

@import 'SassyIcons';

bundle exec compass watch

Roadmap

More documentation
icon-generated() and generated() Don't force absolute positioning.
Rewrite generated() mixin
icon-generated() configurable calc() 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

Node.js
Ruby
Bundler via gem install bundler
grunt-cli via npm install -g grunt-cli

How to

Fork this repository
Run npm install
Make your changes + write tests
grunt test

Authors

Pascal Duez

Licence

SassyIcons is available under the MIT license.

chrirauch/SassyIcons