112 lines
3.4 KiB
TypeScript
112 lines
3.4 KiB
TypeScript
/**
|
|
* 썰박스 UI 아이콘.
|
|
*
|
|
* 원본(o2o-ssulbox/frontend/src/icons.tsx)에서 이식하되 **castad 에 대응물이 있는 것은 제외**했다:
|
|
* IcHome / IcSearch / IcUser / IcGrid → castad Sidebar 가 대체
|
|
* IcBack → castad 각 화면의 뒤로가기 버튼이 대체
|
|
*
|
|
* 색·굵기는 대부분 CSS(컨텍스트)로 제어된다. 원본이 일부 아이콘에 `stroke="#fff"` 를
|
|
* 하드코딩했는데, castad 다크 배경에서도 흰색이 맞아 그대로 두되
|
|
* 재사용 가능성이 있는 것은 `currentColor` 로 바꿨다.
|
|
*
|
|
* 모두 장식용이므로 사용하는 쪽에서 `aria-hidden` 을 붙이거나 접근 가능한 라벨을 준다.
|
|
*/
|
|
import React from 'react';
|
|
|
|
/** 재생 (카드 오버레이) */
|
|
export const IcPlay: React.FC = () => (
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
);
|
|
|
|
/** 좋아요 (채움) */
|
|
export const IcHeart: React.FC = () => (
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z" />
|
|
</svg>
|
|
);
|
|
|
|
/** 좋아요 (원본에서 채움과 동일 — 상태는 CSS 로 구분) */
|
|
export const IcHeartLine = IcHeart;
|
|
|
|
/** 댓글 */
|
|
export const IcComment: React.FC = () => (
|
|
<svg viewBox="0 0 24 24">
|
|
<path
|
|
d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-5.2A8 8 0 1 1 21 12z"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.8"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
/** 공유 */
|
|
export const IcShare: React.FC = () => (
|
|
<svg viewBox="0 0 24 24">
|
|
<path
|
|
d="M22 3 11 14M22 3l-7 19-4-8-8-4z"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.8"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
/** 링크 복사 */
|
|
export const IcLink: React.FC = () => (
|
|
<svg viewBox="0 0 24 24">
|
|
<path
|
|
d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1m0 8a5 5 0 0 1-7 0 5 5 0 0 1 0-7l2-2a5 5 0 0 1 7 0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.7"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
/** 업로드 */
|
|
export const IcUpload: React.FC = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
|
<path d="M12 15V4M8 8l4-4 4 4M5 15v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3" />
|
|
</svg>
|
|
);
|
|
|
|
/** 다운로드 */
|
|
export const IcDownload: React.FC = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
|
<path d="M12 4v11M8 11l4 4 4-4M5 19h14" />
|
|
</svg>
|
|
);
|
|
|
|
/** 복사 (캡션) */
|
|
export const IcCopy: React.FC = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
|
<rect x="9" y="9" width="11" height="11" rx="2" />
|
|
<path d="M5 15V5a2 2 0 0 1 2-2h8" />
|
|
</svg>
|
|
);
|
|
|
|
// ── SNS 플랫폼 ────────────────────────────────────────────────
|
|
export const IcYoutube: React.FC = () => (
|
|
<svg viewBox="0 0 24 24">
|
|
<rect x="2" y="5" width="20" height="14" rx="4" />
|
|
<path d="M10 9l5 3-5 3z" fill="#fff" />
|
|
</svg>
|
|
);
|
|
|
|
export const IcInstagram: React.FC = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
|
<rect x="3" y="3" width="18" height="18" rx="5" />
|
|
<circle cx="12" cy="12" r="4" />
|
|
<circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
|
|
</svg>
|
|
);
|
|
|
|
export const IcTiktok: React.FC = () => (
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M14 3c.3 2.3 1.8 4 4 4.3V10c-1.5 0-2.9-.5-4-1.3V15a5 5 0 1 1-5-5v2.6a2.4 2.4 0 1 0 2.4 2.4V3z" />
|
|
</svg>
|
|
);
|