[Update] Update various configuration files, ESLint config, Prettier config, and added new files including a CHANGELOG.md.

src/components/ui/icon.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { type LucideProps, icons } from "lucide-react";
+import { Fragment, useCallback } from "react";
+
+import { cn } from "~/lib/utils";
+
+export type IconName = keyof typeof icons;
+export const IconNamesArray = Object.keys(icons) as [IconName, ...IconName[]];
+
+type Props = {
+  name: keyof typeof icons;
+  className?: string;
+  hideWrapper?: true;
+  wrapperProps?: React.HTMLAttributes<HTMLSpanElement>;
+} & LucideProps;
+
+export default function Icon({ name, className, hideWrapper, wrapperProps, ...props }: Props) {
+  const LucideIcon = icons[name];
+  const { className: wrapperClassName, ...restWrapperProps } = wrapperProps ?? {};
+  // const Wrapper = hideWrapper ? Fragment : "span";
+  const Wrapper = useCallback<React.FC<React.HTMLAttributes<HTMLSpanElement>>>(
+    () =>
+      hideWrapper ? (
+        <Fragment>
+          <LucideIcon
+            className={cn("size-4 stroke-inherit", className)}
+            {...props}
+          />
+        </Fragment>
+      ) : (
+        <span
+          className={cn("grid aspect-square h-fit w-fit place-items-center", wrapperClassName)}
+          {...restWrapperProps}
+        >
+          <LucideIcon
+            className={cn("size-4 stroke-inherit", className)}
+            {...props}
+          />
+        </span>
+      ),
+    [hideWrapper, wrapperClassName, restWrapperProps, LucideIcon, className, props],
+  );
+
+  return <Wrapper />;
+}