feat: type the icon prop to improve DX

package.json

@@ -64,7 +64,7 @@
     "@babel/preset-env": "7.3.1",
     "@babel/preset-typescript": "^7.10.4",
     "@nulogy/eslint-config-nulogy": "^1.0.0",
-    "@nulogy/icons": "4.34.1",
+    "@nulogy/icons": "^4.36.0",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@semantic-release/changelog": "^6.0.2",

src/Button/Button.tsx

@@ -5,13 +5,14 @@ import { Icon } from "../Icon";
 import { DefaultNDSThemeType } from "../theme.type";
 import { useComponentSize, ComponentSize as ContextComponentSize } from "../NDSProvider/ComponentSizeContext";
 import { subPx } from "../utils";
+import icons from "@nulogy/icons";
 
 type ComponentSize = "small" | "medium" | "large";
 
 export type ButtonProps = SpaceProps &
   React.ComponentPropsWithRef<"button"> & {
     className?: string;
-    icon?: any;
+    icon?: keyof typeof icons | "loading";
     iconSide?: "left" | "right";
     size?: ComponentSize;
     fullWidth?: boolean;

src/Button/ControlIcon.tsx

@@ -1,3 +1,4 @@
+import icons from "@nulogy/icons";
 import React from "react";
 import styled from "styled-components";
 import { space, SpaceProps } from "styled-system";
@@ -6,7 +7,7 @@ import { Icon } from "../Icon";
 type ControlIconProps = React.ComponentPropsWithRef<"button"> &
   SpaceProps & {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    icon: string;
+    icon: keyof typeof icons | "loading";
     toggled?: boolean;
     disabled?: boolean;
     size?: string;

src/Button/IconicButton.tsx

@@ -13,7 +13,7 @@ interface BaseProps {
   size?: ComponentSize;
   color?: string;
   labelHidden?: boolean;
-  icon?: string;
+  icon?: keyof typeof icons | "loading";
   iconSize?: string;
   hoverBackgroundColor?: string;
   fontSize?: string;

src/FieldLabel/FramedIcon.tsx

@@ -1,11 +1,12 @@
 import React, { ReactElement } from "react";
+import icons from "@nulogy/icons";
 import { Flex } from "../Flex";
 import { Tooltip } from "../Tooltip";
 import { Icon } from "../Icon";
 
 interface FramedIconProps extends React.ComponentPropsWithoutRef<"svg"> {
   iconSize: string;
-  icon: string;
+  icon: keyof typeof icons | "loading";
   focusable?: boolean;
   maxWidth?: string;
   tooltip?: string | ReactElement;

src/Icon/Icon.story.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import icons from "@nulogy/icons";
+import type { IconName } from "@nulogy/icons";
 
 import { Box, Flex, Icon, InlineIcon } from "../index";
 import theme from "../theme";
 
-const iconNames = [...Object.keys(icons), "loading"];
-const iconSubset = [...iconNames.slice(0, 5), "loading"];
+const iconNames = [...Object.keys(icons), "loading"] as IconName[];
+const iconSubset = [...iconNames.slice(0, 5), "loading"] as IconName[];
 
 const IconCode = ({ icon }) => (
   <code>

src/Icon/Icon.tsx

@@ -5,7 +5,7 @@ import icons from "@nulogy/icons";
 import LoadingIcon from "./LoadingIcon";
 
 interface IconProps extends SpaceProps {
-  icon: string;
+  icon: keyof typeof icons | "loading";
   className?: string;
   size?: string;
   title?: string;

src/Input/InputField.tsx

@@ -11,13 +11,14 @@ import type { DefaultNDSThemeType } from "../theme.type";
 import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import Prefix from "./Prefix";
 import Suffix from "./Suffix";
+import icons from "@nulogy/icons";
 
 type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
 
 export interface InputFieldProps extends NativeInputProps {
   htmlSize?: number;
   size?: ComponentSize;
-  icon?: string;
+  icon?: keyof typeof icons | "loading";
   error?: boolean;
   labelText?: string;
   requirementText?: string;

yarn.lock

@@ -3110,10 +3110,10 @@
     eslint-plugin-react-hooks "^4.0.4"
     prettier "^2.0.5"
 
-"@nulogy/icons@4.34.1":
-  version "4.34.1"
-  resolved "https://registry.yarnpkg.com/@nulogy/icons/-/icons-4.34.1.tgz#9255e637909b403dd877ad7631879b0b9fff023d"
-  integrity sha512-ZqOMxPcN/ZXFa5yhBY4cV5tMTorMPQ4BhcWpU1y8VmLftxcQS61gGhIg5MfogON4yUZJIZWrGaIRi6r2s6Qr1Q==
+"@nulogy/icons@^4.36.0":
+  version "4.36.0"
+  resolved "https://registry.yarnpkg.com/@nulogy/icons/-/icons-4.36.0.tgz#3d7858b7d7a4ec83abe09f8715408344f96cf4c4"
+  integrity sha512-xpwbTaZbZ4qoV/FgzepxxDXDm6xzYpPnQh6OQL5l/C9aRjs7Khl2sI57zxK4DUGsLGWTeGGdXXjaxMyC99GISw==
 
 "@nulogy/tokens@^5.4.0":
   version "5.4.0"
@@ -7511,16 +7511,11 @@ camelize@^1.0.0:
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
   integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
 
-caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001280, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001587:
+caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001280, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001663:
   version "1.0.30001668"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz"
   integrity sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==
 
-caniuse-lite@^1.0.30001663:
-  version "1.0.30001668"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz#98e214455329f54bf7a4d70b49c9794f0fbedbed"
-  integrity sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==
-
 cardinal@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-2.1.1.tgz#7cc1055d822d212954d07b085dea251cc7bc5505"