Add `svglint` and `svgo` to lint SVGs

dhruvkb commented 2 years ago

Problem

The SVGs in the project are inconsistent and sometimes unformatted.

Description

Since the project contains a lot of SVG icons it might be a good idea to enforce

fixed viewBox values
list of mandatory attributes (like height, width and SVG xmlns)
fixed valid group IDs (such as icon)
fixed rules for fill (such as fill being set only on the top-level g and having currentColor as the only value)

https://www.npmjs.com/package/svglint and https://github.com/svg/svgo are two tools that could be used for achieving consistency and optimisation in our SVGs.

Additional context

Simple Icons have a very comprehensive SVG linting solution for inspiration.

Configuration file is here:

https://github.com/simple-icons/simple-icons/blob/develop/svglint.config.mjs

Implementation

[ ] 🙋 I would be interested in implementing this feature.

omkarg01 commented 2 years ago

I would like to work on this issue.

dhruvkb commented 2 years ago

@omkarg01 sure, please do!

sarayourfriend commented 2 years ago

@omkarg01 You're assigned! Please feel free to ask for assistance if you run into any roadblocks. Thanks in advance for the contribution!

sarayourfriend commented 1 month ago

Removing good first issue and help wanted, but I did add more specific instructions (to use svglint and svgo). This isn't a good first issue/help wanted under our more recent considerations of what is due to it needing a lot of changes to support a final PR. For example, it touches at least two new dependencies, is ambigious as to where it should go in the codebase (should it go into the monorepo packages or @openverse/eslint-plugin, despite the conflict in the name's scope, or a new package altogether?), and needs work to get it running in pre-commit and CI. Not to mention, we need to review the actual changes applied to SVGs in the course of implementing these tools to make sure they are really what we want.

WordPress / openverse