Provider Mark
검토된 Google, GitHub, Apple 인증 제공자 표식이에요.
핵심 속성
TRProviderMark는 provider="google" | "github" | "apple"로 선택한 공식 표식을 렌더링해요. aria-label을 전달하지 않으면 장식용으로 처리돼요. 일반적으로 바깥쪽 버튼이나 링크가 접근 가능한 이름을 제공해야 해요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/provider-mark.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRProviderMark } from '@tinyrack/ui/components/provider-mark';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
사용법
예시
인증 제공자 이름을 표시하는 작업 안에서 표식을 사용하세요. 표식 자체를 읽어야 할 때만 aria-label을 추가하세요.
API
TRProviderMarkProps는 native SVG prop과 필수 provider union을 제공해요. --tr-provider-mark-size의 기본값은 --tinyrack-space-xl이고, --tr-provider-mark-color는 단색 GitHub와 Apple 표식의 색을 정해요. 검토된 Google 다색 표식은 바뀌지 않아요.