Optimized SVG using SVGO (#597)

* Added script to optimize svgs

* Updated the svgs using svgo

* Made the optimize svg script into a workflow

* Added npm install step

* Change the env variable bug

* Clean up and updated check svg

* Change label name

Author: Thomas-Boi

.github/scripts/check_svgs_on_pr.py

@@ -69,21 +69,11 @@ def check_svgs(svg_file_paths: List[Path]):
             if root.get("viewBox") != "0 0 128 128":
                 err_msg.append("-'viewBox' is not '0 0 128 128' -> Set it or scale the file using https://www.iloveimg.com/resize-image/resize-svg")
 
-            acceptable_size = [None, "128px", "128"]
-            if root.get("height") not in acceptable_size:
-                err_msg.append("-'height' is present in svg element but is not '128' or '128px' -> Remove it or set it to '128' or '128px'")
-
-            if root.get("width") not in acceptable_size:
-                err_msg.append("-'width' is present in svg element but is not '128' or '128px' -> Remove it or set it to '128' or '128px'")
-
-            if root.get("style") is not None and "enable-background" in root.get("style"):
-                err_msg.append("-deprecated 'enable-background' in style attribute -> Remove it")
-
             if root.get("x") is not None:
-                err_msg.append("-unneccessary 'x' attribute in svg element -> Remove it")
+                err_msg.append("-unneccessary 'x' attribute in svg root element -> Remove it")
 
             if root.get("y") is not None:
-                err_msg.append("-unneccessary 'y' attribute in svg element -> Remove it")
+                err_msg.append("-unneccessary 'y' attribute in svg root element -> Remove it")
 
             style = root.findtext(f".//{namespace}style")
             if style != None and "fill" in style:

.github/workflows/optimize_svg.yml

@@ -0,0 +1,33 @@
+name: Optimize the added/changed svgs
+on:
+  pull_request:
+      types: [labeled]
+jobs:
+  peek:
+    name: Optimize the added/changed svgs
+    if: github.event.label.name == 'bot:optimize'
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.head_ref }}
+
+      - name: Set up gulp
+        run: npm install
+
+      - name: Get Changed Files and generate files_added.json & files_modified.json
+        uses: lots0logs/gh-action-get-changed-files@2.1.4
+        id: get_added_and_modified_files
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Run the update_id.py
+        env:
+          ADDED_FILES: ${{ steps.get_added_and_modified_files.outputs.added }}
+          MODIFIED_FILES: ${{ steps.get_added_and_modified_files.outputs.modified }}
+        run: npm run optimize-svg -- --filesAddedJson=$ADDED_FILES --filesModifiedJson=$MODIFIED_FILES
+
+      - name: Commit the changes
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Optimized the SVGs

gulpfile.js

@@ -1,6 +1,8 @@
 var gulp      = require('gulp');
+const svgmin = require("gulp-svgmin")
 const sass = require('gulp-sass');
 sass.compiler = require('sass')
+const yargs = require("yargs")
 const fsPromise = require('fs').promises;
 const path = require("path");
 
@@ -149,5 +151,70 @@ function cleanUp() {
 }
 
 
+//////// Update SVG Task ////////
+/**
+ * Update the svg by optimizing it 
+ * and prefixing its ids so it's unique across the repo.
+ * 
+ * This requires a json list of svg file names to update.
+ * This must be passed through the commandline arguments.
+ */
+function optimizeSvg() {
+  let svgPaths = getAddedModifiedSvg(yargs.argv.filesAddedJson,
+    yargs.argv.filesModifiedJson)
+
+  return gulp.src(svgPaths)
+    .pipe(svgmin(configOptionCallback))
+    .pipe(gulp.dest(file => {
+      return file.base
+    }))
+}
+
+/**
+ * Get the svgs added and modified from the '/icons' folder only.
+ * @param {*} filesAddedJson - the files that were added in this commit.
+ * @param {*} filesModifiedJson - the files that were modified in this commit.
+ * @returns a list of the svg file paths that were added/modified in this pr as Path. 
+ * It will only return icons in '/icons' path (see https://github.com/devicons/devicon/issues/505)
+ */
+function getAddedModifiedSvg(filesAddedJson, filesModifiedJson) {
+  const filesAdded = JSON.parse(filesAddedJson),
+    filesModified = JSON.parse(filesModifiedJson)
+
+  files = filesAdded.concat(filesModified)
+  return files.filter(filename => {
+    if (path.extname(filename) == ".svg" 
+      && path.dirname(filename).includes('icons/'))
+        return filename
+  })
+}
+
+/**
+ * Create a config option for each file.
+ * @param {Object} file - Gulp Vinyl instance of the file 
+ * being processed.
+ * @returns a SVGO config object.
+ */
+function configOptionCallback(file) {
+  return {
+    plugins: [
+      {
+        prefixIds: {
+          prefix: file.stem, // add file name to ids
+          delim: "-"
+        } 
+      },
+      {
+        removeViewBox: false // keep viewbox
+      },
+      {
+        removeDimensions: true // remove height and width
+      }
+    ]
+  }
+}
+
+
 exports.updateCss = createDeviconMinCSS;
 exports.clean = cleanUp;
+exports.optimizeSvg = optimizeSvg;