Logo

Logo displays your application's brand symbol by automatically loading logo images defined in the app manifest. While logos are typically configured using App-level properties (logo, logo-dark), this component provides direct control when you need custom logo placement or templating.

Most apps use logo="path/to/logo.svg" on the App component rather than using <Logo> directly. Use this component when you need custom logo positioning or want to combine logos with other elements in a logoTemplate.

Using Logo

The framework checks the application manifest for a logo resource (SVG file). If found, it loads and displays it in the Logo component.

This is a sample manifest that shows a logo definition:

{
  "name": "Tutorial",
  "version": "0.0.1",
  "resources": {
    "logo": "resources/xmlui-logo.svg",
    "favicon": "resources/favicon.ico"
  }
}

In the following example, you can see a custom logo definition in the AppHeader via templating. There is a Heading with the title text "MyApp" before the logo. It also uses the Logo component within the template definition:

<App layout="horizontal">
  <AppHeader>
    <property name="logoTemplate">
       <Fragment>
         <Heading level="h2" value="MyApp"/>
         <Logo/>
       </Fragment>
    </property>
  </AppHeader>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <CHStack>
        (Sample content)
      </CHStack>
    </Page>
  </Pages>
</App>

The markup displays the app's logo:

<App layout="horizontal">
  <AppHeader>
    <property name="logoTemplate">
       <Fragment>
         <Heading level="h2" value="MyApp"/>
         <Logo/>
       </Fragment>
    </property>
  </AppHeader>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <CHStack>
        (Sample content)
      </CHStack>
    </Page>
  </Pages>
</App>

The markup displays the app's logo:

Properties

`alt` (default: "Logo")

Alternative text for the logo image for accessibility.

`inline` (default: false)

When set to true, the image will be displayed as an inline element instead of a block element.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

This component does not have any styles.