How to set logo as an image

[craigyu]

Hi,
can you show me an example on how to set the logo as an image?
thanks

[skipjack]

Sure... you may have to tweak the styling slightly but something like this:

<Banner
            logo={ <img src="./path/to/img.svg" /> }
            url={ window.location.pathname }
            links={[
                { "title": "Example Link", "url": "/example" },
                { "title": "Another", "url": "/another" },
                { "title": "Link w/ Children", "url": "/children", "children": [
                    { "title": "John", "url": "/children/john" },
                    { "title": "Jill", "url": "/children/jill" },
                    { "title": "Jack", "url": "/children/jack" }
                ]}
            ]} />

or if you want to use another component:

<Banner
            logo={ <Logo someProp={ ... } /> }
            ... />

As documented on the customization page, the banner will accept any renderable node.

[craigyu]

Thanks it worked!

[skipjack]

Glad to hear it! Might add a section in the customization docs to demo this a bit more as it's probably a pretty common use case.

Please don't hesitate to reach out with any other questions... we'll be integrating it into webpack.js.org soon at which point it'll probably start getting a bit more exposure. The more kinks we can work out before then the better!

I'm already using this in production on a few other projects so it will stay well supported for the foreseeable future. The next thing I'll demo and document on the site is actual integrating/implementing searching.

[craigyu]

Yea add it to the docs will help a lot of beginners like me for sure. I wasn't sure what to do with the PropTypes.node type.

[skipjack]

I wasn't sure what to do with the PropTypes.node type.

Yeah, that's gotten me a few times as well.