Add platform icon nvm

[bmuenzenmeyer]

Add the nvm logo to the site assets.

Read more about the Node.js Website redesign

from the Figma design (direct link)

displaying all. This issue only adds the nvm one.

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.
• Review the component creation guide to follow our standards.

Make sure that npm ci completes for you in a terminal pointing to your fork. If it doesn't or you aren't sure, ask a mentor.

---

Where to add the file

Site assets are found at https://github.com/nodejs/nodejs.org/tree/main/public/static/images/logos.

• Add the file into this directory on your fork

Adding the file

This file is an SVG, which means it is represented as text.

Create a new file in the public/static/images/logos directory, called platform-nvm.svg

Paste the below contents into the new file and save.

<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_423_27755)"><g clip-path="url(#clip1_423_27755)"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.46 9.846H.104l.792 1.39H2.25l-.792-1.39Z" fill="#333"/><path fill-rule="evenodd" clip-rule="evenodd" d="m11.499 14.19-.299-.563-.914-1.565-1.002.017.263.475-2.567.018-.562-.967-1.882.017 10.18 16 3.816-6.822-3.06-5.257-.316-.545-.703-1.213-2.954.404Z" fill="#333" stroke="#333" stroke-width=".352" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.976 12.642c.809-1.39 1.617-2.778 2.409-4.167.175-.3.386-.422.738-.422 2.356.017 4.712 0 7.05 0 .669 0 .845.263.563.879-.738 1.248-1.494 2.479-2.163 3.762-.79 1.354-1.582 2.69-2.373 4.044-1.74 3.025-3.481 6.049-5.24 9.055-.861 1.442-1.705 2.884-2.69 4.255-.21.3-.44.598-.686.862-.632.668-1.16.668-1.793-.018-.299-.316-1.266-1.723-.756-.896-.826-1.301-1.829-2.778-2.655-4.08.264-.615 3.165-5.855 3.921-7.173.088-.088 2.567-4.185 3.675-6.101Z" fill="#F4DD4B"/><path fill-rule="evenodd" clip-rule="evenodd" d="m13.398 25.917 4.009-7.368-1.09-1.828" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="m5.503 7.508-1.125.017.686 1.125h.404l.633 1.055 1.846-.035-1.125-1.864-1.125.036-.194-.334ZM5.345 2.075l-1.108.017.668 1.108 1.108-.018-.668-1.107ZM3.376 3.64l-.932.017.563.914.932-.017-.563-.915ZM7.314.193l-.773.018.404.668.774-.018-.405-.668ZM5.521 5.24l-.985.035.51.844.985-.036-.51-.844ZM10.303 5.785l-1.582.035-.264-.422-1.424.035.756 1.23.967-.017.739 1.213 2.04-.035-1.232-2.04ZM8.633 3.042l-1.372.035.721 1.196 1.372-.036-.721-1.195ZM2.567.527l-.633.018.334.545.633-.018-.334-.545ZM13.011 10.022l-2.514.053.51.809h.756l.475.756 1.74-.036-.967-1.582ZM3.147 5.714l-.773.018.404.668.774-.018-.405-.668Z" fill="#333" stroke="#333" stroke-width=".352" stroke-linecap="round" stroke-linejoin="round"/></g></g><defs><clipPath id="clip0_423_27755"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath><clipPath id="clip1_423_27755"><path fill="#fff" d="M0 0h32v31.473H0z"/></clipPath></defs></svg>

Adding a Storybook story to preview the file

Use Storybook to preview the new logo.

Add a file called platform-logos.stories.tsx to the components/__design__ directory. If this file already exists, open it instead.

We want to create a file that looks like this, eventually, for this and the other logos (separate stories)

import Image from 'next/image';
import type { Meta as MetaObj, StoryObj } from '@storybook/react';

export const PlatformLogos: StoryObj = {};

export default {
  title: 'Design System/Logos',
  component: () => {
    return (
    <div>
      <div>
        <Image
            src="/static/images/logos/platform-apple.svg"
            alt="Apple Logo"
            width={64}
            height={64}
          />
      </div>
      <div>
        <Image
            src="/static/images/logos/platform-nvm.svg"
            alt="NVM Logo"
            width={64}
            height={64}
          />
      </div>
      <div>
        <Image
            src="/static/images/logos/platform-microsoft.svg"
            alt="Microsoft Logo"
            width={64}
            height={64}
          />
      </div>
      <div>
        <Image
            src="/static/images/logos/platform-homebrew.svg"
            alt="Homebrew Logo"
            width={64}
            height={64}
          />
      </div>
      <div>
        <Image
            src="/static/images/logos/platform-placeholder.svg"
            alt="Placeholder Logo"
            width={64}
            height={64}
          />
      </div>
    </div>
  )},
} as MetaObj;

Only add the Image for the logo you added.

Running Storybook

In a terminal, run npm run storybook.

Then, in a browser, go to http://localhost:6006/?path=/story/design-system-logos--platform-logos and you should see the file you added.

Preview

Submitting the changes

Submit a pull request back to the main repository.