Logos and icons

Icon component

The <Icon /> component (ref (opens in a new tab)) offers easy access to any SVG from our shared library of icons (opens in a new tab) (ref (opens in a new tab)).

Logos

Default logo (required)

There is a little bit of special functionality for icons with the name ${brand-name}-logo.svg. These files will be used in places such as Open Graph data.

All you need to do is make sure there's a friendly logo SVG at that path.

Feel free to add additional logos for your brand as needed, i.e.${brand-name}-30-year-celebration-logo.svg. These are perfectly valid and can be used anywhere.

Usage

Every brand has different requirements, so while you may expect one, we don't have a <Logo /> component. Instead, we use <Icon /> and manually map the correct logo asset.

For example, in header/brands/${your-brand}.json, you'll see the icon name being set,

{
	"logo": {
		"name": "rolling-stone-logo"
	}
}

Configuring logo for a new brand

(Some of the) components that need logos configured for each brand,

• header
• Header-sticky
• header-mobile
• mega-menu

Logos may also need tweaked padding or spacing. This can be done on a case-by-case basis within the relevant brand component styles.