Skip to content

Logo

The Logo component renders a brand-specific logo and provides accessibility and navigation support. The backend LogoModel supplies the ariaLabel and homepageLink properties. The homepageLink enables the logo to act as a link to the brand’s homepage.

The BrandLogo component renders an SVG logo for the specified brand. It supports custom dimensions and allows an SVG logo definition to be supplied through the logoSvg property.

  • CSS
  • React

Maintained by Platform and Foundation

Ready to use

ReactCSS

LogoProperties

Section titled “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

Section titled “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

Section titled “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 };