Add (and fix) SVG cleanliness tests

[kognise]

As suggested in #208, I added some new tests:

• viewBox now must be set and have the correct size.
• Elements must not have fill or stroke attributes or style properties set.
• SVGs must have a valid xmlns.
• The set of attributes on the root SVG must equal exactly width, height, viewBox, and xmlns. (Rationale: about half of the SVGs previously had the enable-background attribute, which does nothing. A small percentage had no viewBox, which causes rendering problems when using the raw SVGs as icons in some cases.)
• Elements must match a whitelist: svg, g, path, circle, defs.

I edited a lot of icons to fix the tests, but I didn't modify any of the icons except to remove an incorrect white border from penalty-10e3.

Moved to #210: I also added the SVG source files to the NPM package files list. This makes it possible to import the icons as, for example, React components without needing framework-specific support. Happy to undo this if desired.

[jfly]

Thanks! The changes here look fine to me.

My only concern about getting stricter with our tests is losing out on the ability for non-technical people to contribute. Would a file created or edited by inkscape satisfy these new rules, or would it require manual (or svgo) optimization?

[kognise]

My only concern about getting stricter with our tests is losing out on the ability for non-technical people to contribute. Would a file created or edited by inkscape satisfy these new rules, or would it require manual (or svgo) optimization?

I believe files created entirely in Inkscape will, by default, contain a lot of extraneous tags that won't pass the tests. However, my opinion is that these SVGs should be cleaned up before being merged either way. I believe existing files edited in Inkscape as well as files created in Figma will be fine.

Cleaning SVGs is very easy to do with a tool like SVGOMG (which I use extensively even as a technical person) — you can just drag and drop or paste an SVG, and the copiable output SVG will pass all the tests as long as it doesn't have fill/stroke colors. Hardcoded colors may have to be edited out either way, I'm not sure there's a good way to get around this. We could recommend SVGOMG in the README if it makes contributing easier.

[jfly]

I believe files created entirely in Inkscape will, by default, contain a lot of extraneous tags that won't pass the tests.

Bummer, but I can get on board with this. It's a low-traffic repo, so we can help non technical people whose eyes would glaze over looking at CI logs. And worst case, we can always relax the constraints in the future.

We could recommend SVGOMG in the README if it makes contributing easier.

Yes, please add that.

[kognise]

Done, added a contributing section to the readme.

[jfly]

Looking good, just a couple more tweaks! Thanks again.

If you're comfortable with git, feel free to rebase your commits before I merge, else I'll squash them when merging.

I'll wait a couple days before merging.

[jfly]

If you're comfortable with git, feel free to rebase your commits before I merge, else I'll squash them when merging.

I mean "feel free to squash the noise yourself into a nice story". You don't have to squash them down to one commit.

[kognise]

Rebased, commit history is cleaner now and fixed the package.json issue.