AppLogo

제품의 마크를 정해진 크기로 그리며, 결코 빈 상자가 되지 않습니다. 이미지든 인라인 SVG든, 타일 위의 글자든, 아무것도 없으면 제품 이름을 로고타이프로 그립니다.

import { AppLogo } from 'neba';

<AppLogo name="Neba" src="/logo.svg" />;

Props

Prop	타입	기본값	설명
children	ReactNode	—	마크를 마크업으로. 대개 인라인 svg이며, src보다 우선합니다. 문서의 일부가 된 마크는 페이지의 색을 따르고, 요청이 하나 줄고, 늦게 도착할 수 없습니다
src	string	—	마크를 이미지로. 로고 파일에는 제품 이름이 들어 있는 경우가 많은데, shape의 기본값이 bare인 이유이자 name을 옆에 또 그리지 않고 읽어 주기만 하는 이유입니다
srcSet	string	—	다른 해상도의 후보들. img에서와 같습니다
name	string	—	제품 이름. 한 prop이 세 가지 일을 합니다. 마크의 이름이 되고, 마크가 아예 없으면 로고타이프로 그려지고, 타일에서는 이니셜의 출처가 됩니다
alt	string	name	볼 수 없는 독자에게 마크가 말하는 것. 로고는 제품을 뜻하므로 대개 name이 정답입니다
initials	string	name에서 유도	타일 위 글자를 직접 씁니다
showName	boolean	false	마크 옆에 이름을 그립니다. 그린 순간부터 그 글자가 접근성 이름이 되므로 이름이 두 번 읽히지 않습니다
shape	'bare' | 'app' | 'circle'	'bare'	마크를 두르는 방식. bare는 준 그대로(배경도 자르기도 여백도 없음), app은 모서리를 깎은 채워진 타일 안에 넣은 앱 아이콘, circle은 같은 타일을 둥글게
variant공통	'solid' | 'outline' | 'text'	'solid'	마크 뒤 타일의 무게. bare에서는 타일이 없으므로 아무 일도 하지 않습니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	마크의 높이, 컨트롤 높이 사다리라, 헤더에서 로고와 옆의 버튼이 같은 높이가 됩니다. bare는 높이만 정하고 너비는 마크의 비율대로
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
padded	boolean	true	앱 아이콘의 글리프처럼 마크를 타일 가장자리에서 안쪽으로 들입니다. 타일을 꽉 채우도록 그린 마크(파비콘, 사진)면 끕니다
height	number | string	—	size를 대신하는 정확한 높이. 숫자는 픽셀. 브랜드 아트워크는 누군가 고른 높이로 그려져 있고, 그것을 사다리의 가까운 칸으로 반올림하면 옆 글자와 반 픽셀씩 어긋납니다
href	string	—	전체를 링크로 만듭니다. 헤더의 로고는 거의 언제나 첫 페이지로 돌아가는 길입니다
imageProps	Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt'>	—	img에 더 넘길 것들, loading, decoding, crossOrigin
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<h1 />}). Base UI의 render prop 그대로

<a>의 native 속성은 그대로 전달됩니다. 다만 color는 예외입니다. 공통 축은 prop 규칙에서 설명합니다.

마크는 children이 있으면 그것, 없으면 src, 그것도 없으면 이름입니다. href가 없으면 <span>으로 렌더링됩니다.

예시

src · children

마크를 어디서 가져올지 정합니다. src는 PNG든 SVG든 브랜드가 배포하는 파일을 연결하고, children은 대신 마크업을 받습니다. 주변 색을 물려받아야 하는 인라인 <svg>가 필요로 하는 쪽이 후자입니다. 둘 다 주면 children이 이깁니다. 그래서 파일을 연결하는 프로젝트와 아이콘을 인라인으로 넣는 프로젝트가 같은 컴포넌트를 씁니다. 둘 다 없으면 타일에 name의 이니셜을 대신 그립니다.

import { AppLogo } from 'neba';

function Mark() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 18V7l8 10 8-10v11" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function AppLogoArtwork() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      {/* A file, drawn as it came. */}
      <AppLogo name="Acme Compass" src="/samples/logos/compass.png" size="lg" />
      <AppLogo name="Acme Stack" src="/samples/logos/layered-stack.png" size="lg" />

      {/* Markup, which takes the colour around it. */}
      <AppLogo name="Neba" size="lg">
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" size="lg" shape="app">
        <Mark />
      </AppLogo>

      {/* Neither, so the name's initials stand in. */}
      <AppLogo name="Acme Corp" size="lg" shape="app" variant="outline" />
    </div>
  );
}

shape

마크를 두르는 방식입니다. 기본값 bare는 준 그대로(size가 정한 높이와 그에 따른 너비로) 그리며 배경도 자르기도 여백도 없습니다. app은 모서리를 깎은 채워진 타일 안으로 들여넣고, circle은 같은 타일을 둥글게 만듭니다. padded={false}는 마크가 타일 가장자리까지 닿게 합니다.

기본값이 bare인 이유는, 로고 파일에 배경이나 여백이나 제품 이름이 이미 들어 있는 경우가 많고 정사각형으로 자르면 그 셋이 모두 잘려 나가기 때문입니다.

import { AppLogo } from 'neba';

function Mark() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 18V7l8 10 8-10v11" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function AppLogoShape() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <AppLogo name="Neba" size="lg">
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" size="lg" shape="app">
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" size="lg" shape="circle">
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" size="lg" shape="app" padded={false}>
        <Mark />
      </AppLogo>
    </div>
  );
}

name

마크가 아예 없으면 이름이 곧 마크입니다. bare에서는 로고타이프로, 타일에서는 이니셜로 그려집니다. 유도된 글자가 맞지 않으면 initials로 직접 씁니다.

import { AppLogo } from 'neba';

function Mark() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 18V7l8 10 8-10v11" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function AppLogoName() {
  return (
    <div className="flex flex-col gap-5">
      <AppLogo name="Neba Studio" />
      <AppLogo name="Neba Studio" shape="app" />
      <AppLogo name="Neba Studio" shape="app" showName />
      <AppLogo name="Neba Studio" shape="circle" showName initials="NS">
        <Mark />
      </AppLogo>
    </div>
  );
}

showName

마크 옆에 이름을 그려 lockup을 만듭니다. 기본값은 꺼짐인데, 흔한 경우는 파일에 이미 이름이 들어 있기 때문입니다. 그린 순간부터 그 글자가 접근성 이름이 되므로 이름이 두 번 읽히지 않습니다.

variant · color

마크 뒤 타일의 무게와 색 계열입니다. 타일을 그리지 않는 bare에서는 둘 다 아무 일도 하지 않습니다.

import { AppLogo } from 'neba';

export default function AppLogoVariant() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <AppLogo name="Acme Corp" shape="app" size="lg" />
      <AppLogo name="Acme Corp" shape="app" size="lg" variant="outline" color="info" />
      <AppLogo name="Acme Corp" shape="app" size="lg" variant="text" color="success" />
    </div>
  );
}

href · height · render

href는 전체를 링크로 만듭니다. Header의 로고는 거의 언제나 그렇습니다. 이 탭을 벗어나는 target을 주면 직접 쓴 rel에 rel="noopener noreferrer"가 합쳐집니다. height는 size 대신 정확한 픽셀 값이나 CSS 길이를 씁니다. render는 요소를 바꿉니다. 제품 이름이 곧 페이지 제목인 페이지라면 render={<h1 />}을, 라우터를 쓴다면 그 링크 컴포넌트를 넘기면 됩니다.

import { AppLogo } from 'neba';

function Mark() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 18V7l8 10 8-10v11" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function AppLogoLink() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <AppLogo name="Neba" href="/" shape="app" showName>
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" render={<h1 />} size="xl" />
      <AppLogo name="Neba" height={56} shape="app">
        <Mark />
      </AppLogo>
    </div>
  );
}

접근성

• 이름은 문서에 정확히 한 번만 놓입니다. 그려진 이름이 곧 접근성 이름이고, 이미지는 alt로 그것을 나르며, 마크업이나 이니셜로 된 마크는 장식으로 표시되고 이름은 옆의 잘린 span에 남습니다.
• alt는 마크가 말하는 내용을 덮어씁니다. 제품이 아닌 다른 것을 뜻하는 드문 로고를 위한 것입니다.
• href가 있으면 링크의 접근성 이름이 제품 이름이 됩니다. 첫 페이지로 돌아가는 로고에 다른 글자를 더 쓸 필요가 없습니다.