Add Crayon icon

[ericsalvi]

Similarweb rank: 109,768

Checklist

• I updated the JSON data in _data/simple-icons.json
• I optimized the icon with SVGO or SVGOMG
• The SVG viewbox is 0 0 24 24

Description

They help clients select the best solutions for their business needs and budget to thrive and innovate with software, cloud, data, and AI.

[ericsalvi]

Interesting that both Inkscape and Affinity Designer say in the UI the file is 24 wide but this failed result says the width is 23.999. I am trying to contribute when I can so I can keep practicing these skills. Does anyone have any advise?

The only thing I can think of is adding .001 to the width which appears not to affect the height when scaled proportionately.

[LitoMore]

Hi @ericsalvi, thank you for working on it! There are two solutions:

Solution 1: Increase the precision

You need to re-process the icon with higher precision:

npm run svgo -- -p 4 icons/crayon.svg

Solution 2: Re-center your processed icon

Use Inkscape or other SVG editors to reopen your processed file, re-resize it to 24px, and re-center it.

[ericsalvi]

I tried doing all the suggestions @LitoMore but for some odd reason either Affinity Designer, Inkscape, or Illustrator cannot get the size to be exact. I did run the CLI in solution 1 but no luck. I may not be able to fix this so this pull request may want to be deleted unless others may want to give it a try.

[LitoMore]

@ericsalvi It's OK. Let me help you out.

[LitoMore]

@ericsalvi I processed with precision 4.

[ericsalvi]

Thank you @LitoMore this one was a learning experience for me. Out of curiosity did you see any issues on your end or was it a piece of cake to fix?

[LitoMore]

I just processed the original icon with precision 4.

Here are my steps to add a new icon:

1. Download the original icon from their homepage
2. Open the icon in Inkscape
3. Change viewbox to 24x24
4. Delete unused shapes
5. Group the remaining two shapes
6. Resize this group to 24px with aspect ratio lock
7. Vertical and horizontal center it
8. Save it to a new file and move it to icons/crayon.svg
9. Use npm run add-icon-data to add metadata to _data/simple-icons.json
10. Run npm run svgo -- -p 4 icons/crayon.svg
11. Open icons/crayon.svg with a text editor, cleanup unused attributes, and add <title>Crayon</title>
12. Run npm run lint to test it on local, it should pass
13. Done