|
#!/bin/bash |
|
# |
|
# High def sprite build. |
|
# by Sérgio Lopes - http://sergiolopes.org/ |
|
# |
|
# Params: |
|
# $1 Sprite folder with SVGs |
|
# $2 Output path |
|
# |
|
# See original gist: https://gist.github.com/sergiolopes/4739627 |
|
|
|
# Configuration: how many pixels between each image on the sprite? |
|
SPACING=10 |
|
|
|
# Parsing command-line paramenters |
|
SPRITE="$1" |
|
SPRITE_NAME="$(basename "$SPRITE" | sed 's/\.[^\.]*$//g')" |
|
OUTPATH="$(echo "$1" | sed 's/\.[^\.]*$//g')" |
|
# OUTDIR="$2/$OUTPATH" |
|
OUTDIR="$1/sprite" |
|
|
|
# Helpers: simple functions |
|
function round { |
|
echo "($1+0.5)/1" | bc |
|
} |
|
function divisionBySixteen { |
|
echo "$1/16" | bc |
|
} |
|
|
|
# Prepare output directories |
|
echo Outputing to $OUTDIR |
|
rm -rf "$OUTDIR" |
|
mkdir -p "$OUTDIR" |
|
|
|
# Generate the SVG sprite. |
|
# Uses svg_stack to create the sprite |
|
python svg_stack.py --margin $SPACING --direction=v "$SPRITE"/*.svg > "$OUTDIR"/sprite.svg |
|
|
|
# Get sprite final width and height, using ImageMagick |
|
SPRITE_WIDTH=$(divisionBySixteen $(round $(identify -format '%w' "$OUTDIR"/sprite.svg)))em |
|
SPRITE_HEIGHT=$(divisionBySixteen $(round $(identify -format '%h' "$OUTDIR"/sprite.svg)))em |
|
|
|
# Generate base CSS for this sprite. |
|
# Includes main className, sprite URL, size, and PNG fallbacks. |
|
cat > "$OUTDIR"/sprite.css <<CSS |
|
.${SPRITE_NAME} { |
|
background-repeat: no-repeat; |
|
background-size: ${SPRITE_WIDTH} ${SPRITE_HEIGHT}; /* sprite_1x size */ |
|
|
|
display: inline-block; |
|
position: relative; |
|
font-size: 16px; |
|
|
|
/* image replacement */ |
|
overflow: hidden; |
|
text-indent: -9999px; |
|
} |
|
|
|
/* has SVG support */ |
|
.svg .${SPRITE_NAME} { |
|
background-image: url(${OUTPATH}/sprite.svg); |
|
} |
|
|
|
/* no SVG but retina (and JS) */ |
|
.no-svg.ratio2x .${SPRITE_NAME} { |
|
background-image: url(${OUTPATH}/sprite_2x.png); |
|
} |
|
|
|
/* (no-JS) or (no-SVG and no-retina) */ |
|
.no-js .${SPRITE_NAME}, |
|
.no-svg.ratio1x .${SPRITE_NAME} { |
|
background-image: url(${OUTPATH}/sprite_1x.png); |
|
} |
|
|
|
/* individual icons */ |
|
CSS |
|
|
|
sprite_size=0 |
|
|
|
# Iterate on all individual SVG files to generated each CSS class. |
|
for svg_file in "$SPRITE"/*.svg; do |
|
|
|
# Get this file width and height |
|
svg_file_px_height=$(round $(identify -format '%h' "${svg_file}")) |
|
svg_file_width=$(divisionBySixteen $(round $(identify -format '%w' "${svg_file}")))em |
|
svg_file_height=$(divisionBySixteen $svg_file_px_height)em |
|
|
|
# Get file name without .svg extension |
|
svg_file_name="$(basename "$svg_file" | sed 's/\.[^\.]*$//g')" |
|
|
|
# Output CSS class to this image. |
|
# Configures background-position accordingly |
|
cat >> "$OUTDIR"/sprite.css <<____CSS |
|
.${SPRITE_NAME}-${svg_file_name} { |
|
background-position: 0 -$(divisionBySixteen $sprite_size)em; |
|
height: ${svg_file_height}; |
|
width: ${svg_file_width}; |
|
} |
|
____CSS |
|
|
|
sprite_size=$((sprite_size + svg_file_px_height + SPACING)) |
|
done |
|
|
|
# Export PNG (@1x and @2x) versions |
|
rsvg-convert "$OUTDIR"/sprite.svg -o "$OUTDIR"/sprite_1x.png |
|
rsvg-convert -z 2 -a "$OUTDIR"/sprite.svg -o "$OUTDIR"/sprite_2x.png |
|
|
|
# Optimize PNGs |
|
for i in "$OUTDIR"/*.png |
|
do |
|
pngnq -vf -s1 $i && optipng ${i%.*}-nq8.png && mv -f ${i%.*}-nq8.png $i |
|
done |
|
|
|
# Optimize sprite.svg |
|
svgo -i "$OUTDIR"/sprite.svg -o "$OUTDIR"/sprite-opt.svg |
|
mv "$OUTDIR"/sprite-opt.svg "$OUTDIR"/sprite.svg |
