Solving common linter problems #4935
Unanswered
mondeja
asked this question in
Help with SVGs
Replies: 1 comment
-
Sharing a linter reminder / tip from @ericcornelissen from this comment: "the letters in the hex value should be uppercase 😉" |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
When you upload an icon to simple-icons, a linting process is triggered to ensure that certain quality standards are met. This process can be executed locally using
npm run svglint
(see how to setup your environment locally in Contributing Guidelines - Testing package locally). The rules are defined in the file.svglintrc.js
, using SVGLint.If your icon does not fit a rule, the linter will show you a message explaining the error and maybe a suggestion about how to solve the problem. However, if you can't solve it with the provided report, in this guide are explained some in-depth details about how to solve the most common problems, listed by rule name. If you still having the problem after trying these solutions, don't worry, open the pull anyway if you haven't already, as one of the project maintainers will be happy to help you 😄
icon-size
Every icon must have 24 pixels of width or height. This ensures that all icons have the same size. Typically, you can resize the icon with your editor maintaining its proportions.
In Inkscape, make sure that you have activated the lock to keep the proportions when resizing. In other software there should be a similar button.
However, some icons, especially those that touch the outer limits of 24 pixels by a curve, could raise this rule even after being appropriately resized in an editor. This happens because different editors uses different algorithms to compute objects sizes. If you are facing this problem, try one of these solutions:
icon-centered
All icons should be centered in the canvas 24x24 pixels. You can center the icon using your preferred editor.
In Inkscape, go to Object -> Align and distribute or press Ctrl Shift A
However, some icons, especially those that touch the outer limits of 24 pixels by a curve, could raise this rule even after being appropriately centered in an editor. If you are facing this problem, try one of these solutions:
innefective-segments
This rule ensures that coordinates that are not doing anything to draw the icon are removed. For example, moving the SVG virtual pencil to
(2, 2)
and after that drawing a line which ends in(2, 2)
, asm2, 2L2, 2
path will do.In Inkscape, you'll find at Path -> Union
collinear-segments
This rule ensures that there are no coordinates in the path that are drawing rect lines using redundant commands. For example, moving the SVG virtual pencil to
(2, 2)
, after that drawing a line which ends in(3, 3)
and then drawing a line that ends in(4, 4)
, asm2, 2L3, 3L4, 4
path would do. This can be rewritten just drawing a line toward(4, 4)
directly withm2, 2L4, 4
, so the commandL3, 3
should be removed.Real example of collinear coordinates
To solve this, you can either:
If the problem persists, try replacing failed coordinates by a high number (
999 999
for example) and you will see the affected coordinates in your editor, so you will be able to edit it manually.Beta Was this translation helpful? Give feedback.
All reactions