npm - @reitwagen/design-components - Versions diffs - 0.2.1 → 0.3.0 - Mend

@reitwagen/design-components 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (292) hide show

package/dist/components/Icons/IconSettingDefault.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconSettingDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M12.797 1.528a2.662 2.662 0 0 1 2.662 2.71c.002.143.032.284.088.414l.064.127.002.003a1.157 1.157 0 0 0 1.581.41l.37.628-.362-.632a2.664 2.664 0 0 1 3.632.98l.622 1.08q.03.054.05.11a2.66 2.66 0 0 1-1.017 3.522l-.379-.648.373.652c-.173.1-.318.243-.418.416l-.002.005a1.155 1.155 0 0 0 .421 1.581 2.655 2.655 0 0 1 .97 3.637l-.005.008-.654 1.089a2.664 2.664 0 0 1-3.63.97l-.131-.065a1.2 1.2 0 0 0-.419-.092 1.156 1.156 0 0 0-1.155 1.16l-.75.002v.001l.75.003a2.663 2.663 0 0 1-2.663 2.65h-1.254a2.663 2.663 0 0 1-2.663-2.655 1.1 1.1 0 0 0-.152-.54l-.006-.01a1.146 1.146 0 0 0-1.57-.42l-.378-.648.366.655a2.664 2.664 0 0 1-3.624-1.021l-.63-1.089.648-.376-.65.375a2.655 2.655 0 0 1 .97-3.624 1.164 1.164 0 0 0 0-2.014l.375-.65-.377.649a2.664 2.664 0 0 1-.968-3.632l.01-.015.667-1.099a2.663 2.663 0 0 1 3.622-.965l-.373.649.383-.644c.163.097.348.148.537.15a1.163 1.163 0 0 0 1.152-1.027l.007-.118a2.654 2.654 0 0 1 2.654-2.652zm-.622 7.225a3.136 3.136 0 1 0 0 6.272 3.136 3.136 0 0 0 0-6.272" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconSettingDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12.797 1.528a2.662 2.662 0 0 1 2.662 2.71c.002.143.032.284.088.414l.064.127.002.003a1.157 1.157 0 0 0 1.581.41l.37.628-.362-.632a2.664 2.664 0 0 1 3.632.98l.622 1.08q.03.054.05.11a2.66 2.66 0 0 1-1.017 3.522l-.379-.648.373.652c-.173.1-.318.243-.418.416l-.002.005a1.155 1.155 0 0 0 .421 1.581 2.655 2.655 0 0 1 .97 3.637l-.005.008-.654 1.089a2.664 2.664 0 0 1-3.63.97l-.131-.065a1.2 1.2 0 0 0-.419-.092 1.156 1.156 0 0 0-1.155 1.16l-.75.002v.001l.75.003a2.663 2.663 0 0 1-2.663 2.65h-1.254a2.663 2.663 0 0 1-2.663-2.655 1.1 1.1 0 0 0-.152-.54l-.006-.01a1.146 1.146 0 0 0-1.57-.42l-.378-.648.366.655a2.664 2.664 0 0 1-3.624-1.021l-.63-1.089.648-.376-.65.375a2.655 2.655 0 0 1 .97-3.624 1.164 1.164 0 0 0 0-2.014l.375-.65-.377.649a2.664 2.664 0 0 1-.968-3.632l.01-.015.667-1.099a2.663 2.663 0 0 1 3.622-.965l-.373.649.383-.644c.163.097.348.148.537.15a1.163 1.163 0 0 0 1.152-1.027l.007-.118a2.654 2.654 0 0 1 2.654-2.652zm-.622 7.225a3.136 3.136 0 1 0 0 6.272 3.136 3.136 0 0 0 0-6.272" }) }));
 }
 exports.default = IconSettingDefault;

package/dist/components/Icons/IconShareDefault.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconShareDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconShareDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconShareDefault;
 //# sourceMappingURL=IconShareDefault.d.ts.map

package/dist/components/Icons/IconShareDefault.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconShareDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconShareDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,gBAAgB,CAAC,EACxB,~~IAAgB~~,~~EAChB~~,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,~~2CAmBP~~;AAED,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"IconShareDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconShareDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAoBP;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/Icons/IconShareDefault.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconShareDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m8.59 13.51 6.83 3.98m-.01-10.98-6.82 3.98M21 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M9 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0m12 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconShareDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m8.59 13.51 6.83 3.98m-.01-10.98-6.82 3.98M21 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M9 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0m12 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0" }) }));
 }
 exports.default = IconShareDefault;

package/dist/components/Icons/IconShopDefault.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconShopDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconShopDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconShopDefault;
 //# sourceMappingURL=IconShopDefault.d.ts.map

package/dist/components/Icons/IconShopDefault.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconShopDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconShopDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,~~IAAgB~~,~~EAChB~~,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,~~2CAoBP~~;AAED,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"IconShopDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconShopDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAqBP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconShopDefault.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconShopDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M16.262 2h3a3 3 0 0 1 3 3v2a3 3 0 1 1-6 0zM1.76 5a3 3 0 0 1 3-3h3v5a3 3 0 0 1-6 0zM9 2h6v5a3 3 0 1 1-6 0z" }), (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M15.63 9.11a4.197 4.197 0 0 0 6.64.819v8.382c0 2.32-1.897 4.189-4.222 4.189h-.942C15.943 22.473 15 21.557 15 20.393V18a3 3 0 0 0-6 0v2.417c0 1.15-.933 2.083-2.083 2.083h-.924c-2.325 0-4.222-1.869-4.222-4.189v-8.36a4.196 4.196 0 0 0 6.608-.822 4.198 4.198 0 0 0 7.252-.02" })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconShopDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M16.262 2h3a3 3 0 0 1 3 3v2a3 3 0 1 1-6 0zM1.76 5a3 3 0 0 1 3-3h3v5a3 3 0 0 1-6 0zM9 2h6v5a3 3 0 1 1-6 0z" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M15.63 9.11a4.197 4.197 0 0 0 6.64.819v8.382c0 2.32-1.897 4.189-4.222 4.189h-.942C15.943 22.473 15 21.557 15 20.393V18a3 3 0 0 0-6 0v2.417c0 1.15-.933 2.083-2.083 2.083h-.924c-2.325 0-4.222-1.869-4.222-4.189v-8.36a4.196 4.196 0 0 0 6.608-.822 4.198 4.198 0 0 0 7.252-.02" })] }));
 }
 exports.default = IconShopDefault;

package/dist/components/Icons/IconSmileDefault.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconSmileDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconSmileDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconSmileDefault;
 //# sourceMappingURL=IconSmileDefault.d.ts.map

package/dist/components/Icons/IconSmileDefault.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconSmileDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconSmileDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,gBAAgB,CAAC,EACxB,~~IAAgB~~,~~EAChB~~,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,~~2CAiCP~~;AAED,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"IconSmileDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconSmileDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAkCP;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/Icons/IconSmileDefault.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconSmileDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#prefix__a)", children: [(0, jsx_runtime_1.jsx)("path", { fill: "#FFDB70", d: "M20 11.8a8.2 8.2 0 1 1-16.4 0 8.2 8.2 0 0 1 16.4 0" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FF763F", d: "M15.604 12.155c.599-.162 1.195.286 1.091.897-.063.372-.152.728-.265.975a4.5 4.5 0 0 1-1.087 1.463 5.1 5.1 0 0 1-1.625.978 5.5 5.5 0 0 1-1.918.343 5.5 5.5 0 0 1-1.918-.343 5.1 5.1 0 0 1-1.625-.978 4.5 4.5 0 0 1-1.087-1.463c-.113-.247-.202-.603-.265-.975-.104-.611.492-1.059 1.09-.897 1.067.289 2.63.647 3.805.647s2.738-.358 3.804-.647" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: 9.522, cy: 10.206, fill: "#3C3C4A", rx: 0.911, ry: 1.139 }), (0, jsx_runtime_1.jsx)("ellipse", { cx: 14.078, cy: 10.206, fill: "#3C3C4A", rx: 0.911, ry: 1.139 }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M15.444 12.255v.75c0 .373-.228.704-.59.788-.554.13-1.496.285-2.826.285s-2.272-.155-2.825-.284c-.363-.085-.592-.416-.592-.789v-.694c.998.246 2.224.491 3.189.491 1.116 0 2.582-.326 3.64-.605q.003.03.004.058" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "prefix__a", children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconSmileDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#prefix__a)", children: [(0, jsx_runtime_1.jsx)("path", { fill: "#FFDB70", d: "M20 11.8a8.2 8.2 0 1 1-16.4 0 8.2 8.2 0 0 1 16.4 0" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FF763F", d: "M15.604 12.155c.599-.162 1.195.286 1.091.897-.063.372-.152.728-.265.975a4.5 4.5 0 0 1-1.087 1.463 5.1 5.1 0 0 1-1.625.978 5.5 5.5 0 0 1-1.918.343 5.5 5.5 0 0 1-1.918-.343 5.1 5.1 0 0 1-1.625-.978 4.5 4.5 0 0 1-1.087-1.463c-.113-.247-.202-.603-.265-.975-.104-.611.492-1.059 1.09-.897 1.067.289 2.63.647 3.805.647s2.738-.358 3.804-.647" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: 9.522, cy: 10.206, fill: "#3C3C4A", rx: 0.911, ry: 1.139 }), (0, jsx_runtime_1.jsx)("ellipse", { cx: 14.078, cy: 10.206, fill: "#3C3C4A", rx: 0.911, ry: 1.139 }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M15.444 12.255v.75c0 .373-.228.704-.59.788-.554.13-1.496.285-2.826.285s-2.272-.155-2.825-.284c-.363-.085-.592-.416-.592-.789v-.694c.998.246 2.224.491 3.189.491 1.116 0 2.582-.326 3.64-.605q.003.03.004.058" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "prefix__a", children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })] }));
 }
 exports.default = IconSmileDefault;

package/dist/components/Icons/IconStarOff.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconStarOff({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconStarOff({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconStarOff;
 //# sourceMappingURL=IconStarOff.d.ts.map

package/dist/components/Icons/IconStarOff.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconStarOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconStarOff.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,WAAW,CAAC,~~EACnB~~,~~IAAgB~~,~~EAChB~~,KAAU,~~EACV~~,MAAW,~~EACX~~,GAAG,KAAK,~~EACT~~,EAAE,KAAK,~~2CAoBP~~;AAED,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"IconStarOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconStarOff.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAqB3E;AAED,eAAe,WAAW,CAAC"}

package/dist/components/Icons/IconStarOff.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconStarOff({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m13.104 4.177 1.828 3.65c.179.36.524.608.925.665l4.088.589c1.01.145 1.412 1.37.681 2.07l-2.956 2.841c-.29.28-.423.681-.354 1.076l.698 4.01c.172.992-.884 1.749-1.787 1.28l-3.654-1.895a1.25 1.25 0 0 0-1.146 0l-3.654 1.894c-.903.47-1.959-.287-1.786-1.28l.697-4.01a1.2 1.2 0 0 0-.354-1.075l-2.956-2.84c-.731-.701-.33-1.926.68-2.071l4.089-.589c.4-.057.747-.306.926-.664l1.827-3.651c.452-.903 1.756-.903 2.208 0", clipRule: "evenodd" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconStarOff({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m13.104 4.177 1.828 3.65c.179.36.524.608.925.665l4.088.589c1.01.145 1.412 1.37.681 2.07l-2.956 2.841c-.29.28-.423.681-.354 1.076l.698 4.01c.172.992-.884 1.749-1.787 1.28l-3.654-1.895a1.25 1.25 0 0 0-1.146 0l-3.654 1.894c-.903.47-1.959-.287-1.786-1.28l.697-4.01a1.2 1.2 0 0 0-.354-1.075l-2.956-2.84c-.731-.701-.33-1.926.68-2.071l4.089-.589c.4-.057.747-.306.926-.664l1.827-3.651c.452-.903 1.756-.903 2.208 0", clipRule: "evenodd" }) }));
 }
 exports.default = IconStarOff;

package/dist/components/Icons/IconStarOn.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconStarOn({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconStarOn({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconStarOn;
 //# sourceMappingURL=IconStarOn.d.ts.map

package/dist/components/Icons/IconStarOn.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconStarOn.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconStarOn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,UAAU,CAAC,~~EAClB~~,~~IAAgB~~,~~EAChB~~,KAAU,~~EACV~~,MAAW,~~EACX~~,GAAG,KAAK,~~EACT~~,EAAE,KAAK,~~2CAsBP~~;AAED,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"IconStarOn.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconStarOn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAuB1E;AAED,eAAe,UAAU,CAAC"}

package/dist/components/Icons/IconStarOn.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconStarOn({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, fillRule: "evenodd", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m13.104 4.177 1.828 3.65c.179.36.524.608.925.665l4.088.589c1.01.145 1.412 1.37.681 2.07l-2.956 2.841c-.29.28-.423.681-.354 1.076l.698 4.01c.172.992-.884 1.749-1.787 1.28l-3.654-1.895a1.25 1.25 0 0 0-1.146 0l-3.654 1.894c-.903.47-1.959-.287-1.786-1.28l.697-4.01a1.2 1.2 0 0 0-.354-1.075l-2.956-2.84c-.731-.701-.33-1.926.68-2.071l4.089-.589c.4-.057.747-.306.926-.664l1.827-3.651c.452-.903 1.756-.903 2.208 0", clipRule: "evenodd" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconStarOn({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m13.104 4.177 1.828 3.65c.179.36.524.608.925.665l4.088.589c1.01.145 1.412 1.37.681 2.07l-2.956 2.841c-.29.28-.423.681-.354 1.076l.698 4.01c.172.992-.884 1.749-1.787 1.28l-3.654-1.895a1.25 1.25 0 0 0-1.146 0l-3.654 1.894c-.903.47-1.959-.287-1.786-1.28l.697-4.01a1.2 1.2 0 0 0-.354-1.075l-2.956-2.84c-.731-.701-.33-1.926.68-2.071l4.089-.589c.4-.057.747-.306.926-.664l1.827-3.651c.452-.903 1.756-.903 2.208 0", clipRule: "evenodd" }) }));
 }
 exports.default = IconStarOn;

package/dist/components/Icons/IconThumbDefault.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconThumbDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconThumbDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconThumbDefault;
 //# sourceMappingURL=IconThumbDefault.d.ts.map

package/dist/components/Icons/IconThumbDefault.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconThumbDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThumbDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,gBAAgB,CAAC,EACxB,~~IAAgB~~,~~EAChB~~,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,~~2CA2BP~~;AAED,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"IconThumbDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThumbDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA4BP;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/Icons/IconThumbDefault.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconThumbDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#prefix__a)", children: [(0, jsx_runtime_1.jsx)("path", { fill: "#FFDB70", d: "M9.675 5.413c0-1.801 1.32-2.226 2.058-2.213 1.499 0 1.73 1.248 1.854 1.912.154.826.003 2.802-.066 3.709l-.002.026q.148-.035.32-.036h2.582c.969 0 1.758.79 1.758 1.758 0 .501-.16.954-.476 1.274.649.287 1.097.887 1.097 1.58 0 .636-.287 1.194-.848 1.503.512.317.848.848.848 1.449 0 .688-.337 1.285-.992 1.574.232.24.37.596.37 1.114 0 .857-.601 1.555-1.758 1.555h-2.396l-.083-.002h-1.946c-3.186.052-5.62-.641-6.553-2.505-.743-1.488-.743-4.474-.489-5.492.25-.996 1.606-1.964 2.875-2.81.41-.396.67-.749 1.031-1.328.311-.622.622-.932.816-3.068" }), (0, jsx_runtime_1.jsx)("path", { fill: "#F9AE00", d: "M13.83 10.053c-.635.02-2.485-.252-2.485 1.223 0 .777.29 1.214.64 1.456-.35.156-.66.732-.66 1.447 0 .796.66 1.378.66 1.378s-.66.641-.66 1.408c0 .579.254 1.006.66 1.297-.22.125-.66.555-.66 1.285 0 .87.813.979 2.405 1.044-.776-.144-1.152-.37-1.152-1.044 0-.223.01-.504.29-.76h4.068a.31.31 0 0 0 0-.62h-3.983a1.95 1.95 0 0 1-.375-1.172c0-.258.097-.676.339-1.04h4.02a.31.31 0 0 0 0-.62h-3.883c-.32-.342-.476-.824-.476-1.29 0-.223.071-.563.245-.885h4.113a.31.31 0 0 0 0-.622h-3.835c-.35-.37-.524-.921-.524-1.348 0-.503.275-.994 1.253-1.124z" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "prefix__a", children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconThumbDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#prefix__a)", children: [(0, jsx_runtime_1.jsx)("path", { fill: "#FFDB70", d: "M9.675 5.413c0-1.801 1.32-2.226 2.058-2.213 1.499 0 1.73 1.248 1.854 1.912.154.826.003 2.802-.066 3.709l-.002.026q.148-.035.32-.036h2.582c.969 0 1.758.79 1.758 1.758 0 .501-.16.954-.476 1.274.649.287 1.097.887 1.097 1.58 0 .636-.287 1.194-.848 1.503.512.317.848.848.848 1.449 0 .688-.337 1.285-.992 1.574.232.24.37.596.37 1.114 0 .857-.601 1.555-1.758 1.555h-2.396l-.083-.002h-1.946c-3.186.052-5.62-.641-6.553-2.505-.743-1.488-.743-4.474-.489-5.492.25-.996 1.606-1.964 2.875-2.81.41-.396.67-.749 1.031-1.328.311-.622.622-.932.816-3.068" }), (0, jsx_runtime_1.jsx)("path", { fill: "#F9AE00", d: "M13.83 10.053c-.635.02-2.485-.252-2.485 1.223 0 .777.29 1.214.64 1.456-.35.156-.66.732-.66 1.447 0 .796.66 1.378.66 1.378s-.66.641-.66 1.408c0 .579.254 1.006.66 1.297-.22.125-.66.555-.66 1.285 0 .87.813.979 2.405 1.044-.776-.144-1.152-.37-1.152-1.044 0-.223.01-.504.29-.76h4.068a.31.31 0 0 0 0-.62h-3.983a1.95 1.95 0 0 1-.375-1.172c0-.258.097-.676.339-1.04h4.02a.31.31 0 0 0 0-.62h-3.883c-.32-.342-.476-.824-.476-1.29 0-.223.071-.563.245-.885h4.113a.31.31 0 0 0 0-.622h-3.835c-.35-.37-.524-.921-.524-1.348 0-.503.275-.994 1.253-1.124z" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "prefix__a", children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })] }));
 }
 exports.default = IconThumbDefault;

package/dist/components/Icons/IconThunder.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconThunder({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconThunder({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconThunder;
 //# sourceMappingURL=IconThunder.d.ts.map

package/dist/components/Icons/IconThunder.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconThunder.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThunder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,WAAW,CAAC,~~EACnB~~,~~IAAgB~~,~~EAChB~~,KAAU,~~EACV~~,MAAW,~~EACX~~,GAAG,KAAK,~~EACT~~,EAAE,KAAK,~~2CAkBP~~;AAED,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"IconThunder.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThunder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAmB3E;AAED,eAAe,WAAW,CAAC"}

package/dist/components/Icons/IconThunder.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconThunder({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, fillRule: "evenodd", d: "M15.793 3.131a.9.9 0 0 0-.078-.595.97.97 0 0 0-.434-.432 1 1 0 0 0-.612-.09.96.96 0 0 0-.537.29L5.244 11.88a.91.91 0 0 0-.195.914.95.95 0 0 0 .276.408c.126.11.28.187.446.221l3.891.214-1.455 6.965c-.042.2-.015.41.078.595a.97.97 0 0 0 .434.432c.19.094.404.126.612.09a.96.96 0 0 0 .537-.29l8.888-9.576a.91.91 0 0 0 .195-.914.95.95 0 0 0-.276-.408 1 1 0 0 0-.446-.221l-3.771-.788z", clipRule: "evenodd" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconThunder({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", d: "M15.793 3.131a.9.9 0 0 0-.078-.595.97.97 0 0 0-.434-.432 1 1 0 0 0-.612-.09.96.96 0 0 0-.537.29L5.244 11.88a.91.91 0 0 0-.195.914.95.95 0 0 0 .276.408c.126.11.28.187.446.221l3.891.214-1.455 6.965c-.042.2-.015.41.078.595a.97.97 0 0 0 .434.432c.19.094.404.126.612.09a.96.96 0 0 0 .537-.29l8.888-9.576a.91.91 0 0 0 .195-.914.95.95 0 0 0-.276-.408 1 1 0 0 0-.446-.221l-3.771-.788z", clipRule: "evenodd" }) }));
 }
 exports.default = IconThunder;

package/dist/components/Icons/IconTimeDefault.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconTimeDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconTimeDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconTimeDefault;
 //# sourceMappingURL=IconTimeDefault.d.ts.map

package/dist/components/Icons/IconTimeDefault.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconTimeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconTimeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,~~IAAgB~~,~~EAChB~~,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,~~2CA2BP~~;AAED,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"IconTimeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconTimeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA4BP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconTimeDefault.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconTimeDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: [(0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21.25 12A9.25 9.25 0 0 1 12 21.25 9.25 9.25 0 0 1 2.75 12 9.25 9.25 0 0 1 12 2.75 9.25 9.25 0 0 1 21.25 12", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m15.431 14.943-3.77-2.25V7.848" })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconTimeDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: [(0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21.25 12A9.25 9.25 0 0 1 12 21.25 9.25 9.25 0 0 1 2.75 12 9.25 9.25 0 0 1 12 2.75 9.25 9.25 0 0 1 21.25 12", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m15.431 14.943-3.77-2.25V7.848" })] }));
 }
 exports.default = IconTimeDefault;

package/dist/components/Icons/IconVoteDefault.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconVoteDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconVoteDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconVoteDefault;
 //# sourceMappingURL=IconVoteDefault.d.ts.map

package/dist/components/Icons/IconVoteDefault.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconVoteDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconVoteDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,~~IAAgB~~,~~EAChB~~,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,~~2CAgBP~~;AAED,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"IconVoteDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconVoteDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconVoteDefault.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconVoteDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M19.54 2.75a3.053 3.053 0 0 1 3.052 3.053v.92a3.05 3.05 0 0 1-1.842 2.801v6.87a5.356 5.356 0 0 1-5.355 5.356H8.947a5.356 5.356 0 0 1-5.355-5.355v-6.87A3.05 3.05 0 0 1 1.75 6.723v-.921A3.053 3.053 0 0 1 4.803 2.75zm-4.01 8.22a.75.75 0 0 0-1.06 0l-3.157 3.153-1.31-1.31a.75.75 0 1 0-1.06 1.06l1.84 1.84a.75.75 0 0 0 1.06.002l3.687-3.685a.75.75 0 0 0 0-1.06" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconVoteDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M19.54 2.75a3.053 3.053 0 0 1 3.052 3.053v.92a3.05 3.05 0 0 1-1.842 2.801v6.87a5.356 5.356 0 0 1-5.355 5.356H8.947a5.356 5.356 0 0 1-5.355-5.355v-6.87A3.05 3.05 0 0 1 1.75 6.723v-.921A3.053 3.053 0 0 1 4.803 2.75zm-4.01 8.22a.75.75 0 0 0-1.06 0l-3.157 3.153-1.31-1.31a.75.75 0 1 0-1.06 1.06l1.84 1.84a.75.75 0 0 0 1.06.002l3.687-3.685a.75.75 0 0 0 0-1.06" }) }));
 }
 exports.default = IconVoteDefault;

package/dist/components/Icons/IconYoutubeDefault.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconYoutubeDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconYoutubeDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconYoutubeDefault;
 //# sourceMappingURL=IconYoutubeDefault.d.ts.map

package/dist/components/Icons/IconYoutubeDefault.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconYoutubeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconYoutubeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,~~IAAI~~,~~CAAC,~~EAAE,MAAM,CAAC;~~IACd~~,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,~~IAAgB~~,~~EAChB~~,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,~~2CAkBP~~;AAED,eAAe,kBAAkB,CAAC"}
1	+ {"version":3,"file":"IconYoutubeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconYoutubeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP;AAED,eAAe,kBAAkB,CAAC"}

package/dist/components/Icons/IconYoutubeDefault.js CHANGED Viewed

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconYoutubeDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, fillRule: "evenodd", d: "M12.423 5h-.847c-1.336.01-5.44.068-6.61.416-.775.23-1.385.908-1.592 1.769-.311 1.29-.365 3.742-.374 4.55v.53c.01.806.063 3.258.374 4.549.207.86.817 1.538 1.592 1.768 1.08.322 4.66.396 6.255.413l.945.005c.943-.004 5.607-.042 6.866-.418.775-.23 1.385-.908 1.592-1.768.279-1.155.351-3.24.37-4.244L21 11.9c-.004-.556-.038-3.317-.376-4.715-.207-.861-.817-1.539-1.591-1.769-1.17-.348-5.275-.406-6.61-.416m2.109 7.464a.53.53 0 0 0 0-.928l-4.245-2.348a.53.53 0 0 0-.787.464v4.696c0 .404.434.66.787.464z", clipRule: "evenodd" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconYoutubeDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", d: "M12.423 5h-.847c-1.336.01-5.44.068-6.61.416-.775.23-1.385.908-1.592 1.769-.311 1.29-.365 3.742-.374 4.55v.53c.01.806.063 3.258.374 4.549.207.86.817 1.538 1.592 1.768 1.08.322 4.66.396 6.255.413l.945.005c.943-.004 5.607-.042 6.866-.418.775-.23 1.385-.908 1.592-1.768.279-1.155.351-3.24.37-4.244L21 11.9c-.004-.556-.038-3.317-.376-4.715-.207-.861-.817-1.539-1.591-1.769-1.17-.348-5.275-.406-6.61-.416m2.109 7.464a.53.53 0 0 0 0-.928l-4.245-2.348a.53.53 0 0 0-.787.464v4.696c0 .404.434.66.787.464z", clipRule: "evenodd" }) }));
 }
 exports.default = IconYoutubeDefault;