Add linter to check svg path dimensions (#3107)

* Add linter to check svg path dimensions

Float precision is set at 3 which is the default for svgo in .svgo.yml;
precision can be raised over time.

This adds an ignore file with the current paths of non-conforming icons.

This also changes the name of the icon title linter as well so it reads
more nicely than "custom".

* Update CONTRIBUTING GUIDELINES

Add a note on visual imperfections and viewbox problems due to 
optimizing.

Co-authored-by: Eric Cornelisesn <ericornelissen@gmail.com>
Co-authored-by: Peter Noble <PeterShaggyNoble@users.noreply.github.com>

.svglintrc.js

@@ -1,7 +1,11 @@
 const data = require("./_data/simple-icons.json");
 const { htmlFriendlyToTitle } = require("./scripts/utils.js");
+const getBounds = require("svg-path-bounding-box");
 
 const titleRegexp = /(.+) icon$/;
+const iconSize = 24;
+const iconFloatPrecision = 3;
+const iconIgnored = require("./.svglint-ignored.json");
 
 module.exports = {
     rules: {
@@ -14,7 +18,7 @@ module.exports = {
         attr: [
             { // ensure that the SVG elm has the appropriate attrs
                 "role": "img",
-                "viewBox": "0 0 24 24",
+                "viewBox": `0 0 ${iconSize} ${iconSize}`,
                 "xmlns": "http://www.w3.org/2000/svg",
 
                 "rule::selector": "svg",
@@ -32,6 +36,8 @@ module.exports = {
         ],
         custom: [
           function(reporter, $, ast) {
+            reporter.name = "icon-title";
+
             const iconTitleText = $.find("title").text();
             if (!titleRegexp.test(iconTitleText)) {
               reporter.error("<title> should follow the format \"[ICON_NAME] icon\"");
@@ -46,6 +52,24 @@ module.exports = {
               }
             }
           },
+          function(reporter, $, ast) {
+            reporter.name = "icon-size";
+
+            const iconPath = $.find("path").attr("d");
+            if (iconIgnored.hasOwnProperty(iconPath)) {
+              return;
+            }
+
+            const bounds = getBounds(iconPath);
+            const width = +bounds.width.toFixed(iconFloatPrecision);
+            const height = +bounds.height.toFixed(iconFloatPrecision);
+
+            if (width === 0 && height === 0) {
+              reporter.error("Path bounds were reported as 0 x 0; check if the path is valid");
+            } else if (width !== iconSize && height !== iconSize) {
+              reporter.error(`Size of <path> must be exactly ${iconSize} in one dimension; the size is currently ${width} x ${height}`);
+            }
+          },
         ]
     }
 };

CONTRIBUTING.md

@@ -96,6 +96,8 @@ All icons in Simple Icons have been optimized with the [SVGO tool](https://githu
   * Build: `docker build . -t simple-icons`
   * Run: `docker run --rm -v ${PWD}/icons/file-to-optimize.svg:/image.svg simple-icons`
 
+After optimizing the icon, double-check it against your original version to ensure no visual imperfections have crept in. Also make sure that the dimensions of the path have not been changed so that the icon no longer fits exactly within the canvas. We currently check the dimensions up to a precision of 3 decimal points.
+
 ### 4. Annotate the Icon
 
 Each icon in Simple Icons has been annotated with a number of attributes and elements to increase accessibility. These include:

package-lock.json

@@ -6972,6 +6972,15 @@
         }
       }
     },
+    "svg-path-bounding-box": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/svg-path-bounding-box/-/svg-path-bounding-box-1.0.4.tgz",
+      "integrity": "sha1-7XPfODyLR4abZQjwWPV0j4gzwHA=",
+      "dev": true,
+      "requires": {
+        "svgpath": "^2.0.0"
+      }
+    },
     "svglint": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/svglint/-/svglint-1.0.5.tgz",
@@ -7085,6 +7094,12 @@
         }
       }
     },
+    "svgpath": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/svgpath/-/svgpath-2.2.3.tgz",
+      "integrity": "sha512-xA0glXYpJ9SYT4JeMp3c0psbqdZsG1c0ywGvdJUPY2FKEgwJV7NgkeYuuQiOxMp+XsK9nCqjm3KDw0LkM1YLXw==",
+      "dev": true
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -22,6 +22,7 @@
     "jest": "26.0.1",
     "jsonlint2": "1.7.1",
     "npm-run-all": "4.1.5",
+    "svg-path-bounding-box": "1.0.4",
     "svglint": "1.0.5",
     "svgo": "1.3.2",
     "uglify-js": "3.9.4"