// @fox 아이콘 — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)의 `ico/*` 컴포넌트 // // Figma export 자산의 path를 그대로 옮겼다. 손으로 그리지 않았으므로 굵기·곡률이 시안과 같다. // 시안은 아이콘을 정사각 박스(12·16·24·32px) 안에 여백을 두고 앉히는데, 그 여백까지 // `transform: translate`로 재현했다 — 박스만 맞추고 path를 늘리면 굵기가 어긋난다. // // 크기는 갖지 않는다. 감싼 쪽이 `inline-size`/`block-size`로 정하고 `viewBox`가 따라 늘어난다. // 색도 갖지 않는다 — `fill: currentColor`라 감싼 쪽의 `color`를 쓴다. // // CaretLeft/CaretRight는 두 벌이다. 시안이 브레드크럼·페이지네이션에는 Regular 굵기를, // 캐러셀 버튼에는 Bold 굵기를 물려 놓았다(같은 아이콘의 다른 variant). /** 시안 ico/House. 아이콘 박스 16px 안에서의 위치까지 그대로 옮겼다. */ export function FoxHouseIcon() { return ( <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"> <path transform="translate(2 1.4992)" d="M11.7069 5.29266L6.70688 0.292662C6.51936 0.105267 6.26511 0 6.00001 0C5.7349 0 5.48065 0.105267 5.29313 0.292662L0.293131 5.29266C0.199822 5.38528 0.125855 5.49552 0.0755335 5.61698C0.0252116 5.73844 -0.00046166 5.86869 6.28343e-06 6.00016V12.0002C6.28343e-06 12.1328 0.0526848 12.2599 0.146453 12.3537C0.240221 12.4475 0.367398 12.5002 0.500006 12.5002H4.50001C4.63261 12.5002 4.75979 12.4475 4.85356 12.3537C4.94733 12.2599 5.00001 12.1328 5.00001 12.0002V8.50016H7.00001V12.0002C7.00001 12.1328 7.05268 12.2599 7.14645 12.3537C7.24022 12.4475 7.3674 12.5002 7.50001 12.5002H11.5C11.6326 12.5002 11.7598 12.4475 11.8536 12.3537C11.9473 12.2599 12 12.1328 12 12.0002V6.00016C12.0005 5.86869 11.9748 5.73844 11.9245 5.61698C11.8742 5.49552 11.8002 5.38528 11.7069 5.29266ZM11 11.5002H8.00001V8.00016C8.00001 7.86755 7.94733 7.74038 7.85356 7.64661C7.75979 7.55284 7.63261 7.50016 7.50001 7.50016H4.50001C4.3674 7.50016 4.24022 7.55284 4.14645 7.64661C4.05268 7.74038 4.00001 7.86755 4.00001 8.00016V11.5002H1.00001V6.00016L6.00001 1.00016L11 6.00016V11.5002Z" /> </svg> ); } /** 시안 ico/CaretLeft. 아이콘 박스 16px 안에서의 위치까지 그대로 옮겼다. */ export function FoxCaretLeftIcon() { return ( <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"> <path transform="translate(4.4992 2.4992)" d="M5.85414 10.1465C5.9006 10.193 5.93745 10.2481 5.96259 10.3088C5.98773 10.3695 6.00067 10.4346 6.00067 10.5003C6.00067 10.566 5.98773 10.631 5.96259 10.6917C5.93745 10.7524 5.9006 10.8076 5.85414 10.854C5.80769 10.9005 5.75254 10.9373 5.69184 10.9625C5.63115 10.9876 5.56609 11.0006 5.50039 11.0006C5.4347 11.0006 5.36964 10.9876 5.30895 10.9625C5.24825 10.9373 5.1931 10.9005 5.14664 10.854L0.146643 5.85403C0.100155 5.80759 0.0632757 5.75245 0.0381136 5.69175C0.0129514 5.63105 0 5.56599 0 5.50028C0 5.43457 0.0129514 5.36951 0.0381136 5.30881C0.0632757 5.24811 0.100155 5.19296 0.146643 5.14653L5.14664 0.146528C5.24046 0.0527077 5.36771 -2.61548e-09 5.50039 0C5.63308 2.61548e-09 5.76032 0.0527077 5.85414 0.146528C5.94796 0.240348 6.00067 0.367596 6.00067 0.500278C6.00067 0.63296 5.94796 0.760208 5.85414 0.854028L1.20727 5.50028L5.85414 10.1465Z" /> </svg> ); } /** 시안 ico/CaretRight. 아이콘 박스 16px 안에서의 위치까지 그대로 옮겼다. */ export function FoxCaretRightIcon() { return ( <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"> <path transform="translate(5.4992 2.4992)" d="M5.85403 5.85403L0.854028 10.854C0.807573 10.9005 0.752423 10.9373 0.691726 10.9625C0.63103 10.9876 0.565975 11.0006 0.500278 11.0006C0.434581 11.0006 0.369526 10.9876 0.30883 10.9625C0.248133 10.9373 0.192983 10.9005 0.146528 10.854C0.100073 10.8076 0.0632225 10.7524 0.0380812 10.6917C0.0129398 10.631 0 10.566 0 10.5003C0 10.4346 0.0129398 10.3695 0.0380812 10.3088C0.0632225 10.2481 0.100073 10.193 0.146528 10.1465L4.7934 5.50028L0.146528 0.854028C0.0527074 0.760208 -9.88558e-10 0.63296 0 0.500278C9.88559e-10 0.367596 0.0527074 0.240348 0.146528 0.146528C0.240348 0.0527077 0.367596 9.88558e-10 0.500278 0C0.63296 -9.88558e-10 0.760208 0.0527077 0.854028 0.146528L5.85403 5.14653C5.90052 5.19296 5.9374 5.24811 5.96256 5.30881C5.98772 5.36951 6.00067 5.43457 6.00067 5.50028C6.00067 5.56599 5.98772 5.63105 5.96256 5.69175C5.9374 5.75245 5.90052 5.80759 5.85403 5.85403Z" /> </svg> ); } /** 시안 ico/CaretLeft(bold). 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */ export function FoxCaretLeftBoldIcon() { return ( <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path transform="translate(6.372 3.3744)" d="M9.42464 15.3301C9.63598 15.5414 9.75471 15.8281 9.75471 16.127C9.75471 16.4258 9.63598 16.7125 9.42464 16.9238C9.21329 17.1352 8.92665 17.2539 8.62776 17.2539C8.32888 17.2539 8.04223 17.1352 7.83089 16.9238L0.330887 9.42383C0.226007 9.31931 0.142791 9.19512 0.0860095 9.05837C0.0292284 8.92163 0 8.77502 0 8.62695C0 8.47889 0.0292284 8.33228 0.0860095 8.19553C0.142791 8.05878 0.226007 7.93459 0.330887 7.83008L7.83089 0.330076C8.04223 0.118732 8.32888 -4.45375e-09 8.62776 0C8.92665 4.45375e-09 9.21329 0.118732 9.42464 0.330077C9.63598 0.541421 9.75471 0.828065 9.75471 1.12695C9.75471 1.42584 9.63598 1.71248 9.42464 1.92383L2.72245 8.62601L9.42464 15.3301Z" /> </svg> ); } /** 시안 ico/CaretRight(bold). 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */ export function FoxCaretRightBoldIcon() { return ( <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path transform="translate(7.872 3.372)" d="M9.42383 9.42383L1.92383 16.9238C1.71248 17.1352 1.42584 17.2539 1.12695 17.2539C0.828065 17.2539 0.541421 17.1352 0.330076 16.9238C0.118732 16.7125 2.22687e-09 16.4258 0 16.127C-2.22687e-09 15.8281 0.118732 15.5414 0.330076 15.3301L7.03414 8.62789L0.331952 1.92383C0.227304 1.81918 0.144293 1.69495 0.0876589 1.55822C0.0310243 1.42149 0.00187469 1.27494 0.00187469 1.12695C0.00187468 0.978958 0.0310243 0.832414 0.0876589 0.695686C0.144293 0.558958 0.227304 0.434724 0.331952 0.330077C0.436599 0.225429 0.560833 0.142419 0.697561 0.0857842C0.834289 0.0291496 0.980833 -1.10264e-09 1.12883 0C1.27682 1.10264e-09 1.42336 0.0291496 1.56009 0.0857842C1.69682 0.142419 1.82105 0.225429 1.9257 0.330077L9.4257 7.83008C9.53046 7.93472 9.61353 8.05901 9.67015 8.19582C9.72677 8.33263 9.75582 8.47928 9.75565 8.62734C9.75548 8.77541 9.72608 8.92198 9.66913 9.05866C9.61219 9.19534 9.52883 9.31943 9.42383 9.42383Z" /> </svg> ); } /** 시안 ico/Play. 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */ export function FoxPlayIcon() { return ( <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path transform="translate(6 2.2488)" d="M16.5 9.75047C16.5006 10.0051 16.4353 10.2556 16.3105 10.4775C16.1856 10.6995 16.0055 10.8853 15.7875 11.017L2.28 19.2802C2.05227 19.4196 1.79144 19.4957 1.52445 19.5007C1.25746 19.5056 0.993989 19.4392 0.76125 19.3083C0.530728 19.1794 0.338696 18.9914 0.204904 18.7637C0.0711107 18.536 0.000385179 18.2768 0 18.0127V1.48828C0.000385179 1.22417 0.0711107 0.964934 0.204904 0.737222C0.338696 0.509511 0.530728 0.321545 0.76125 0.192655C0.993989 0.0617322 1.25746 -0.00468706 1.52445 0.0002572C1.79144 0.00520146 2.05227 0.0813301 2.28 0.220781L15.7875 8.4839C16.0055 8.6156 16.1856 8.80145 16.3105 9.0234C16.4353 9.24534 16.5006 9.49582 16.5 9.75047Z" /> </svg> ); } /** 시안 ico/Pause. 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */ export function FoxPauseIcon() { return ( <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path transform="translate(3.7512 3)" d="M16.5 1.5V16.5C16.5 16.8978 16.342 17.2794 16.0607 17.5607C15.7794 17.842 15.3978 18 15 18H11.25C10.8522 18 10.4706 17.842 10.1893 17.5607C9.90804 17.2794 9.75 16.8978 9.75 16.5V1.5C9.75 1.10218 9.90804 0.720644 10.1893 0.43934C10.4706 0.158035 10.8522 0 11.25 0H15C15.3978 0 15.7794 0.158035 16.0607 0.43934C16.342 0.720644 16.5 1.10218 16.5 1.5ZM5.25 0H1.5C1.10218 0 0.720644 0.158035 0.43934 0.43934C0.158035 0.720644 0 1.10218 0 1.5V16.5C0 16.8978 0.158035 17.2794 0.43934 17.5607C0.720644 17.842 1.10218 18 1.5 18H5.25C5.64782 18 6.02936 17.842 6.31066 17.5607C6.59196 17.2794 6.75 16.8978 6.75 16.5V1.5C6.75 1.10218 6.59196 0.720644 6.31066 0.43934C6.02936 0.158035 5.64782 0 5.25 0Z" /> </svg> ); } /** 시안 ico/Plus. 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */ export function FoxPlusIcon() { return ( <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path transform="translate(2.6256 2.6256)" d="M18.75 9.375C18.75 9.67337 18.6315 9.95952 18.4205 10.1705C18.2095 10.3815 17.9234 10.5 17.625 10.5H10.5V17.625C10.5 17.9234 10.3815 18.2095 10.1705 18.4205C9.95952 18.6315 9.67337 18.75 9.375 18.75C9.07663 18.75 8.79048 18.6315 8.5795 18.4205C8.36853 18.2095 8.25 17.9234 8.25 17.625V10.5H1.125C0.826631 10.5 0.540483 10.3815 0.329505 10.1705C0.118526 9.95952 0 9.67337 0 9.375C0 9.07663 0.118526 8.79048 0.329505 8.5795C0.540483 8.36853 0.826631 8.25 1.125 8.25H8.25V1.125C8.25 0.826631 8.36853 0.540483 8.5795 0.329505C8.79048 0.118526 9.07663 0 9.375 0C9.67337 0 9.95952 0.118526 10.1705 0.329505C10.3815 0.540483 10.5 0.826631 10.5 1.125V8.25H17.625C17.9234 8.25 18.2095 8.36853 18.4205 8.5795C18.6315 8.79048 18.75 9.07663 18.75 9.375Z" /> </svg> ); }