Add Blueprint (#3510)

[miZyind]

Issue: #3510
Alexa rank: ~165k

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

Color from palantir/blueprint#4470

[adamrusted]

Hi @miZyind, thanks for the contribution! 🎉
Just taking a quick look at this, I can see a few differences between your icon (red) and the source SVG (black) - would you mind taking another look at this one?

[fbernhart]

A quick note from my side:

On their website, in their documentation as well as in their GitHub repo they reference themselves as just Blueprint and not as BlueprintJS. So I would be in favour of changing the name to Blueprint.

[miZyind]

Thanks for your review @adamrusted!
At first, I tried to merge the paths of the SVG file (Through SVGO with mergePaths: force).
However, the icon looks weird after merged:

I'm not quite familiar with SVG file editing so I leverage SvgPathEditor to tweek the icon:

Maybe this caused the issue that the modified one looks different from the original one.
I've tried the recommended tools such as Inkscape and IcoMoon from the CONTRIBUTING.md but neither of them solves the merge problem without pain.

Is there any free tool that could solve this issue easily?

@fbernhart I'm confused about the naming of this icon. I also named it Blueprint at first. But I found that their website is blueprintjs.com so I finally choose BlueprintJS. Both of them are acceptable to me. Thanks for your advice!

[adamrusted]

I've tried the recommended tools, Inkscape and IcoMoon from the CONTRIBUTING.md but neither of them solves the merge problem without pain.

Yeah, unfortunately some icons just don't want to play nice in the various software we recommend. I regularly use a mix of Adobe Illustrator, Inkscape, and Figma when comparing icons.

Is there any tool that could solve this issue easily?

The tools I use are mentioned above, though with some paths like this it can be difficult to merge them properly. I've formatted the below in Illustrator, and it passes the linter - feel free to use it!

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Blueprint icon</title><path d="M21.809 5.524L12.806.179l-.013-.007.078-.045h-.166a1.282 1.282 0 0 0-1.196.043l-.699.403-8.604 4.954a1.285 1.285 0 0 0-.644 1.113v10.718c0 .46.245.884.644 1.113l9.304 5.357c.402.232.898.228 1.297-.009l9.002-5.345c.39-.231.629-.651.629-1.105V6.628c0-.453-.239-.873-.629-1.104zm-19.282.559L11.843.719a.642.642 0 0 1 .636.012l9.002 5.345a.638.638 0 0 1 .207.203l-4.543 2.555-4.498-2.7a.963.963 0 0 0-.968-.014L6.83 8.848 2.287 6.329a.644.644 0 0 1 .24-.246zm14.13 8.293l-4.496-2.492V6.641a.32.32 0 0 1 .155.045l4.341 2.605v5.085zm-4.763-1.906l4.692 2.601-4.431 2.659-4.648-2.615a.317.317 0 0 1-.115-.112l4.502-2.533zm-.064 10.802l-9.304-5.357a.643.643 0 0 1-.322-.557V7.018L6.7 9.51v5.324c0 .348.188.669.491.84l4.811 2.706.157.088v4.887a.637.637 0 0 1-.329-.083z"/></svg>

I'm confused about the naming of this icon. I also named it Blueprint at first. But I found that their website is blueprintjs.com so I finally choose BlueprintJS. Both of them are acceptable to me. Thanks for your advice!

I would also side with using Blueprint as the name, given we don't already have a brand called Blueprint in our project. We tend to operate on a first-come-first-served basis with brands using the same name.

[fbernhart]

@miZyind I guess the domain https://www.blueprint.com as already taken, that's why they went with https://www.blueprintjs.com. 😉 But the project itself is called Blueprint.

Concerning your problem with the SVG:
I was able to produce a nice, clean SVG without problems in Inkscape. All you have to do is select all the single paths and then click on Path --> Union (Ctrl + + as shortcut).

Your preview above looks like you've used Path --> Combine instead, which is a different command.

[adamrusted]

@fbernhart could you review this one, being as my path was used? 🙏🏻

[fbernhart]

LGTM! 👍🏼

Thanks @miZyind and @adamrusted for your work! 💯

[miZyind]

I usually use GIMP to fine-tune some pictures for other purposes. However, it seems to have limited support for SVG editing. I should try to practice how to use Inkscape proficiently instead.

@adamrusted It's a very valuable lesson to me 🥰 I've fixed the path and the title according to your comment. I appreciate your help very much!

@fbernhart Thanks for your review 🎉🎉