diff --git a/README.md b/README.md index 1f50542..34b043c 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,9 @@ It was designed to easily switch between SVG and PNG while working with icons as 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](https://github.com/pascalduez/grunt-svg2png)* @@ -40,15 +43,35 @@ Allows for easier positioning or centering. ```scss // Default settings. $icons-defaults: ( - spacing : 30px, // Space around sprites in generated sprite map. - dir : "icons", // Main icons directory. sprite-map-create() allows to use sub dirs. - dir-png : "png", // Name of the png sub-folders. - dir-hidpi : "png_2x", // Name of the hidpi png sub-folders. - hidpi-scale : 2, // Scale of the hidpi pngs. - hidpi-ratio : 1.3, // Minimum resolution ratio used in the hidpi media query. - single-embed : true // Whether to embed icons as data URI in the icon-single() mixin. - format : "svg", // Default file format unless overridden by parameter, svg | png. - legacy : true // Whether to support legacy browsers, svg fallback. + + // Space around sprites in generated sprite map. + // Useful with `$offset` parameter. + spacing: 0, + + // Main icons directory. sprite-map-create() allows to use 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. @@ -79,7 +102,7 @@ npm install sassyicons --save *Provided that [path] = path to SassyIcons* -#### Example usage with vanilla [Compass](http://compass-style.org/help/tutorials/command-line) +#### Example usage with [Compass](http://compass-style.org/help/tutorials/command-line) ```css @import 'SassyIcons'; ``` @@ -94,7 +117,7 @@ sass: { options: { bundleExec: true, // Optional usage of Bundler, but recommended. compass: true, - loadPath: ["[path]/dist/_SassyIcons.scss"] + loadPath: ['[path]/dist/_SassyIcons.scss'] } } ``` @@ -112,6 +135,7 @@ sass: { * 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. ## Development diff --git a/stylesheets/config/_config.scss b/stylesheets/config/_config.scss index 0fc4ba0..62ab703 100644 --- a/stylesheets/config/_config.scss +++ b/stylesheets/config/_config.scss @@ -8,7 +8,8 @@ $icons-defaults: ( // Space around sprites in generated sprite map. - spacing: 30px, + // Useful with `$offset` parameter. + spacing: 0, // Main icons directory. sprite-map-create() allows to use sub dirs. dir: "icons", diff --git a/stylesheets/icons/_icon.scss b/stylesheets/icons/_icon.scss index de67a8d..249f284 100644 --- a/stylesheets/icons/_icon.scss +++ b/stylesheets/icons/_icon.scss @@ -16,7 +16,7 @@ // Shorter mixin calls. $offset-x: nth($offset, 1); - $offset-y: nth($offset, 2); + $offset-y: nth($offset, length($offset)); $legacy-support: conf(legacy); diff --git a/stylesheets/icons/_sprite-map-create.scss b/stylesheets/icons/_sprite-map-create.scss index a2be313..6e089a2 100644 --- a/stylesheets/icons/_sprite-map-create.scss +++ b/stylesheets/icons/_sprite-map-create.scss @@ -8,13 +8,16 @@ $icons-maps: (); // // Create a new sprite map from folder. // -@mixin sprite-map-create($name) { +@mixin sprite-map-create( + $name, + $spacing: conf(spacing) +) { $sprites-1x: _join((conf(dir), $name, conf(dir-png), "*.png"), "/"); $sprites-2x: _join((conf(dir), $name, conf(dir-hidpi), "*.png"), "/"); - $map-1x: sprite-map($sprites-1x, $spacing: conf(spacing)); - $map-2x: sprite-map($sprites-2x, $spacing: conf(spacing)); + $map-1x: sprite-map($sprites-1x, $spacing: $spacing); + $map-2x: sprite-map($sprites-2x, $spacing: $spacing); $icons-maps: _map-set($icons-maps, $name, (1x: $map-1x, 2x: $map-2x)) !global; diff --git a/test/sass/test-icons.scss b/test/sass/test-icons.scss index 75c3a63..0797a69 100644 --- a/test/sass/test-icons.scss +++ b/test/sass/test-icons.scss @@ -43,7 +43,7 @@ } - @include sprite-map-create(social); + @include sprite-map-create(social, $spacing: 30px); @each $icon in ("facebook", "twitter", "googleplus", "xing", "linkedin") { @@ -56,7 +56,7 @@ } .icons--png--offset .#{$icon} { - @include icon(social, $icon, $offset: 15px 15px, $format: "png"); + @include icon(social, $icon, $offset: 15px, $format: "png"); } .icons--single--svg .#{$icon} {