Widgets
Logo

Logo

Reusable logo component with variants.

Lualtek Logo

Anatomy

import { Logo } from "@lualtek/react-components";
 
export default () => {
  return <Logo width="300px" />;
};

API Reference

export type LogoProps = SVGAttributes<SVGElement> & {
  /**
   * Set the fil color as string
   * @default 'var(--dimmed-8)'
   */
  fill?: string;
 
  /**
   * Define the element width.
   * If `height` is not defined the aspect-ratio is preserved.
   * @default '100%'
   */
  width?: string;
 
  /**
   * Define the element height.
   * If `width` is not defined the aspect-ratio is preserved.
   */
  height?: string;
 
  /**
   * Set the logo parts to display
   * @default 'full'
   */
  variant?: "full" | "mark" | "wordmark";
 
  /**
   * Trim the white space around the logo.
   */
  trim?: boolean;
};