Skip to content

Instantly share code, notes, and snippets.

@kyleknighted
Last active August 21, 2018 14:25
Show Gist options
  • Save kyleknighted/f9f2f2693d277577548292ca99ed48cd to your computer and use it in GitHub Desktop.
Save kyleknighted/f9f2f2693d277577548292ca99ed48cd to your computer and use it in GitHub Desktop.

Revisions

  1. Kyle Knight revised this gist Aug 21, 2018. 5 changed files with 0 additions and 49 deletions.
    1 change: 0 additions & 1 deletion cli_sprite.txt
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    ./node_modules/.bin/svg-sprite --symbol --symbol-inline --symbol-dest=public/images/ --symbol-sprite=icon-sprite.svg src/assets/icons/*.svg
    1 change: 0 additions & 1 deletion cli_svgo.txt
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    ./node_modules/.bin/svgo --config=./svgo.json --folder=./src/assets/icons/ --output=./ui/src/assets/icons/ --multipass --quiet
    16 changes: 0 additions & 16 deletions create_readme.sh
    Original file line number Diff line number Diff line change
    @@ -1,16 +0,0 @@
    #!/usr/bin/env sh
    readme=./src/assets/README.md
    echo -n > $readme # clears or creates empty file

    echo "# Icons" >> $readme # h1 title of README document
    echo "| preview | name |" >> $readme # column names for table
    echo "|:----:| ---- |" >> $readme # center align preview image and left align name


    # loop through all icons
    for filename in src/assets/icons/*.svg ; do \
    # get filename of icon without path or ".svg" extension
    icon=$(basename $filename .svg) ; \
    # build the row in the table
    echo "|<img src=\"icons/$icon.svg\" alt=\"$icon\" width=\"24px\"/>|$icon|" >> $readme ; \
    done
    28 changes: 0 additions & 28 deletions svgo.json
    Original file line number Diff line number Diff line change
    @@ -1,28 +0,0 @@
    {
    "plugins": [
    {
    "removeTitle": true
    },
    {
    "cleanupNumericValues": {
    "floatPrecision": 2
    }
    },
    {
    "convertColors": {
    "currentColor": true
    }
    },
    {
    "cleanupIDs": {
    "minify": true
    }
    },
    {
    "removeViewBox": false
    },
    {
    "removeDimensions": true
    }
    ]
    }
    3 changes: 0 additions & 3 deletions use.svg
    Original file line number Diff line number Diff line change
    @@ -1,3 +0,0 @@
    <svg class="icon">
    <use xlink:href="#icon-name" />
    </svg>
  2. Kyle Knight created this gist Aug 21, 2018.
    26 changes: 26 additions & 0 deletions Makefile
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    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
    1 change: 1 addition & 0 deletions cli_sprite.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ./node_modules/.bin/svg-sprite --symbol --symbol-inline --symbol-dest=public/images/ --symbol-sprite=icon-sprite.svg src/assets/icons/*.svg
    1 change: 1 addition & 0 deletions cli_svgo.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ./node_modules/.bin/svgo --config=./svgo.json --folder=./src/assets/icons/ --output=./ui/src/assets/icons/ --multipass --quiet
    16 changes: 16 additions & 0 deletions create_readme.sh
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    #!/usr/bin/env sh
    readme=./src/assets/README.md
    echo -n > $readme # clears or creates empty file

    echo "# Icons" >> $readme # h1 title of README document
    echo "| preview | name |" >> $readme # column names for table
    echo "|:----:| ---- |" >> $readme # center align preview image and left align name


    # loop through all icons
    for filename in src/assets/icons/*.svg ; do \
    # get filename of icon without path or ".svg" extension
    icon=$(basename $filename .svg) ; \
    # build the row in the table
    echo "|<img src=\"icons/$icon.svg\" alt=\"$icon\" width=\"24px\"/>|$icon|" >> $readme ; \
    done
    28 changes: 28 additions & 0 deletions svgo.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    {
    "plugins": [
    {
    "removeTitle": true
    },
    {
    "cleanupNumericValues": {
    "floatPrecision": 2
    }
    },
    {
    "convertColors": {
    "currentColor": true
    }
    },
    {
    "cleanupIDs": {
    "minify": true
    }
    },
    {
    "removeViewBox": false
    },
    {
    "removeDimensions": true
    }
    ]
    }
    3 changes: 3 additions & 0 deletions use.svg
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.