OrganizationLogo - OLUN. Design System

organization: 현재 organization="jbnu"를 지원하며 registry 확장으로 기관을 추가합니다.
color: SVG path는 currentColor만 사용하고 기관 색상은 호출부 className/style이 담당합니다.
size: 기본 32px이며 size prop 또는 className으로 조정합니다.
label: 기본 role="img"와 기관 label을 제공하며, 장식일 때 aria-hidden을 전달합니다.

호출부 색상

currentColor inheritance

inherit

caller color

코드 보기tsx

import { OrganizationLogo } from "@olundot/ui";

export function SchoolLogoColor() {
  return (
    <div className="grid gap-[var(--space-4)] sm:grid-cols-2">
      <div>
        <span>상속 색상</span>
        <OrganizationLogo organization="jbnu" size={40} />
      </div>
      <div className="text-[#004387] dark:text-[#a6165f]">
        <span>호출부 색상</span>
        <OrganizationLogo organization="jbnu" size={40} />
      </div>
    </div>
  );
}

장식 로고

aria-hidden

전북대학교 의과대학

코드 보기tsx

import { OrganizationLogo } from "@olundot/ui";

export function SchoolLockup() {
  return (
    <div className="flex items-center gap-[var(--space-4)] text-[#004387]">
      <OrganizationLogo organization="jbnu" size={40} aria-hidden />
      <span>전북대학교 의과대학</span>
    </div>
  );
}

크기 조정

size prop

코드 보기tsx

import { OrganizationLogo } from "@olundot/ui";

export function OrganizationLogoSizes() {
  return (
    <div>
      <OrganizationLogo organization="jbnu" size={24} />
      <OrganizationLogo organization="jbnu" size={40} />
      <OrganizationLogo organization="jbnu" size={56} />
    </div>
  );
}