package mdi svg icons

Signed-off-by: François Mockers <mockersf@gmail.com>

hack/update-mdi-svg

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+echo "var icons = (function () {var icon_paths = {";
+
+for file in $1/*.svg;
+do
+    sed 's/^.* id="mdi-\([^"]*\)" .*path d="\([^"]*\)".*$/"\1":"\2",/' $file;
+done;
+
+echo '"no-icon":""};';
+echo "var svg = function(icon, id) {";
+echo "var path = icon_paths[icon];if (typeof path === 'undefined') {path = icon_paths['help-circle-outline'];};";
+echo "return '<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"' + id + '\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"' + path + '\" /></svg>';};";
+echo "return {svg: svg}})();";

package.json

@@ -14,6 +14,7 @@
     "less": "^3.0.2",
     "less-plugin-autoprefix": "^1.5.1",
     "less-plugin-clean-css": "^1.5.1",
+    "@mdi/svg": "^3.5.95",
     "uglify-js": "^3.3.22"
   },
   "scripts": {
@@ -25,6 +26,7 @@
     "build-less": "lessc --clean-css=--advanced web/assets/css/main.less web/public/main.css",
     "build-elm": "cd web/elm && elm make --output ../public/elm.js src/Main.elm && uglifyjs < ../public/elm.js > ../public/elm.min.js",
     "build-elm-debug": "cd web/elm && elm make --output ../public/elm.js src/Main.elm && uglifyjs < ../public/elm.js > ../public/elm.min.js",
-    "watch": "chokidar -i elm-stuff 'web/elm/src/**/*.elm' 'web/assets/css/*.less' -c 'yarn run build-debug' --initial"
+    "watch": "chokidar -i elm-stuff 'web/elm/src/**/*.elm' 'web/assets/css/*.less' -c 'yarn run build-debug' --initial",
+    "update-mdi-svg": "./hack/update-mdi-svg \"node_modules/@mdi/svg/svg\" > web/public/mdi-svg.js && uglifyjs < web/public/mdi-svg.js > web/public/mdi-svg.min.js"
   }
 }

web/public/index.html

@@ -13,7 +13,7 @@
     <script src="{{asset "jquery-2.1.1.min.js"}}"></script>
     <script src="{{asset "elm.min.js"}}"></script>
     <script src="{{asset "clipboard.min.js"}}"></script>
-    <script defer src="{{asset "mdi-svg-v3.5.95.js"}}"></script>
+    <script src="{{asset "mdi-svg.min.js"}}"></script>
     <style>
         @keyframes pipeline-running {
           0% { background-position-x: -53.5px; }