imgcssmap

About imgcssmap

Is a tool for merging all icons image in only one big image. The tool builds a css map of this icons. The css map is build with templates.

This is the resulting image:

This is a css map example:

[...]
span.i0 { /* 0: test_images/plastic_new_year/256/calendar.png */
   background:url(a.png) no-repeat -0px -0px;
   height:225px;
   width:231px;
   color:transparent;
   display:inline-block;
   border: #0000ff 1px solid;
}
span.i1 { /* 1: test_images/plastic_new_year/256/christmas_card.png */
   background:url(a.png) no-repeat -231px -0px;
   height:213px;
   width:233px;
   color:transparent;
   display:inline-block;
   border: #0000ff 1px solid;
}
[...]

And this is the exemple page

Build

The tool need libpng and libjpeg. just type "make" for building the project.

Command line help

imgcssmap [-t in_file out_file [-t in out [...]]] [-q 1-6] [-i] [-na rrggbb]
          [-c] -o output_image input_file [...]

   -t in_file out_file   in_file containing the template (typically CSS)
                         out_file file generated by the template
   -q 1-6                quality of colours. 6 is 8 bits per chanel quality
                         5 is 7 bits, 4 is 6 bits, 3 is 5 bits, 2 is 4 bits
                         and 1 is 3 bits
   -na rrggbb            remove alpha channel and replace it by the rrggbb
                         rrggbb is hexadecimal representation of the color
   -i                    interlace png output image
   -c                    crop unused alpha space into input file
   -o output_image       image builded

the template may contain this variables:
   $(width)   the image width
   $(height)  the image height
   $(offsetx) the x offset of the image
   $(offsety) the y offset of the image
   $(name)    the image name without extension
   $(azname)  the name only with this characters: 'a'-'z' '0'-'9' '_'
   $(id)      the index after sorting. first image is 0.

Download

https://github.com/thierry-f-78/imgcssmap/