System Logo

v0.0.5+

SystemLogo is used to display the brand image (Logo + Title) of a system. It typically appears at the top of a sidebar, the header of a login page, or within a navigation bar.

The component is highly flexible, allowing you to display the default TechUI brand identity or easily replace it with your own business Logo image or icon through configuration.

Default Identity

When no custom icon parameters are passed, the component renders the TechUI Logo by default.

This is a special composite icon (TuiIconLogo) composed of four independent vector parts from the TuiIcons library. This design allows for independent color control of each part of the Logo, enabling multi-color or monochromatic visual effects.

Assembly Principle: The TechUI Logo is assembled using four icon elements: ti-techui-lt-part (top-left), ti-techui-rt-part (top-right), ti-techui-lb-part (bottom-left), and ti-techui-rb-part (bottom-right), all positioned absolutely.

Basic Usage

By default, the component displays the multi-color icon and the default title.

<template>
  <div class="demo-box">
    <TuiSystemLogo />
  </div>
</template>

Layout Direction

Supports two layout modes: horizontal (h) and vertical (v).

• Horizontal (h): Suitable for sidebar tops or navigation bars, with the icon on the left and text on the right.
• Vertical (v): Suitable for login pages or large screen displays, with the icon on top and text below.

<template>
  <div class="row">
    <TuiSystemLogo direction="h" />
    <TuiSystemLogo direction="v" />
  </div>
</template>

Appearance Styles

The component separates Icon Appearance (iconAppearance) from Text Appearance (textAppearance), allowing you to combine them freely to suit dark/light backgrounds or different theme styles.

Available values:

• colorful: Original multi-color (only valid for the default TechUI Logo).
• white / black: Pure white or pure black.
• strongest / weakest: Follows the strong/weak tones of the current global theme color.
• custom: Uses CSS variables for custom colors.

<template>
  <TuiSystemLogo 
    iconAppearance="colorful" 
    textAppearance="white" 
  />

  <TuiSystemLogo 
    iconAppearance="strongest" 
    textAppearance="fontBase" 
  />
</template>

Size Adjustment

Precisely control the size of the icon and text via logoSize and textSize.

<template>
  <TuiSystemLogo 
    :logoSize="64" 
    :textSize="32" 
    direction="v" 
  />
</template>

Custom Branding

TuiSystemLogo is designed for customization. You can easily replace the default TechUI identity with your own business brand.

Modify Text

Change the main and sub titles using mainText and subText.

<template>
  <TuiSystemLogo 
    mainText="MyApp" 
    subText="Pro" 
  />
</template>

Using an Image Logo

Pass the image URL via iconSrc.

<template>
  <TuiSystemLogo 
    iconSrc="/assets/my-logo.png" 
    mainText="Secure" 
    subText="Lite"
  />
</template>

Using Icon Fonts

Pass the icon class name via iconLogo (e.g., FontAwesome or other icons from TuiIcons).

<template>
  <TuiSystemLogo 
    iconLogo="tui-icon ti-shield-check" 
    mainText="Admin" 
    subText="System"
    iconAppearance="strongest"
  />
</template>

Complete Customization (Slot)

Use slots to implement Emoji Logos or other complex DOM structures.

<template>
  <TuiSystemLogo mainText="Emoji" subText="Fun">
    <template #icon>
      <span style="font-size: 40px;">🚀</span>
    </template>
  </TuiSystemLogo>
</template>

API Reference

Props

Property	Description	Type	Default
direction	Layout direction, options: 'h' (horizontal), 'v' (vertical)	String	'h'
logoSize	Icon size (px)	Number	—
textSize	Text size (px)	Number	—
logoPadding	Padding around the icon (px)	Number	—
iconAppearance	Icon style, options: 'colorful', 'white', 'black', 'strongest', 'weakest', 'custom'	String	'colorful'
textAppearance	Text style, options: 'fontBase', 'white', 'black', 'strongest', 'weakest', 'custom'	String	'fontBase'
mainText	Main title text. Defaults to 'TechUI'	String	—
subText	Subtitle text. Defaults to global platform config (e.g., 'Prime')	String	—
iconSrc	Custom Logo image URL (higher priority than default Logo)	String	—
iconLogo	Custom Logo icon class name (higher priority than iconSrc)	String	—
collapse	Whether to force collapse text (often used for collapsed sidebars)	Boolean	false

Slots

Slot Name	Description
icon	Content for the custom icon area
text	Content for the custom text area (overrides mainText and subText)