Skip to content

Instantly share code, notes, and snippets.

@toch
Created May 3, 2013 08:55
Show Gist options
  • Save toch/5508052 to your computer and use it in GitHub Desktop.
Save toch/5508052 to your computer and use it in GitHub Desktop.
A Rake task to generate CSS Sprites for Bootstrap-like icons
require 'sprite_factory'
namespace :assets do
desc 'recreate sprite images and css'
task :resprite => :environment do
Dir.glob('app/assets/images/icons/*.svg').each do |svg_file|
%x(convert -antialias -background transparent #{svg_file} -resize 15x14 #{File.dirname svg_file}/#{File.basename(svg_file).gsub(/\.svg\z/, ".png")} )
end
SpriteFactory.cssurl = "image-url('$IMAGE')"
rules = []
rules << <<EOF
[class^="myicon-"], [class*=" myicon-"] {
display: inline-block;
width: 15px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url('icons.png');
background-position: 15px 14px;
background-repeat: no-repeat;
margin-top: 0;
vertical-align: text-bottom;
}
EOF
SpriteFactory.run!(
'app/assets/images/icons',
:style => :scss,
:layout => :packed,
:library => :chunkypng,
:selector => '.myicon-',
:output_style => 'app/assets/stylesheets/_mysprites.scss',
:nocomments => true
) do |images|
images.map do |name, data| # for each image, we add a CSS sprite
rules << ".myicon-#{name} { background-position: -#{data[:x]}px -#{data[:y]}px; }"
end
rules.join("\n")
end
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment