组件 · 身份
RaftLogo
The Raft mark, wordmark and lockup as inline SVGs, for brand pages such as sign-in, creating an account or a server, and loading screens.
import { RaftLogo } from "@botiverse/raft-ui";raft-ui exports the Raft logo as three inline SVGs: RaftLogo (the mark), RaftWordmark (the word RAFT) and RaftLogoLockup (the two together). They are the website's artwork, copied exactly. Where the logo may appear, and which colors go on which background, is in Brand; the source files and their colors are in Logos.
When to use
Where the logo may appear is in Brand and Logos. Once it may appear, pick the export by what it shows:
| Situation | Use |
|---|---|
| The mark alone | RaftLogo |
| The word alone | RaftWordmark |
| The mark and the word together | RaftLogoLockup |
| The frame of a working page | Not the logo: the workspace button or the rail's workspace tile (Brand) |
Anatomy
RaftLogo: the mark alone.RaftWordmark: the letters alone.RaftLogoLockup: the mark, then the letters.
Each one is an svg that keeps its proportions. Set its height with a class and leave the width auto. The exports draw the light-background colors of raft-logo.svg: an ink outline with a cream inside. raft-ui has no export of the yellow version for dark backgrounds.
Accessibility
- The SVGs have no name of their own. When the logo stands alone, give it
role="img"andaria-label="Raft". - When visible text next to it already says Raft, hide the logo with
aria-hidden.
API
RaftLogo, RaftLogoLockup, RaftWordmark
接受其元素的全部属性。
相关组件
改动
- 0.1.0 · AddedAdded
ConversationPanel,ThreadPanel,Panel,ScrollArea,FilePreview,RaftLogo/ lockup / wordmark, andMobileNav.