mapbox / mapbox/maki

SVG props optimization

Open
#566 3 comments 0 reactions 1 assignee View on GitHub

@Udobnyj is already working on this.

Since Jun 1, 2022.

p3
Dominant language
JavaScript
Stars
1.6k
Forks
210
PR merge metrics
No merged PRs in 30d

Description

### What is the problem?

I started to understand how our Maki library works (while creating a direct export to Git from Figma), and I ran into our strange optimizing SVG process.

We have [format-icons.js](https://github.com/mapbox/maki/blob/main/scripts/format-icons.js) which is responsible for the optimization of SVG.
And it has a list of allowed props:
![Screen Shot 2022-06-01 at 12.20.33.png](https://images.zenhubusercontent.com/61dc302270b3029c9827fc13/ac7ae406-c31e-40c7-b57a-d998d3ecb3f1)

And I have questions about this list. Why do we still have props like `version`, and `xmlns`, because they are so old? Do we need them for backward compatibility?
Same question about our `` part which stores information about the `version` and `encoding`.

In the end, the SVGs that are stored in our library now look like this.
![1.png](https://images.zenhubusercontent.com/61dc302270b3029c9827fc13/7505b969-a51c-4b57-939d-94ce906e0f6b)

And they can look like this and work exactly the same
Group 1

### Proposed solution
I can refine the SVG optimization script and make our icons more modern

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.