How do I change the logo in the Navbar?

[ricardobedjeme]

I would like to remove the present logo and put mine but I don't know where to change I don't understand your BrandLogo.

[mearashadowfax]

@ricardobedjeme, it's the site logo, defined as an SVG. You can easily replace it with your own SVG code. The {...Astro.props} syntax allows you to customize it further by passing attributes from the navbar, e.g. <BrandLogo class="h-auto w-24" />.

[ricardobedjeme]

Yes I noticed but tell me how to change my logo because I really tried everything and I can'tOn 20 Mar 2025, at 14:17, Emil Gulamov ***@***.***> wrote: @ricardobedjeme, it's the site logo, defined as an SVG. You can easily replace it with your own SVG code. The {...Astro.props} syntax allows you to customize it further by passing attributes from the navbar, e.g. <BrandLogo class="h-auto w-24" />. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[mearashadowfax]

@ricardobedjeme, so, you just replace the SVG in the BrandLogo component with your option, while keeping {...Astro.props} syntax. Or you can remove <BrandLogo class="h-auto w-24" /> from the Navbar component and place your logo directly, it's up to you.

[Paddyboy76]

Hey @ricardobedjeme — I finally got it after hours of doing i like i always have in html. your question sounds to me thats how youre trying to do it. The answer is where you think, in the BrandLogo file.

I am sure you have this sorted, but I noticed this was open, so if anyone is looking :).

The logo needs to be using an SVG in the latest Astro setup (like in ScrewFast) of course :)

1. put your svg logo in the right place src/images/yourlogoname.svg (where you see the other logo files for ScrewFast)
2. in the BrandLogo file, you need to import your logo first:

---

import yourLogo from '../images/yourlogoname.svg';

Adjust the ../ based on where the file is relative to your component.

Then use them:

---

import lightLogo from '../images/yourlogoname_light.svg';
import darkLogo from '../images/yourlogoname_dark.svg';

Hope that helps! Its a really great theme and really worth you getting it going for your own site :)thanks to @mearashadowfax for all the hard work

Br,

Paddy