1
0
mirror of https://github.com/simple-icons/simple-icons.git synced 2024-12-16 01:10:30 +02:00

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>
This commit is contained in:
David Beitey 2020-06-10 09:59:42 +00:00 committed by GitHub
parent be2741f996
commit 5da34c7efd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 335 additions and 1 deletions

292
.svglint-ignored.json Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,11 @@
const data = require("./_data/simple-icons.json"); const data = require("./_data/simple-icons.json");
const { htmlFriendlyToTitle } = require("./scripts/utils.js"); const { htmlFriendlyToTitle } = require("./scripts/utils.js");
const getBounds = require("svg-path-bounding-box");
const titleRegexp = /(.+) icon$/; const titleRegexp = /(.+) icon$/;
const iconSize = 24;
const iconFloatPrecision = 3;
const iconIgnored = require("./.svglint-ignored.json");
module.exports = { module.exports = {
rules: { rules: {
@ -14,7 +18,7 @@ module.exports = {
attr: [ attr: [
{ // ensure that the SVG elm has the appropriate attrs { // ensure that the SVG elm has the appropriate attrs
"role": "img", "role": "img",
"viewBox": "0 0 24 24", "viewBox": `0 0 ${iconSize} ${iconSize}`,
"xmlns": "http://www.w3.org/2000/svg", "xmlns": "http://www.w3.org/2000/svg",
"rule::selector": "svg", "rule::selector": "svg",
@ -32,6 +36,8 @@ module.exports = {
], ],
custom: [ custom: [
function(reporter, $, ast) { function(reporter, $, ast) {
reporter.name = "icon-title";
const iconTitleText = $.find("title").text(); const iconTitleText = $.find("title").text();
if (!titleRegexp.test(iconTitleText)) { if (!titleRegexp.test(iconTitleText)) {
reporter.error("<title> should follow the format \"[ICON_NAME] icon\""); 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}`);
}
},
] ]
} }
}; };

View File

@ -96,6 +96,8 @@ All icons in Simple Icons have been optimized with the [SVGO tool](https://githu
* Build: `docker build . -t simple-icons` * Build: `docker build . -t simple-icons`
* Run: `docker run --rm -v ${PWD}/icons/file-to-optimize.svg:/image.svg 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 ### 4. Annotate the Icon
Each icon in Simple Icons has been annotated with a number of attributes and elements to increase accessibility. These include: Each icon in Simple Icons has been annotated with a number of attributes and elements to increase accessibility. These include:

15
package-lock.json generated
View File

@ -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": { "svglint": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/svglint/-/svglint-1.0.5.tgz", "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": { "symbol-tree": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

View File

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