React

LogoProperties

Prop	Type	Description	Optional
ariaLabel	string	Accessible label applied to the logo link for screen readers and assistive technologies.	❌
homepageLink	string	URL of the homepage. When provided, the logo acts as a link to this page.	❌
height	number	Height of the logo.	✅
width	number	Width of the logo.	✅
brand	Brand	Brand: e.g., Lexus, Toyota	❌

SVGProperties

| Prop | Type | Description | Optional | | ——— | –––– | ————————————————————————————————— | –––– | — | — | | brand | Brand | Brand: e.g., Lexus, Toyota | ❌ | | height | number | Height of the logo. | ✅ | | width | number | Width of the logo. | ✅ | | logoSvg | Logo | Custom logo SVG configuration. If provided, this SVG is rendered instead of the default brand logo. | ✅ | | ✅ |

Examples

import { BrandLogo } from '@tmedxp/react-components';

const BrandLogoExample = () => (
  <BrandLogo brand='lexus' width={120} height={22} logoSvg={
      viewBox: '0 0 120.33 85.33',
      paths: [
        {
          d: 'M102.97,11.89C92.64,4.53,77.7,0,60.16,0h0C42.62,0,27.69,4.53,17.36,11.89,5.89,20.06,0,30.84,0,42.62v.1c0,11.7,5.76,22.44,17.38,30.79,10.56,7.59,25.85,11.82,42.79,11.82h0c16.93,0,32.23-4.22,42.79-11.82,11.61-8.35,17.37-19.09,17.37-30.8v-.1c0-11.78-5.89-22.56-17.36-30.73h0ZM97.48,69.55c-9.03,6.1-20.82,9.8-37.31,9.8h0c-16.49,0-28.28-3.7-37.31-9.8-10.1-6.82-15.59-16.59-15.59-27.01s4.63-19.06,14.96-26.36c7.46-5.27,18.21-8.88,30.08-9.99h0c3.68-.3,5.95-.24,6.52.76.51.88-.07,2.29-2.05,4.71-5.52,6.74-19.18,24.7-26.3,35.23-3.38,5-4.15,9.16-2.27,12.6,1.93,3.52,5.33,5.18,15.17,5.48,13.55.42,38.35.3,59.8-.05h.01c-.14.13-2.29,2.32-5.71,4.63h.01ZM110.37,54.86h0c-.34.72-.47.93-.73,1.25-19.73.26-42.68.28-56.21-.02-2.7-.06-3.92-.66-4.42-1.87-.56-1.37-.15-2.41,2.16-6.04,6.55-10.28,21.57-29.83,30.02-39.43.78.08,2.08.36,4.41,1.17h0c4.75,1.66,8.99,3.77,12.5,6.26,10.33,7.3,14.96,16.29,14.96,26.36,0,4.27-.92,8.43-2.71,12.32h.02Z',
          id: 1,
        },
      ],
    }/>
);

export { BrandLogoExample };

import { Logo } from '@tmedxp/aem-react-components';

const LogoExample = () => (
  <Logo
    ariaLabel={i18n('toyota/i18n/accessibility/labels:navigationA11yHomepage')}
    homepageLink="https://www.toyota.fr"
    width={32}
    height={32}
  />
);

export { LogoExample };