How do upload an svg logo to replace the placeholder from Vercel?

[VincentLu91]

I'm rather new to this but I'm looking to replace the logo on the site. From the Logo.js code, I am looking to figure out how and where to replace the logo but I don't see any file referenced that sets the logo. The code from Logo.js is:

const Logo = ({ className = '', ...props }) => (
  <svg
    width="32"
    height="32"
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
    {...props}
  >
    <rect width="100%" height="100%" rx="16" fill="var(--secondary)" />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
      fill="var(--primary)"
    />
  </svg>
);

export default Logo;

Could someone show me how to modify the codebase that allows for a new logo to be replaced?

[nate-oo]

Hi @VincentLu91

You could try these options:

If your logo is an SVG file type (ex: my-logo.svg) and not a png or jpg, you could add your my-logo.svg file to the public folder in vscode, click to open it so you can view the SVG code, copy the code within the <path/> tag and replace the <path/> tag in the Logo.js file.

If it is a PNG or JPG, you could try adding your my-logo.png or my-logo.jpg to the public folder in vscode, go to the Logo.js file, and replace the code there with something like the below:

import Image from "next/image";

const Logo = ({ className = '', ...props }) => (
         <Image
              src=/my-logo.png
              alt=""
              className={className}
              {...props}
              quality={100}
              width={32}
              height={32}
              priority
            />
);

export default Logo;

I haven't done this in the codebase of this repo as I am coding my own UI components from scratch but thought this might steer you in the right direction.

I'd also research Next Image in their docs for more details.

[VincentLu91]

works for me. Thanks @nate-oo !

[VincentLu91]

works for me. Thanks @nate-oo !

at least for the insertion as I used the png in place for a logo. I also had an svg file that was converted from a png, but I may need to experiment with that a bit too