Add NPM script to perform SVGO optimization from the repository (#1476)

* Add SVGO as devDependencies and a NPM script to run it * Update Contributing Guidelines Change the instructions on how to use SVGO to optimize SVGs to use the new dependency and NPM script. * Add configuration for the NPM command to optimize SVGs * Specify --precision in SVGO configuration file * Update SVGO config ordering of attributes To be in line with the fact that, as @davidklebanoff pointed out: "most (all?) have the attributes in the order of role, viewbox, xmlns (alphabetical)" * Move SVGO --multipass argument to .svgo.yml * Update SVGO dependency to 1.3.0 Now the force merge option works 🎉 See: https://github.com/svg/svgo/releases/tag/v1.3.0 * Update outdated "blocking" comment
2024-12-16 01:10:30 +02:00 · 2019-07-15 15:14:50 +01:00 · 2019-07-15 15:14:50 +01:00 · 3af76b75d3
commit 3af76b75d3
parent 9525080563
4 changed files with 263 additions and 5 deletions
--- a/.svgo.yml
+++ b/.svgo.yml
@ -0,0 +1,74 @@
+multipass: true
+
+plugins:
+  # Set <path> precision to 3 decimal places
+  - convertPathData:
+      floatPrecision: 3
+
+  # Sort attributes on the <SVG>
+  - sortAttrs:
+      order:
+        - role
+        - viewBox
+      xmlnsOrder: end
+
+  # Convert basic shapes (such as <circle>) to <path>, including <arc>
+  - convertShapeToPath:
+      convertArcs: true
+
+  # Compound all <path>s into one
+  - mergePaths:
+      force: true
+
+  # Keep the <title>
+  - removeTitle: false
+
+  # Don't remove the role="img" attribute and automatically
+  # add it to the SVG if it's not
+  - addAttributesToSVGElement:
+      attributes:
+        - role: img
+  - removeUnknownsAndDefaults:
+      keepRoleAttr: true
+
+  # Enable everything else
+  - removeDoctype
+  - removeXMLProcInst
+  - removeComments
+  - removeMetadata
+  - removeXMLNS
+  - removeEditorsNSData
+  - cleanupAttrs
+  - inlineStyles
+  - minifyStyles
+  - convertStyleToAttrs
+  - cleanupIDs
+  - prefixIds
+  - removeRasterImages
+  - removeUselessDefs
+  - cleanupNumericValues
+  - cleanupListOfValues
+  - convertColors
+  - removeNonInheritableGroupAttrs
+  - removeUselessStrokeAndFill
+  - removeViewBox
+  - cleanupEnableBackground
+  - removeHiddenElems
+  - removeEmptyText
+  - moveElemsAttrsToGroup
+  - moveGroupAttrsToElems
+  - collapseGroups
+  - convertTransform
+  - removeEmptyAttrs
+  - removeEmptyContainers
+  - removeUnusedNS
+  - removeDesc
+  - removeDimensions
+  - removeAttrs
+  - removeAttributesBySelector
+  - removeElementsByAttr
+  - addClassesToSVGElement
+  - removeStyleElement
+  - removeScriptElement
+  - removeOffCanvasPaths
+  - reusePaths
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -74,10 +74,9 @@ Using your preferred tool you should:
 All icons in Simple Icons have been optimized with the [SVGO tool](https://github.com/svg/svgo). This can be done in one of two ways:

 * The [SVGO Command Line Tool](https://github.com/svg/svgo)
-  * Install SVGO
-    * With npm: `npm install -g svgo`
-    * With Homebrew: `brew install svgo`
-  * Run the following command `svgo --precision=3 -i icon.svg -o icon.min.svg`
+  * Install dependencies
+    * With npm: `npm install` from the root of this repository
+  * Run the following command `npm run svgo -- icons/file-to-optimize.svg`
  * Check if there is a loss of quality in the output, if so increase the precision.
 * The [SVGOMG Online Tool](https://jakearchibald.github.io/svgomg/)
  * Click "Open SVG" and select an SVG file.
--- a/package-lock.json
+++ b/package-lock.json
@ -187,6 +187,12 @@
      "integrity": "sha512-rx29MMkRdVmzunmiA4lzBYJNnXsW/PhG4kMBy2ATsYaDjGGR75dCFEVVROKpNwlVdcUX3xxlghKQOeDPBJobng==",
      "dev": true
    },
+    "@types/q": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
+      "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
+      "dev": true
+    },
    "JSV": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/JSV/-/JSV-4.0.2.tgz",
@ -824,6 +830,39 @@
      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
      "dev": true
    },
+    "coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "dev": true,
+      "requires": {
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        }
+      }
+    },
    "code-point-at": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@ -954,12 +993,55 @@
        "nth-check": "~1.0.1"
      }
    },
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
+      "dev": true
+    },
+    "css-tree": {
+      "version": "1.0.0-alpha.33",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz",
+      "integrity": "sha512-SPt57bh5nQnpsTBsx/IXbO14sRc9xXu5MtMAVuo0BaQQmyf0NupNPPSoMaqiAF5tDFafYsTkfeH4Q/HCKXkg4w==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.4",
+        "source-map": "^0.5.3"
+      }
+    },
    "css-what": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
      "dev": true
    },
+    "csso": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-3.5.1.tgz",
+      "integrity": "sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==",
+      "dev": true,
+      "requires": {
+        "css-tree": "1.0.0-alpha.29"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.0.0-alpha.29",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.29.tgz",
+          "integrity": "sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "~1.1.0",
+            "source-map": "^0.5.3"
+          }
+        },
+        "mdn-data": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
+          "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
+          "dev": true
+        }
+      }
+    },
    "cssom": {
      "version": "0.3.6",
      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.6.tgz",
@ -3908,6 +3990,12 @@
        "object-visit": "^1.0.0"
      }
    },
+    "mdn-data": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
+      "dev": true
+    },
    "mem": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/mem/-/mem-4.1.0.tgz",
@ -4301,6 +4389,18 @@
        "isobject": "^3.0.1"
      }
    },
+    "object.values": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.0.tgz",
+      "integrity": "sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.12.0",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3"
+      }
+    },
    "once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@ -4628,6 +4728,12 @@
      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
      "dev": true
    },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "dev": true
+    },
    "qs": {
      "version": "6.5.2",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
@ -5229,6 +5335,12 @@
        "tweetnacl": "~0.14.0"
      }
    },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
    "stack-utils": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
@ -5400,6 +5512,71 @@
        }
      }
    },
+    "svgo": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
+      "integrity": "sha512-MLfUA6O+qauLDbym+mMZgtXCGRfIxyQoeH6IKVcFslyODEe/ElJNwr0FohQ3xG4C6HK6bk3KYPPXwHVJk3V5NQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "coa": "^2.0.2",
+        "css-select": "^2.0.0",
+        "css-select-base-adapter": "^0.1.1",
+        "css-tree": "1.0.0-alpha.33",
+        "csso": "^3.5.1",
+        "js-yaml": "^3.13.1",
+        "mkdirp": "~0.5.1",
+        "object.values": "^1.1.0",
+        "sax": "~1.2.4",
+        "stable": "^0.1.8",
+        "unquote": "~1.1.1",
+        "util.promisify": "~1.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "css-select": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
+          "integrity": "sha512-dSpYaDVoWaELjvZ3mS6IKZM/y2PMPa/XYoEfYNZePL4U/XgyxZNroHEHReDx/d+VgXh9VbCTtFqLkFbmeqeaRQ==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^2.1.2",
+            "domutils": "^1.7.0",
+            "nth-check": "^1.0.2"
+          }
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        }
+      }
+    },
    "symbol-tree": {
      "version": "3.2.2",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
@ -5668,6 +5845,12 @@
        "crypto-random-string": "^1.0.0"
      }
    },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
+      "dev": true
+    },
    "unset-value": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -22,6 +22,7 @@
    "jest": "^24.1.0",
    "jsonlint2": "^1.7.1",
    "svglint": "^1.0.4",
+    "svgo": "^1.3.0",
    "uglify-js": "^3.6.0"
  },
  "scripts": {
@ -32,6 +33,7 @@
    "postpublish": "rm icons/*.js index.js",
    "test": "jest",
    "pretest": "npm run prepublishOnly",
-    "posttest": "npm run postpublish"
+    "posttest": "npm run postpublish",
+    "svgo": "svgo --config=./.svgo.yml"
  }
 }