LarkLogo Lark 标志

import { LarkLogo } from "@lark-ui/core";

export function LarkLogoBasicDemo() {
  return <LarkLogo className="size-16" />;
}

安装

import { LarkLogo } from "@lark-ui/core";

用法

import { LarkLogo } from "@lark-ui/core";

export default function Example() {
  return <LarkLogo className="size-10" />;
}

示例

颜色变体

默认保留三个品牌色：顶部青绿 #00D6B9、中层深蓝 #163C9A、底层亮蓝 #3370FF，UI 元素使用深蓝与白色。也可以渲染为纯色标志。

import { LarkLogo } from "@lark-ui/core";

export function LarkLogoColorVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <LarkLogo className="size-12" color="color" />
      <LarkLogo className="size-12" color="teal" />
      <LarkLogo className="size-12" color="dark" />
      <LarkLogo className="size-12" color="blue" />
      <LarkLogo className="size-12" color="black" />
      <div className="rounded-lg bg-lark-contrast p-3">
        <LarkLogo className="size-12" color="white" />
      </div>
    </div>
  );
}

尺寸

使用 Tailwind 的尺寸工具类；viewBox 会保证标志保持正方形。

import { LarkLogo } from "@lark-ui/core";

export function LarkLogoSizesDemo() {
  return (
    <div className="flex flex-wrap items-end gap-6">
      <LarkLogo className="size-6" />
      <LarkLogo className="size-10" />
      <LarkLogo className="size-16" />
      <LarkLogo className="size-24" />
    </div>
  );
}

API 参考

LarkLogo 继承自 SVGSVGElement，接受所有标准 SVG 属性。

属性	类型	默认值	说明
color	`"color" \| "teal" \| "dark" \| "blue" \| "black" \| "white"`	`"color"`	三色品牌标志，或指定单色处理。
label	`string`	-	无障碍标签。纯装饰用途时可省略。
className	`string`	-	用于控制尺寸的 CSS 类名。