Commit @ac05b33fe2eade5f6460c9fe6896de759360f94f

ac05b33

@fox/assets/fonts/fox-icons-bold.woff2 (Binary) (added)

+++ @fox/assets/fonts/fox-icons-bold.woff2

Binary file is not shown

ac05b33

@fox/assets/fonts/fox-icons-duotone.woff2 (Binary) (added)

+++ @fox/assets/fonts/fox-icons-duotone.woff2

Binary file is not shown

ac05b33

@fox/assets/fonts/fox-icons-fill.woff2 (Binary) (added)

+++ @fox/assets/fonts/fox-icons-fill.woff2

Binary file is not shown

ac05b33

@fox/assets/fonts/fox-icons-light.woff2 (Binary) (added)

+++ @fox/assets/fonts/fox-icons-light.woff2

Binary file is not shown

ac05b33

@fox/assets/fonts/fox-icons-regular.woff2 (Binary) (added)

+++ @fox/assets/fonts/fox-icons-regular.woff2

Binary file is not shown

ac05b33

@fox/assets/fonts/fox-icons-thin.woff2 (Binary) (added)

+++ @fox/assets/fonts/fox-icons-thin.woff2

Binary file is not shown

ffa13e6

ac05b33

@fox/core/components/fox-accordion/fox-accordion.tsx

--- @fox/core/components/fox-accordion/fox-accordion.tsx

+++ @fox/core/components/fox-accordion/fox-accordion.tsx


 
 import { useId, useState, type ReactNode } from "react";
 import { cx } from "../../utils";
-import { FoxCaretDownIcon, FoxCaretUpIcon } from "../../icons";
 
 /** `box`는 색을 깐 상자, `line`은 위쪽 선 하나로 나뉘는 목록형이다. */
 export type FoxAccordionType = "box" | "line";

         {badge && <span className="fox-accordion__badge">{badge}</span>}
         <span className="fox-accordion__title">{title}</span>
         <span className="fox-accordion__icon" aria-hidden="true">
-          {expanded ? <FoxCaretUpIcon /> : <FoxCaretDownIcon />}
+          {expanded ? <i className="fox-ico fox-ico-CaretUp" aria-hidden="true" /> : <i className="fox-ico fox-ico-CaretDown" aria-hidden="true" />}
         </span>
       </button>
 

ffa13e6

ac05b33

@fox/core/components/fox-alert/fox-alert.tsx

--- @fox/core/components/fox-alert/fox-alert.tsx

+++ @fox/core/components/fox-alert/fox-alert.tsx


 import type { ReactNode, Ref } from "react";
-import {
-  FoxChatDotsIcon,
-  FoxCheckCircleIcon,
-  FoxInfoIcon,
-  FoxProhibitIcon,
-  FoxWarningIcon,
-} from "../../icons";
 import { cx } from "../../utils";
 
 export type FoxAlertType =

  * 색은 스타일이 `.fox-alert__icon`에 준 하나를 쓰고, 연한 쪽만 알아서 흐려진다.
  */
 const TYPE_ICON: Record<FoxAlertType, ReactNode> = {
-  default: <FoxChatDotsIcon weight="duotone" />,
-  information: <FoxInfoIcon weight="duotone" />,
-  success: <FoxCheckCircleIcon weight="duotone" />,
-  warning: <FoxWarningIcon weight="duotone" />,
-  danger: <FoxProhibitIcon weight="duotone" />,
+  default: <i className="fox-ico fox-ico--duotone fox-ico-ChatDots" aria-hidden="true" />,
+  information: <i className="fox-ico fox-ico--duotone fox-ico-Info" aria-hidden="true" />,
+  success: <i className="fox-ico fox-ico--duotone fox-ico-CheckCircle" aria-hidden="true" />,
+  warning: <i className="fox-ico fox-ico--duotone fox-ico-Warning" aria-hidden="true" />,
+  danger: <i className="fox-ico fox-ico--duotone fox-ico-Prohibit" aria-hidden="true" />,
 };
 
 /**

ffa13e6

ac05b33

@fox/core/components/fox-breadcrumb/fox-breadcrumb.tsx

--- @fox/core/components/fox-breadcrumb/fox-breadcrumb.tsx

+++ @fox/core/components/fox-breadcrumb/fox-breadcrumb.tsx


 
 import type { ReactNode } from "react";
 import { cx } from "../../utils";
-import { FoxCaretRightIcon, FoxHouseIcon } from "../../icons";
 
 export interface FoxBreadcrumbItem {
   label: string;

       <ol className="fox-breadcrumb__list">
         {items.map((item, index) => {
           const last = index === items.length - 1;
-          const icon = item.icon ?? (index === 0 && homeIcon ? <FoxHouseIcon /> : null);
+          const icon = item.icon ?? (index === 0 && homeIcon ? <i className="fox-ico fox-ico-House" aria-hidden="true" /> : null);
           const body = (
             <>
               {icon && (

             <li className="fox-breadcrumb__crumb" key={`${item.label}-${index}`}>
               {index > 0 && (
                 <span className="fox-breadcrumb__separator" aria-hidden="true">
-                  <FoxCaretRightIcon />
+                  <i className="fox-ico fox-ico-CaretRight" aria-hidden="true" />
                 </span>
               )}
 

ffa13e6

ac05b33

@fox/core/components/fox-carousel-button/fox-carousel-button.tsx

--- @fox/core/components/fox-carousel-button/fox-carousel-button.tsx

+++ @fox/core/components/fox-carousel-button/fox-carousel-button.tsx


  * 같고 테두리와 그림자 유무만 다르다. 그 차이가 `type`이다.
  * 시안에 있는 조합은 outlined lg·md·sm과 plain md뿐이지만, 나머지도 같은 규칙으로 나온다.
  *
- * 아이콘은 호출부가 넘긴다(FoxIconButton과 같다). 시안이 쓰는 다섯 개는 `@fox/core/icons`의
- * `<FoxCaretLeftIcon weight="bold" />` · `<FoxCaretRightIcon weight="bold" />` ·
- * `<FoxPlayIcon weight="fill" />` · `<FoxPauseIcon weight="fill" />` ·
- * `<FoxPlusIcon weight="bold" />`다. **weight를 빼면 안 된다** — 기본값 regular는 시안보다
+ * 아이콘은 호출부가 넘긴다(FoxIconButton과 같다). 시안이 쓰는 다섯 개는 `fox-ico` 클래스의
+ * `<i className="fox-ico fox-ico--bold fox-ico-CaretLeft" aria-hidden="true" />` · `<i className="fox-ico fox-ico--bold fox-ico-CaretRight" aria-hidden="true" />` ·
+ * `<i className="fox-ico fox-ico--fill fox-ico-Play" aria-hidden="true" />` · `<i className="fox-ico fox-ico--fill fox-ico-Pause" aria-hidden="true" />` ·
+ * `<i className="fox-ico fox-ico--bold fox-ico-Plus" aria-hidden="true" />`다. **weight를 빼면 안 된다** — 기본값 regular는 시안보다
  * 가늘고, Play/Pause는 아예 속이 빈 도형이 된다.
  *
  * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`

ffa13e6

ac05b33

@fox/core/components/fox-certified/fox-certified.tsx

--- @fox/core/components/fox-certified/fox-certified.tsx

+++ @fox/core/components/fox-certified/fox-certified.tsx


 
 /** 시안의 ico/ClockCountdown 자리. @fox에 아이콘 세트가 없어 같은 모양을 직접 그린다. */
 function TimerIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
-      <circle cx="8" cy="8" r="6.3" />
-      <path d="M8 4.4V8l2.4 1.6" strokeLinecap="round" />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico-ClockCountdown" aria-hidden="true" />;
 }
 
 /**

ffa13e6

ac05b33

@fox/core/components/fox-chip/fox-chip.tsx

--- @fox/core/components/fox-chip/fox-chip.tsx

+++ @fox/core/components/fox-chip/fox-chip.tsx

...	...	@@ -392,24 +392,10 @@
392	392
393	393	// check 계열의 체크 표시.
394	394	function CheckMark() {
395		- return (
396		- <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
397		- <path
398		- d="M14.5306 5.03057L6.5306 13.0306C6.46092 13.1005 6.37813 13.156 6.28696 13.1938C6.1958 13.2317 6.09806 13.2512 5.99935 13.2512C5.90064 13.2512 5.8029 13.2317 5.71173 13.1938C5.62057 13.156 5.53778 13.1005 5.4681 13.0306L1.9681 9.53057C1.89833 9.4608 1.84299 9.37798 1.80524 9.28683C1.76748 9.19568 1.74805 9.09798 1.74805 8.99932C1.74805 8.90066 1.76748 8.80296 1.80524 8.71181C1.84299 8.62066 1.89833 8.53783 1.9681 8.46807C2.03786 8.3983 2.12069 8.34296 2.21184 8.30521C2.30299 8.26745 2.40069 8.24802 2.49935 8.24802C2.59801 8.24802 2.69571 8.26745 2.78686 8.30521C2.87801 8.34296 2.96083 8.3983 3.0306 8.46807L5.99997 11.4374L13.4693 3.96932C13.6102 3.82842 13.8013 3.74927 14.0006 3.74927C14.1999 3.74927 14.391 3.82842 14.5318 3.96932C14.6727 4.11021 14.7519 4.30131 14.7519 4.50057C14.7519 4.69983 14.6727 4.89092 14.5318 5.03182L14.5306 5.03057Z"
399		- fill="currentColor"
400		- />
401		- </svg>
402		- );
	395	+ return <i className="fox-ico fox-ico--bold fox-ico-Check" aria-hidden="true" />;
403	396	}
404	397
405	398	// select 계열의 아래 화살표.
406	399	function ChevronMark() {
407		- return (
408		- <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
409		- <path
410		- d="M13.5306 6.53061L8.5306 11.5306C8.46092 11.6005 8.37813 11.656 8.28696 11.6939C8.1958 11.7317 8.09806 11.7512 7.99935 11.7512C7.90064 11.7512 7.8029 11.7317 7.71173 11.6939C7.62057 11.656 7.53778 11.6005 7.4681 11.5306L2.4681 6.53061C2.3272 6.38972 2.24805 6.19862 2.24805 5.99936C2.24805 5.80011 2.3272 5.60901 2.4681 5.46811C2.60899 5.32722 2.80009 5.24806 2.99935 5.24806C3.19861 5.24806 3.3897 5.32722 3.5306 5.46811L7.99997 9.93749L12.4693 5.46749C12.6102 5.32659 12.8013 5.24744 13.0006 5.24744C13.1999 5.24744 13.391 5.32659 13.5318 5.46749C13.6727 5.60838 13.7519 5.79948 13.7519 5.99874C13.7519 6.198 13.6727 6.38909 13.5318 6.52999L13.5306 6.53061Z"
411		- fill="currentColor"
412		- />
413		- </svg>
414		- );
	400	+ return <i className="fox-ico fox-ico-CaretDown" aria-hidden="true" />;
415	401	}

ffa13e6

ac05b33

@fox/core/components/fox-contextual-trigger/fox-contextual-trigger.tsx

--- @fox/core/components/fox-contextual-trigger/fox-contextual-trigger.tsx

+++ @fox/core/components/fox-contextual-trigger/fox-contextual-trigger.tsx


 "use client";
 
 import type { ComponentPropsWithRef, ReactNode } from "react";
-import { FoxInfoIcon, FoxQuestionIcon } from "../../icons";
 import { cx } from "../../utils";
 
 /** 무엇을 여는 단추인지. 아이콘과 기본 이름이 여기서 갈린다. */

 
 /** 계열이 정하는 아이콘. 시안 `ico/Question`·`ico/Info`이고 굵기는 둘 다 regular다. */
 const TYPE_ICON: Record<FoxContextualTriggerType, ReactNode> = {
-  help: <FoxQuestionIcon />,
-  information: <FoxInfoIcon />,
+  help: <i className="fox-ico fox-ico-Question" aria-hidden="true" />,
+  information: <i className="fox-ico fox-ico-Info" aria-hidden="true" />,
 };
 
 /** 이름을 안 주면 쓰는 기본값. 무엇을 여는 단추인지까지만 말한다. */

ffa13e6

ac05b33

@fox/core/components/fox-disclosure/fox-disclosure.tsx

--- @fox/core/components/fox-disclosure/fox-disclosure.tsx

+++ @fox/core/components/fox-disclosure/fox-disclosure.tsx


 
 import { useId, useState, type ReactNode } from "react";
 import { cx } from "../../utils";
-import { FoxCaretCircleRightIcon, FoxCaretCircleUpIcon } from "../../icons";
 
 export interface FoxDisclosureProps {
   title: ReactNode;

         onClick={toggle}
       >
         <span className="fox-disclosure__icon" aria-hidden="true">
-          {expanded ? <FoxCaretCircleUpIcon /> : <FoxCaretCircleRightIcon />}
+          {expanded ? <i className="fox-ico fox-ico-CaretCircleUp" aria-hidden="true" /> : <i className="fox-ico fox-ico-CaretCircleRight" aria-hidden="true" />}
         </span>
         <span className="fox-disclosure__title">{title}</span>
       </button>

ffa13e6

ac05b33

@fox/core/components/fox-file-upload/fox-file-upload.tsx

--- @fox/core/components/fox-file-upload/fox-file-upload.tsx

+++ @fox/core/components/fox-file-upload/fox-file-upload.tsx


    전부 `currentColor`라 감싼 쪽이 색을 정한다. */
 
 function UploadIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
-      <path d="M8 10.5V2.4M4.8 5.4L8 2.2l3.2 3.2" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M2.4 10.2v2.6h11.2v-2.6" strokeLinecap="round" />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico-UploadSimple" aria-hidden="true" />;
 }
 
 function PaperclipIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
-      <path
-        d="M12.6 7.6l-4.7 4.7a3 3 0 0 1-4.2-4.2l5.4-5.4a2 2 0 0 1 2.8 2.8l-5.4 5.4a1 1 0 0 1-1.4-1.4l4.7-4.7"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico-Paperclip" aria-hidden="true" />;
 }
 
 function XCircleIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
-      <circle cx="8" cy="8" r="6.3" />
-      <path d="M6 6l4 4M10 6l-4 4" strokeLinecap="round" />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico-XCircle" aria-hidden="true" />;
 }
 
 function ProhibitIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
-      <circle cx="8" cy="8" r="6.3" />
-      <path d="M3.5 3.5l9 9" strokeLinecap="round" />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico-Prohibit" aria-hidden="true" />;
 }
 
 function CameraPlusIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
-      <path d="M1.8 5.4h2.6l1-1.6h3.2l1 1.6h4.6v7.4H1.8z" strokeLinejoin="round" />
-      <circle cx="8" cy="9.1" r="2.2" />
-      <path d="M12.6 1.6v2.6M11.3 2.9h2.6" strokeLinecap="round" />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico-CameraPlus" aria-hidden="true" />;
 }
 
 function TrashIcon() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
-      <path d="M2.6 4.2h10.8M6.4 4.2V2.8h3.2v1.4M4 4.2l.6 8.4h6.8l.6-8.4" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico-Trash" aria-hidden="true" />;
 }
 
 /* ── 값 다루기 ─────────────────────────────────────────────────────────────── */

ffa13e6

ac05b33

@fox/core/components/fox-helper-text/fox-helper-text.tsx

--- @fox/core/components/fox-helper-text/fox-helper-text.tsx

+++ @fox/core/components/fox-helper-text/fox-helper-text.tsx


 import type { ReactNode, Ref } from "react";
-import {
-  FoxChatDotsIcon,
-  FoxCheckCircleIcon,
-  FoxInfoIcon,
-  FoxProhibitIcon,
-  FoxWarningIcon,
-} from "../../icons";
 import { cx } from "../../utils";
 
 /** `FoxAlert`와 같은 다섯 계열이다 — 시안이 두 컴포넌트에 같은 축을 쓴다. */

  * 알럿은 `duotone`, 여기는 `regular`다(시안 확인).
  */
 const TYPE_ICON: Record<FoxHelperTextType, ReactNode> = {
-  default: <FoxChatDotsIcon />,
-  information: <FoxInfoIcon />,
-  success: <FoxCheckCircleIcon />,
-  warning: <FoxWarningIcon />,
-  danger: <FoxProhibitIcon />,
+  default: <i className="fox-ico fox-ico-ChatDots" aria-hidden="true" />,
+  information: <i className="fox-ico fox-ico-Info" aria-hidden="true" />,
+  success: <i className="fox-ico fox-ico-CheckCircle" aria-hidden="true" />,
+  warning: <i className="fox-ico fox-ico-Warning" aria-hidden="true" />,
+  danger: <i className="fox-ico fox-ico-Prohibit" aria-hidden="true" />,
 };
 
 /**

ffa13e6

ac05b33

@fox/core/components/fox-input/fox-input.tsx

--- @fox/core/components/fox-input/fox-input.tsx

+++ @fox/core/components/fox-input/fox-input.tsx


             aria-label={clearLabel}
             onClick={handleClear}
           >
-            {/* 시안의 XCircle. @fox에 아이콘 세트가 없어 같은 모양을 직접 그린다. */}
-            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
-              <circle cx="8" cy="8" r="6.25" />
-              <path d="M6 6l4 4M10 6l-4 4" />
-            </svg>
+            <i className="fox-ico fox-ico-XCircle" aria-hidden="true" />
           </button>
         )}
 

ffa13e6

ac05b33

@fox/core/components/fox-list-search/fox-list-search.tsx

--- @fox/core/components/fox-list-search/fox-list-search.tsx

+++ @fox/core/components/fox-list-search/fox-list-search.tsx


 import { cx } from "../../utils";
 import { FoxSelectText } from "../fox-select-text";
 import type { FoxSelectItem } from "../fox-select";
-import { FoxMagnifyingGlassIcon } from "../../icons";
 
 export interface FoxListSearchProps {
   /** 앞쪽 셀렉트에 넣을 검색 대상. 비우면 셀렉트 자체가 나오지 않는다. */

           aria-label={label}
           disabled={disabled}
         >
-          <FoxMagnifyingGlassIcon />
+          <i className="fox-ico fox-ico-MagnifyingGlass" aria-hidden="true" />
         </button>
       </div>
     </form>

ffa13e6

ac05b33

@fox/core/components/fox-modal/fox-modal.tsx

--- @fox/core/components/fox-modal/fox-modal.tsx

+++ @fox/core/components/fox-modal/fox-modal.tsx


 
 import { useEffect, useRef, type ReactNode } from "react";
 import { cx } from "../../utils";
-import { FoxXIcon } from "../../icons";
 
 export type FoxModalSize = "sm" | "md" | "lg" | "full";
 

       className={cx("fox-modal", `fox-modal--${size}`, className)}
       // Esc는 브라우저가 닫아 버리므로 막고, 닫을지는 호출부가 정하게 한다.
       onCancel={(event) => {
+        // 파일 선택 취소도 cancel을 버블링시킨다 — 대상이 dialog일 때만 닫기로 본다.
+        if (event.target !== event.currentTarget) {
+          return;
+        }
         event.preventDefault();
         onClose();
       }}

       {closable && (
         <button className="fox-modal__close" type="button" aria-label={closeLabel} onClick={onClose}>
           <span className="fox-modal__close-icon" aria-hidden="true">
-            <FoxXIcon />
+            <i className="fox-ico fox-ico-X" aria-hidden="true" />
           </span>
         </button>
       )}

ffa13e6

ac05b33

@fox/core/components/fox-pagination/fox-pagination.tsx

--- @fox/core/components/fox-pagination/fox-pagination.tsx

+++ @fox/core/components/fox-pagination/fox-pagination.tsx


 
 import type { ReactNode } from "react";
 import { cx } from "../../utils";
-import { FoxCaretLeftIcon, FoxCaretRightIcon } from "../../icons";
 
 export interface FoxPaginationProps {
   /** 1부터 센다. */

   const step = (target: number, disabled: boolean, direction: "prev" | "next", text: string) => {
     const icon = (
       <span className="fox-pagination__step-icon" aria-hidden="true">
-        {direction === "prev" ? <FoxCaretLeftIcon /> : <FoxCaretRightIcon />}
+        {direction === "prev" ? <i className="fox-ico fox-ico-CaretLeft" aria-hidden="true" /> : <i className="fox-ico fox-ico-CaretRight" aria-hidden="true" />}
       </span>
     );
     const body: ReactNode =

ffa13e6

ac05b33

@fox/core/components/fox-popover/fox-popover.tsx

--- @fox/core/components/fox-popover/fox-popover.tsx

+++ @fox/core/components/fox-popover/fox-popover.tsx


 "use client";
 
 import type { ReactNode, Ref } from "react";
-import { FoxCaretRightIcon, FoxXIcon } from "../../icons";
 import { cx } from "../../utils";
 import { FoxTextButton } from "../fox-text-button";
 

             type="secondary"
             size="sm"
             label={actionLabel}
-            trailingIcon={<FoxCaretRightIcon />}
+            trailingIcon={<i className="fox-ico fox-ico-CaretRight" aria-hidden="true" />}
             onAction={onAction}
             className="fox-popover__action"
           />

           aria-label={closeLabel}
           onClick={onClose}
         >
-          <FoxXIcon />
+          <i className="fox-ico fox-ico-X" aria-hidden="true" />
         </button>
       </div>
 

ffa13e6

ac05b33

@fox/core/components/fox-select-option-item/fox-select-option-item.tsx

--- @fox/core/components/fox-select-option-item/fox-select-option-item.tsx

+++ @fox/core/components/fox-select-option-item/fox-select-option-item.tsx

...	...	@@ -85,12 +85,5 @@
85	85	// `fill`을 `currentColor`로 두면 선택된 항목의 글자색을 물려받는데, 그 값
86	86	// (`font-theme-secondary`)이 시안의 `#1C589C`와 같아 색 규칙을 따로 둘 필요가 없다.
87	87	function CheckIcon() {
88		- return (
89		- <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
90		- <path
91		- d="M14.5306 5.03063L6.5306 13.0306C6.46092 13.1006 6.37813 13.156 6.28696 13.1939C6.1958 13.2317 6.09806 13.2512 5.99935 13.2512C5.90064 13.2512 5.8029 13.2317 5.71173 13.1939C5.62057 13.156 5.53778 13.1006 5.4681 13.0306L1.9681 9.53063C1.89833 9.46087 1.84299 9.37804 1.80524 9.28689C1.76748 9.19574 1.74805 9.09804 1.74805 8.99938C1.74805 8.90072 1.76748 8.80302 1.80524 8.71187C1.84299 8.62072 1.89833 8.53789 1.9681 8.46813C2.03786 8.39837 2.12069 8.34302 2.21184 8.30527C2.30299 8.26751 2.40069 8.24808 2.49935 8.24808C2.59801 8.24808 2.69571 8.26751 2.78686 8.30527C2.87801 8.34302 2.96083 8.39837 3.0306 8.46813L5.99997 11.4375L13.4693 3.96938C13.6102 3.82848 13.8013 3.74933 14.0006 3.74933C14.1999 3.74933 14.391 3.82848 14.5318 3.96938C14.6727 4.11028 14.7519 4.30137 14.7519 4.50063C14.7519 4.69989 14.6727 4.89098 14.5318 5.03188L14.5306 5.03063Z"
92		- fill="currentColor"
93		- />
94		- </svg>
95		- );
	88	+ return <i className="fox-ico fox-ico--bold fox-ico-Check" aria-hidden="true" />;
96	89	}

ffa13e6

ac05b33

@fox/core/components/fox-select-text/fox-select-text.tsx

--- @fox/core/components/fox-select-text/fox-select-text.tsx

+++ @fox/core/components/fox-select-text/fox-select-text.tsx

...	...	@@ -259,12 +259,5 @@
259	259	// `fill`은 시안의 리터럴 대신 `currentColor`로 두어 색을 크기 규칙이 정하게 한다.
260	260	// `width`·`height`를 쓰지 않는다 — 크기는 슬롯이 정하고 SVG는 100%로 따라온다.
261	261	function ChevronMark() {
262		- return (
263		- <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
264		- <path
265		- d="M13.5306 6.53061L8.5306 11.5306C8.46092 11.6005 8.37813 11.656 8.28696 11.6939C8.1958 11.7317 8.09806 11.7512 7.99935 11.7512C7.90064 11.7512 7.8029 11.7317 7.71173 11.6939C7.62057 11.656 7.53778 11.6005 7.4681 11.5306L2.4681 6.53061C2.3272 6.38972 2.24805 6.19862 2.24805 5.99936C2.24805 5.80011 2.3272 5.60901 2.4681 5.46811C2.60899 5.32722 2.80009 5.24806 2.99935 5.24806C3.19861 5.24806 3.3897 5.32722 3.5306 5.46811L7.99997 9.93749L12.4693 5.46749C12.6102 5.32659 12.8013 5.24744 13.0006 5.24744C13.1999 5.24744 13.391 5.32659 13.5318 5.46749C13.6727 5.60838 13.7519 5.79948 13.7519 5.99874C13.7519 6.198 13.6727 6.38909 13.5318 6.52999L13.5306 6.53061Z"
266		- fill="currentColor"
267		- />
268		- </svg>
269		- );
	262	+ return <i className="fox-ico fox-ico--bold fox-ico-CaretDown" aria-hidden="true" />;
270	263	}

ffa13e6

ac05b33

@fox/core/components/fox-select/fox-select.tsx

--- @fox/core/components/fox-select/fox-select.tsx

+++ @fox/core/components/fox-select/fox-select.tsx

...	...	@@ -79,6 +79,11 @@
79	79	readOnly?: boolean;
80	80	/** 필드 위 라벨. 넘기지 않으면 라벨을 렌더링하지 않는다. */
81	81	label?: ReactNode;
	82	+ /**
	83	+ * 라벨을 두지 않는 자리(시안의 필터 셀렉트 등)에서 트리거를 읽어 줄 이름.
	84	+ * `label`이 있으면 그쪽이 이름이라 무시된다(`FoxSelectText`와 같은 규칙).
	85	+ */
	86	+ ariaLabel?: string;
82	87	/** 라벨 뒤 필수·선택 표시. `label`이 없으면 의미 없다. */
83	88	requirement?: FoxFormLabelRequirement;
84	89	/** select 아래 힌트 메시지. 넘기지 않으면 힌트 영역을 렌더링하지 않는다. */
...	...	@@ -127,6 +132,7 @@
127	132	disabled = false,
128	133	readOnly = false,
129	134	label,
	135	+ ariaLabel,
130	136	requirement,
131	137	hint,
132	138	hintIcon,
...	...	@@ -312,6 +318,7 @@
312	318	id={triggerId}
313	319	role="combobox"
314	320	disabled={isDisabled}
	321	+ aria-label={label ? undefined : ariaLabel}
315	322	aria-haspopup="listbox"
316	323	aria-expanded={open}
317	324	// 리스트박스는 열렸을 때만 렌더되므로, 닫힌 동안 없는 id를 가리키지 않게 한다.
...	...	@@ -373,12 +380,5 @@
373	380	// 여백이 SVG에 내장돼 있어 슬롯이 커지고 작아질 때 여백도 같이 비례한다(CSS 패딩 불필요).
374	381	// `fill`은 시안의 리터럴 대신 `currentColor`로 두어 색을 토큰이 정한다.
375	382	function ChevronIcon({ className }: { className?: string }) {
376		- return (
377		- <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
378		- <path
379		- d="M20.296 9.79595L12.796 17.2959C12.6914 17.4008 12.5672 17.484 12.4305 17.5408C12.2938 17.5976 12.1471 17.6268 11.9991 17.6268C11.851 17.6268 11.7044 17.5976 11.5677 17.5408C11.4309 17.484 11.3067 17.4008 11.2022 17.2959L3.70221 9.79595C3.49086 9.5846 3.37213 9.29796 3.37213 8.99907C3.37213 8.70019 3.49086 8.41354 3.70221 8.2022C3.91355 7.99085 4.2002 7.87212 4.49908 7.87212C4.79797 7.87212 5.08461 7.99085 5.29596 8.2022L12 14.9063L18.7041 8.20126C18.9154 7.98992 19.2021 7.87119 19.501 7.87119C19.7998 7.87119 20.0865 7.98992 20.2978 8.20126C20.5092 8.41261 20.6279 8.69925 20.6279 8.99814C20.6279 9.29702 20.5092 9.58367 20.2978 9.79501L20.296 9.79595Z"
380		- fill="currentColor"
381		- />
382		- </svg>
383		- );
	383	+ return <i className={`fox-ico fox-ico-CaretDown ${className ?? ""}`.trim()} aria-hidden="true" />;
384	384	}

ffa13e6

ac05b33

@fox/core/components/fox-snackbar/fox-snackbar.tsx

--- @fox/core/components/fox-snackbar/fox-snackbar.tsx

+++ @fox/core/components/fox-snackbar/fox-snackbar.tsx


 "use client";
 
 import type { ReactNode, Ref } from "react";
-import { FoxXIcon } from "../../icons";
 import { cx } from "../../utils";
 import { FoxTextButton } from "../fox-text-button";
 

    * 글자 앞에 붙는 아이콘. 넘기지 않으면 자리를 만들지 않는다.
    *
    * 계열이 없는 조각이라 무엇을 그릴지는 호출부가 정한다(`FoxAlert`처럼 계열이 아이콘을
-   * 고르지 않는다). `@fox/core/icons`에서 가져다 넘긴다 — 시안은 `fill` 굵기다:
-   * `<FoxCheckCircleIcon weight="fill" />`.
+   * 고르지 않는다). `fox-ico` 클래스로 넘긴다 — 시안은 `fill` 굵기다:
+   * `<i className="fox-ico fox-ico--fill fox-ico-CheckCircle" aria-hidden="true" />`.
    *
    * 색은 스타일이 정한다(`icon-theme-primary`) — 글리프가 `fill: currentColor`라 넘기는
    * 쪽에서 색을 줄 필요가 없다.

         aria-label={closeLabel}
         onClick={onClose}
       >
-        <FoxXIcon />
+        <i className="fox-ico fox-ico-X" aria-hidden="true" />
       </button>
     </div>
   );

ffa13e6

ac05b33

@fox/core/components/fox-step-indicator-item/fox-step-indicator-item.tsx

--- @fox/core/components/fox-step-indicator-item/fox-step-indicator-item.tsx

+++ @fox/core/components/fox-step-indicator-item/fox-step-indicator-item.tsx

...	...	@@ -90,7 +90,7 @@
90	90	);
91	91	}
92	92
93		-// 지난 단계의 체크 표시. `@fox/core/icons`(Phosphor)를 쓰지 않는다 — 시안이 준 것은 선으로
	93	+// 지난 단계의 체크 표시. `fox-ico`(Phosphor)를 쓰지 않는다 — 시안이 준 것은 선으로
94	94	// 그린 10×8 글리프이고, Phosphor의 Check는 면으로 채운 다른 그림이라 크기·굵기가 맞지 않는다.
95	95	// `stroke`를 시안의 리터럴(흰색) 대신 `currentColor`로 두면 색을 상태 규칙이 정한다.
96	96	function CheckMark() {

ffa13e6

ac05b33

@fox/core/components/fox-tag/fox-tag.tsx

--- @fox/core/components/fox-tag/fox-tag.tsx

+++ @fox/core/components/fox-tag/fox-tag.tsx

...	...	@@ -108,24 +108,10 @@
108	108
109	109	// sorting의 닫기 표시. 원 안에 X다.
110	110	function CloseMark() {
111		- return (
112		- <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
113		- <path
114		- d="M8 1.5C6.71442 1.5 5.45772 1.88122 4.3888 2.59545C3.31988 3.30968 2.48676 4.32484 1.99479 5.51256C1.50282 6.70028 1.37409 8.00721 1.6249 9.26809C1.8757 10.529 2.49477 11.6872 3.40381 12.5962C4.31285 13.5052 5.47104 14.1243 6.73192 14.3751C7.99279 14.6259 9.29973 14.4972 10.4874 14.0052C11.6752 13.5132 12.6903 12.6801 13.4046 11.6112C14.1188 10.5423 14.5 9.28558 14.5 8C14.4982 6.27665 13.8128 4.62441 12.5942 3.40582C11.3756 2.18722 9.72335 1.50182 8 1.5ZM10.3538 9.64625C10.4002 9.69271 10.4371 9.74786 10.4622 9.80855C10.4873 9.86925 10.5003 9.9343 10.5003 10C10.5003 10.0657 10.4873 10.1308 10.4622 10.1914C10.4371 10.2521 10.4002 10.3073 10.3538 10.3538C10.3073 10.4002 10.2521 10.4371 10.1915 10.4622C10.1308 10.4873 10.0657 10.5003 10 10.5003C9.93431 10.5003 9.86925 10.4873 9.80855 10.4622C9.74786 10.4371 9.69271 10.4002 9.64625 10.3538L8 8.70687L6.35375 10.3538C6.3073 10.4002 6.25215 10.4371 6.19145 10.4622C6.13075 10.4873 6.0657 10.5003 6 10.5003C5.93431 10.5003 5.86925 10.4873 5.80855 10.4622C5.74786 10.4371 5.69271 10.4002 5.64625 10.3538C5.5998 10.3073 5.56295 10.2521 5.53781 10.1914C5.51266 10.1308 5.49972 10.0657 5.49972 10C5.49972 9.9343 5.51266 9.86925 5.53781 9.80855C5.56295 9.74786 5.5998 9.69271 5.64625 9.64625L7.29313 8L5.64625 6.35375C5.55243 6.25993 5.49972 6.13268 5.49972 6C5.49972 5.86732 5.55243 5.74007 5.64625 5.64625C5.74007 5.55243 5.86732 5.49972 6 5.49972C6.13268 5.49972 6.25993 5.55243 6.35375 5.64625L8 7.29313L9.64625 5.64625C9.69271 5.59979 9.74786 5.56294 9.80855 5.5378C9.86925 5.51266 9.93431 5.49972 10 5.49972C10.0657 5.49972 10.1308 5.51266 10.1915 5.5378C10.2521 5.56294 10.3073 5.59979 10.3538 5.64625C10.4002 5.6927 10.4371 5.74786 10.4622 5.80855C10.4873 5.86925 10.5003 5.9343 10.5003 6C10.5003 6.0657 10.4873 6.13075 10.4622 6.19145C10.4371 6.25214 10.4002 6.3073 10.3538 6.35375L8.70688 8L10.3538 9.64625Z"
115		- fill="currentColor"
116		- />
117		- </svg>
118		- );
	111	+ return <i className="fox-ico fox-ico-XCircle" aria-hidden="true" />;
119	112	}
120	113
121	114	// button 계열의 택(가격표) 표시.
122	115	function TagMark() {
123		- return (
124		- <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
125		- <path
126		- d="M15.2069 8.50001L9.00001 2.29313C8.90748 2.19987 8.79735 2.12593 8.67599 2.0756C8.55464 2.02528 8.4245 1.99959 8.29313 2.00001H2.50001C2.3674 2.00001 2.24022 2.05268 2.14645 2.14645C2.05268 2.24022 2.00001 2.3674 2.00001 2.50001V8.29313C1.99959 8.4245 2.02528 8.55464 2.0756 8.67599C2.12593 8.79735 2.19987 8.90748 2.29313 9.00001L8.50001 15.2069C8.59287 15.2998 8.70312 15.3734 8.82446 15.4237C8.9458 15.474 9.07585 15.4999 9.20719 15.4999C9.33853 15.4999 9.46859 15.474 9.58993 15.4237C9.71127 15.3734 9.82152 15.2998 9.91438 15.2069L15.2069 9.91438C15.2998 9.82152 15.3734 9.71127 15.4237 9.58993C15.474 9.46859 15.4999 9.33853 15.4999 9.20719C15.4999 9.07585 15.474 8.9458 15.4237 8.82446C15.3734 8.70312 15.2998 8.59287 15.2069 8.50001ZM5.25001 6.00001C5.10167 6.00001 4.95666 5.95602 4.83333 5.87361C4.70999 5.7912 4.61386 5.67406 4.5571 5.53702C4.50033 5.39997 4.48548 5.24917 4.51442 5.10369C4.54335 4.9582 4.61479 4.82456 4.71967 4.71967C4.82456 4.61479 4.9582 4.54335 5.10369 4.51442C5.24917 4.48548 5.39997 4.50033 5.53702 4.5571C5.67406 4.61386 5.7912 4.70999 5.87361 4.83333C5.95602 4.95666 6.00001 5.10167 6.00001 5.25001C6.00001 5.44892 5.92099 5.63968 5.78034 5.78034C5.63968 5.92099 5.44892 6.00001 5.25001 6.00001Z"
127		- fill="currentColor"
128		- />
129		- </svg>
130		- );
	116	+ return <i className="fox-ico fox-ico--fill fox-ico-Tag" aria-hidden="true" />;
131	117	}

ffa13e6

ac05b33

@fox/core/components/fox-toggle-quantity/fox-toggle-quantity.tsx

--- @fox/core/components/fox-toggle-quantity/fox-toggle-quantity.tsx

+++ @fox/core/components/fox-toggle-quantity/fox-toggle-quantity.tsx

...	...	@@ -149,23 +149,9 @@
149	149	// `width`·`height`를 쓰지 않는다 — 크기는 슬롯이 정하고 SVG는 100%로 따라온다.
150	150
151	151	function MinusMark() {
152		- return (
153		- <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
154		- <path
155		- d="M17.5 10C17.5 10.1658 17.4342 10.3247 17.3169 10.4419C17.1997 10.5592 17.0408 10.625 16.875 10.625H3.125C2.95924 10.625 2.80027 10.5592 2.68306 10.4419C2.56585 10.3247 2.5 10.1658 2.5 10C2.5 9.83424 2.56585 9.67527 2.68306 9.55806C2.80027 9.44085 2.95924 9.375 3.125 9.375H16.875C17.0408 9.375 17.1997 9.44085 17.3169 9.55806C17.4342 9.67527 17.5 9.83424 17.5 10Z"
156		- fill="currentColor"
157		- />
158		- </svg>
159		- );
	152	+ return <i className="fox-ico fox-ico-Minus" aria-hidden="true" />;
160	153	}
161	154
162	155	function PlusMark() {
163		- return (
164		- <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
165		- <path
166		- d="M17.5 10C17.5 10.1658 17.4342 10.3247 17.3169 10.4419C17.1997 10.5592 17.0408 10.625 16.875 10.625H10.625V16.875C10.625 17.0408 10.5592 17.1997 10.4419 17.3169C10.3247 17.4342 10.1658 17.5 10 17.5C9.83424 17.5 9.67527 17.4342 9.55806 17.3169C9.44085 17.1997 9.375 17.0408 9.375 16.875V10.625H3.125C2.95924 10.625 2.80027 10.5592 2.68306 10.4419C2.56585 10.3247 2.5 10.1658 2.5 10C2.5 9.83424 2.56585 9.67527 2.68306 9.55806C2.80027 9.44085 2.95924 9.375 3.125 9.375H9.375V3.125C9.375 2.95924 9.44085 2.80027 9.55806 2.68306C9.67527 2.56585 9.83424 2.5 10 2.5C10.1658 2.5 10.3247 2.56585 10.4419 2.68306C10.5592 2.80027 10.625 2.95924 10.625 3.125V9.375H16.875C17.0408 9.375 17.1997 9.44085 17.3169 9.55806C17.4342 9.67527 17.5 9.83424 17.5 10Z"
167		- fill="currentColor"
168		- />
169		- </svg>
170		- );
	156	+ return <i className="fox-ico fox-ico-Plus" aria-hidden="true" />;
171	157	}

ffa13e6

ac05b33

@fox/core/components/fox-toggle-switch/fox-toggle-switch.tsx

--- @fox/core/components/fox-toggle-switch/fox-toggle-switch.tsx

+++ @fox/core/components/fox-toggle-switch/fox-toggle-switch.tsx

...	...	@@ -101,33 +101,19 @@
101	101	// 꺼짐 표시.
102	102	function XMark() {
103	103	return (
104		- <svg
105		- className="fox-toggle-switch__mark-off"
106		- viewBox="0 0 16 16"
107		- fill="none"
	104	+ <i
	105	+ className="fox-toggle-switch__mark-off fox-ico fox-ico--bold fox-ico-X"
108	106	aria-hidden="true"
109		- >
110		- <path
111		- d="M13.0306 11.9694C13.1715 12.1103 13.2507 12.3014 13.2507 12.5006C13.2507 12.6999 13.1715 12.891 13.0306 13.0319C12.8897 13.1728 12.6986 13.2519 12.4994 13.2519C12.3001 13.2519 12.109 13.1728 11.9681 13.0319L8 9.06249L4.03063 13.0306C3.88973 13.1715 3.69864 13.2507 3.49938 13.2507C3.30012 13.2507 3.10902 13.1715 2.96813 13.0306C2.82723 12.8897 2.74808 12.6986 2.74808 12.4994C2.74808 12.3001 2.82723 12.109 2.96813 11.9681L6.9375 7.99999L2.96938 4.03061C2.82848 3.88972 2.74933 3.69862 2.74933 3.49936C2.74933 3.30011 2.82848 3.10901 2.96938 2.96811C3.11027 2.82722 3.30137 2.74806 3.50063 2.74806C3.69989 2.74806 3.89098 2.82722 4.03188 2.96811L8 6.93749L11.9694 2.96749C12.1103 2.82659 12.3014 2.74744 12.5006 2.74744C12.6999 2.74744 12.891 2.82659 13.0319 2.96749C13.1728 3.10838 13.2519 3.29948 13.2519 3.49874C13.2519 3.69799 13.1728 3.88909 13.0319 4.02999L9.0625 7.99999L13.0306 11.9694Z"
112		- fill="currentColor"
113		- />
114		- </svg>
	107	+ />
115	108	);
116	109	}
117	110
118	111	// 켜짐 표시.
119	112	function CheckMark() {
120	113	return (
121		- <svg
122		- className="fox-toggle-switch__mark-on"
123		- viewBox="0 0 16 16"
124		- fill="none"
	114	+ <i
	115	+ className="fox-toggle-switch__mark-on fox-ico fox-ico--bold fox-ico-Check"
125	116	aria-hidden="true"
126		- >
127		- <path
128		- d="M14.5306 5.03057L6.53063 13.0306C6.46095 13.1005 6.37816 13.156 6.28699 13.1938C6.19583 13.2317 6.09809 13.2512 5.99938 13.2512C5.90067 13.2512 5.80293 13.2317 5.71176 13.1938C5.6206 13.156 5.53781 13.1005 5.46813 13.0306L1.96813 9.53057C1.89836 9.4608 1.84302 9.37798 1.80527 9.28683C1.76751 9.19568 1.74808 9.09798 1.74808 8.99932C1.74808 8.90066 1.76751 8.80296 1.80527 8.71181C1.84302 8.62066 1.89836 8.53783 1.96813 8.46807C2.03789 8.3983 2.12072 8.34296 2.21187 8.30521C2.30302 8.26745 2.40072 8.24802 2.49938 8.24802C2.59804 8.24802 2.69574 8.26745 2.78689 8.30521C2.87804 8.34296 2.96086 8.3983 3.03063 8.46807L6 11.4374L13.4694 3.96932C13.6103 3.82842 13.8014 3.74927 14.0006 3.74927C14.1999 3.74927 14.391 3.82842 14.5319 3.96932C14.6728 4.11021 14.7519 4.30131 14.7519 4.50057C14.7519 4.69983 14.6728 4.89092 14.5319 5.03182L14.5306 5.03057Z"
129		- fill="currentColor"
130		- />
131		- </svg>
	117	+ />
132	118	);
133	119	}

ffa13e6

@fox/core/icons/fox-icon.tsx (deleted)

--- @fox/core/icons/fox-icon.tsx

...	...	@@ -1,38 +0,0 @@
	1	-// 이 파일은 `python3 @fox/tools/build-icons.py`가 만든다. 손으로 고치지 않는다.
	2	-//
	3	-// 모든 아이콘이 공유하는 껍데기. 아이콘은 크기도 색도 갖지 않는다 — 감싼 쪽이
	4	-// `inline-size`/`block-size`로 정하고 `viewBox`가 따라 늘어나며, 색은 `fill: currentColor`라
	5	-// 감싼 쪽의 `color`를 쓴다. 장식 요소라 `aria-hidden`이며, 접근성 이름은 소비처가 책임진다.
	6	-
	7	-/** 시안의 `Weight=` 변형. */
	8	-export type FoxIconWeight =
	9	- \| "thin"
	10	- \| "light"
	11	- \| "regular"
	12	- \| "bold"
	13	- \| "fill"
	14	- \| "duotone";
	15	-
	16	-/** `[d, opacity?]` — duotone의 배경 path만 opacity를 갖는다. */
	17	-export type FoxGlyphPath = readonly [d: string, opacity?: number];
	18	-
	19	-export type FoxGlyph = Readonly<Record<FoxIconWeight, readonly FoxGlyphPath[]>>;
	20	-
	21	-export interface FoxIconProps {
	22	- /** 기본 `regular`. 시안이 굵기를 지정한 자리에서만 바꾼다. */
	23	- weight?: FoxIconWeight;
	24	-}
	25	-
	26	-interface FoxIconInternalProps extends FoxIconProps {
	27	- glyph: FoxGlyph;
	28	-}
	29	-
	30	-export function FoxIcon({ weight = "regular", glyph }: FoxIconInternalProps) {
	31	- return (
	32	- <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
	33	- {glyph[weight].map(([d, opacity], index) => (
	34	- <path key={index} d={d} opacity={opacity} />
	35	- ))}
	36	- </svg>
	37	- );
	38	-}

ac05b33

@fox/core/icons/glyph-paths.json (added)

+++ @fox/core/icons/glyph-paths.json

This file is too big to display.

ffa13e6

@fox/core/icons/glyphs/acorn.tsx (deleted)

--- @fox/core/icons/glyphs/acorn.tsx