Automating SVG Icon Management with Sketch and Makefiles

Makefile

icons-sketch:
    # https://developer.sketchapp.com/guides/sketchtool/
    /Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool export slices path/to/icons.sketch --formats=svg --output=src/assets/icons

icons-svgo:
    # https://github.com/svg/svgo/#cli
    ./node_modules/.bin/svgo --config=./svgo.json --folder=./src/assets/icons/ --output=./ui/src/assets/icons/ --multipass --quiet

icons-sprite:
    # https://github.com/jkphl/svg-sprite/blob/master/docs/command-line.md
    ./node_modules/.bin/svg-sprite --symbol --symbol-inline --symbol-dest=public/images/ --symbol-sprite=icon-sprite.svg src/assets/icons/*.svg

icons-readme:
    readme=./src/assets/README.md
    echo -n > $$readme

    echo "# Icons" >> $$readme 
    echo "| preview | name |" >> $$readme 
    echo "|:----:| ---- |" >> $$readme 

    for filename in src/assets/icons/*.svg ; do \ 
            icon=$$(basename $$filename .svg) ; \ 
            echo "|<img src=\"icons/$$icon.svg\" alt=\"$$icon\" width=\"24px\"/>|$$icon|" >> $$readme ; \ 
    done

icons: icons-sketch icons-svgo icons-sprite icons-readme