update icon: npm (original, plain)

[m00nbyte]

Double check these details before you open a PR

• PR does not match another non-stale PR currently opened
• PR name matches the format new icon: Icon name (versions separated by comma). More details here
• PR's base is the develop branch.
• Your icons are inside a folder as seen here
• SVG matches the standards laid out here
• A new object is added in the devicon.json file as seen here

Link to prove your SVG is correct and up-to-date.

• NPM Website

[Snailedlt]

This is a great addition!
We just need to change the name of the svg. Remember to also change the version name in devicon.json.

If you want to make a plain version, you can just clip out the white part, and make sure the end result is a single path without any clipPath or other advanced objects.

If you want any help, let me know :)

[Snailedlt]

Great work so far!
There's a few minor issues, and a small suggestion I'd like to make:

1. The colors on these versions are different from the one already in the repo. NPM is very inconsistent in their branding when it comes to colors, I checked three different official logos and they all had different shades of gray... so for now I think we should just stick to the one that's already in the repo. That is #cc3534.

2. The icons should be resized to fit the entire viewbox. You can see how to do that in Inkscape here or here

3. The current original-wordmark has transparent text, while the official wordmark version has white text. Notice the white text in the comparison below

   our version	official version

   We should add this official version, and name it npm-original-wordmark, and rename
   the current original-wordmark to npm-plain-wordmark. That way we have both the
   original version, and the font supported plain version.

Hopefully that was all understandable, if not let me know! :)

PS
I found the original logo here: https://github.com/npm/pivotal-ui/blob/174b1209696bf504a72b7f59dd5c0842c4ad87f2/src/pivotal-ui/components/header/npm-logo.svg
There's a few other versions too if you wanna take a look: https://github.com/search?q=org%3Anpm+logo+language%3ASVG&type=code&l=SVG

[canaleal]

Good work so far 👍

Unfortunately though, the npm-original-wordmark.svg was removed and the original-plain-wordmark does not exist.

[canaleal]

@m00nbyte The original-wordmark.svg still exists in the versions, but there is no original-wordmark.svg file.

Also, although npm uses the square version of the logo, they also still make use of the wordmark version as seen on their website and is found in this archived repo.

[m00nbyte]

@canaleal this was already in the devicon.json before my PR and i can see that this file exists: https://github.com/devicons/devicon/blob/master/icons/npm/npm-original-wordmark.svg

[canaleal]

@m00nbyte Correct, what I meant to say is that our version is not correct and should be changed. As @Snailedlt mentioned above, our version has transparent text while the original has white text.

[m00nbyte]

@canaleal ok i see, are those two icons i've added correct?

[canaleal]

@m00nbyte Both icons look nearly perfect.

They're scaled up a little too much with a height and width of 128.005

And the plain icon also has a stroke width.

Aside from those 2 things, they're good.

[m00nbyte]

@canaleal i removed the stroke-width but the size of the icons are 128px.
i looked at them in multiple programs and the viewbox is also limited to 128px so i have no idea how you get 128.005px.

[canaleal]

Excellent 👍

[github-actions]

Hi!

I'm the check-bot and we have some issues with your PR:

devicon.json is not sorted correctly.
Please make sure that your icon is added in the `devicon.json` file at the correct alphabetic position
as seen here: https://github.com/devicons/devicon/wiki/Updating-%60devicon.json%60

Check our CONTRIBUTING guide for more details regarding these errors.

Please address these issues. When you update this PR, I will check your SVGs again.

Thanks for your help,
SVG-Checker Bot 😄