Logo

Use cases

App shell branding inside TopBar, sidebar headers, and compact product navigation.
Approved downloaded logo assets from /brand/logos through the brand and assetVariant props.
Custom src for partner / co-brand assets that aren't part of the approved manifest.

Approved-asset only. Earlier versions shipped an inline SVG fallback that drifted from the brand-team source. Logo now defaults brand to 'mihcm' and renders the approved /brand/logos/mihcm-primary.svg directly. The variant prop stays as a legacy alias for assetVariant.

Platform support

Web: <img> pointing at the approved SVG. Native: <Image> pointing at the same SVG URI.

Both platforms share the prop API and asset path.

Picking a logo

brand selects an approved family — mihcm (default), mihcm-lite, mia-one, smart-assist, syntra, smart-assist-icon, syntra-icon, mihcm-favicon.
assetVariant switches the colour treatment — primary, secondary, white, black. Use white on dark surfaces, black for inverted single-colour layouts, secondary for tonal treatments.
src lets you point at any URL when you need a downloaded partner asset outside /brand/logos.

<Logo />                                          {/* default — mihcm-primary at md */}
<Logo assetVariant="white" />                     {/* mihcm-white */}
<Logo brand="mihcm-lite" alt="MiHCM Lite" size="lg" />
<Logo brand="syntra" assetVariant="white" alt="Syntra" />
<Logo src="/custom/partner-logo.svg" alt="Partner logo" className="h-10 w-28" />

Sizing

size controls the rendered height; each brand has an internal aspect-ratio preset, so the width derives automatically — no one-off w-* classes needed.

Size	Height
`sm`	20px
`md`	24px
`lg`	32px
`xl`	56px
`xxl`	80px
`xxxl`	112px

<Logo brand="mihcm" size="lg" alt="MiHCM" />
<Logo brand="smart-assist" size="xxl" alt="Smart Assist" />
<Logo brand="syntra-icon" size="xxl" alt="Syntra icon" />

Tailwind overrides

className merges on the root span. Use it only for deliberate layout exceptions — for example, a fixed-width marketing slot for a custom src partner asset.

import { Logo } from '@mihcm/ui/Logo';
 
<Logo brand="mihcm-lite" alt="MiHCM Lite" className="h-10" />
<Logo brand="syntra" assetVariant="white" alt="Syntra" className="h-10" />
<Logo src="/custom/partner-logo.svg" alt="Partner logo" className="h-10 w-28" />

Migration from inline (v0.19 → v0.20)

Before	After
`<Logo />` rendered an inline SVG	Renders `/brand/logos/mihcm-primary.svg`
`<Logo variant="white" />` colour-shifted the inline SVG	Renders `/brand/logos/mihcm-white.svg`. `variant` stays as a deprecated alias for `assetVariant`.
`<Logo variant="current" />` used `fill-current`	Removed — no `current` asset. For coloured overlays, pass a custom `src` or apply `className` to a `black`/`white` asset.