Commit @708c9251914dd21d19c0e87c901d95270d6b7374

466f12e

708c925

@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" />;
 }
 
 /**

466f12e

708c925

@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	}

466f12e

708c925

@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" />;
 }
 
 /* ── 값 다루기 ─────────────────────────────────────────────────────────────── */

466f12e

708c925

@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>
         )}
 

466f12e

708c925

@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	}

466f12e

708c925

@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	}

466f12e

708c925

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

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

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

...	...	@@ -380,12 +380,5 @@
380	380	// 여백이 SVG에 내장돼 있어 슬롯이 커지고 작아질 때 여백도 같이 비례한다(CSS 패딩 불필요).
381	381	// `fill`은 시안의 리터럴 대신 `currentColor`로 두어 색을 토큰이 정한다.
382	382	function ChevronIcon({ className }: { className?: string }) {
383		- return (
384		- <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
385		- <path
386		- 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"
387		- fill="currentColor"
388		- />
389		- </svg>
390		- );
	383	+ return <i className={`fox-ico fox-ico-CaretDown ${className ?? ""}`.trim()} aria-hidden="true" />;
391	384	}

466f12e

708c925

@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	}

466f12e

708c925

@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	}

466f12e

708c925

@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	}

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

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

...	...	@@ -88,60 +88,27 @@
88	88	전부 `currentColor`라 감싼 쪽이 색을 정한다. */
89	89
90	90	function UploadIcon() {
91		- return (
92		- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
93		- <path d="M8 10.5V2.4M4.8 5.4L8 2.2l3.2 3.2" strokeLinecap="round" strokeLinejoin="round" />
94		- <path d="M2.4 10.2v2.6h11.2v-2.6" strokeLinecap="round" />
95		- </svg>
96		- );
	91	+ return <i className="fox-ico fox-ico-UploadSimple" aria-hidden="true" />;
97	92	}
98	93
99	94	function PaperclipIcon() {
100		- return (
101		- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
102		- <path
103		- 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"
104		- strokeLinecap="round"
105		- strokeLinejoin="round"
106		- />
107		- </svg>
108		- );
	95	+ return <i className="fox-ico fox-ico-Paperclip" aria-hidden="true" />;
109	96	}
110	97
111	98	function XCircleIcon() {
112		- return (
113		- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
114		- <circle cx="8" cy="8" r="6.3" />
115		- <path d="M6 6l4 4M10 6l-4 4" strokeLinecap="round" />
116		- </svg>
117		- );
	99	+ return <i className="fox-ico fox-ico-XCircle" aria-hidden="true" />;
118	100	}
119	101
120	102	function ProhibitIcon() {
121		- return (
122		- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
123		- <circle cx="8" cy="8" r="6.3" />
124		- <path d="M3.5 3.5l9 9" strokeLinecap="round" />
125		- </svg>
126		- );
	103	+ return <i className="fox-ico fox-ico-Prohibit" aria-hidden="true" />;
127	104	}
128	105
129	106	function CameraPlusIcon() {
130		- return (
131		- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
132		- <path d="M1.8 5.4h2.6l1-1.6h3.2l1 1.6h4.6v7.4H1.8z" strokeLinejoin="round" />
133		- <circle cx="8" cy="9.1" r="2.2" />
134		- <path d="M12.6 1.6v2.6M11.3 2.9h2.6" strokeLinecap="round" />
135		- </svg>
136		- );
	107	+ return <i className="fox-ico fox-ico-CameraPlus" aria-hidden="true" />;
137	108	}
138	109
139	110	function TrashIcon() {
140		- return (
141		- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
142		- <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" />
143		- </svg>
144		- );
	111	+ return <i className="fox-ico fox-ico-Trash" aria-hidden="true" />;
145	112	}
146	113
147	114	/* ── 값 다루기 ─────────────────────────────────────────────────────────────── */

Delete comment