Click icons to copy import text to clipboard

src/components/render/DisplayIconSingle.tsx

@@ -4,6 +4,7 @@ import {getIcons} from "@utils/getIcons";
 import type {IconType} from "react-icons";
 import {BiError} from "react-icons/bi";
 import {BsQuestionCircle} from "react-icons/bs";
+import {classNames} from "@utils/helpers";
 
 type DisplayIconSingleProps = {
     id: string;
@@ -13,14 +14,16 @@ type DisplayIconSingleProps = {
 type IconInternalProps = {
     children?: ReactNode;
     label: ReactNode;
+    onClick?: () => void;
 };
 
-const IconInternal: FunctionComponent<IconInternalProps> = ({label, children}) => {
+const IconInternal: FunctionComponent<IconInternalProps> = ({label, children, onClick}) => {
     return <div
-        className="w-32 flex flex-col items-center overflow-clip hover:overflow-visible hover:z-40">
-        {children ?? <BsQuestionCircle className="w-8 h-8" />}
+        className={classNames(onClick != undefined ? "cursor-pointer" : null, "group w-32 flex flex-col items-center overflow-clip group-hover:overflow-visible group-hover:z-40")}
+        onClick={onClick}>
+        {children ?? <BsQuestionCircle className="w-8 h-8"/>}
         <span
-            className="px-1 hover:bg-zinc-100 mt-1 text-[10px] hover:rounded hover:font-semibold">
+            className="px-1 mt-1 text-[10px]">
         {label}
         </span>
     </div>
@@ -30,11 +33,13 @@ const DisplayIconSingle: FunctionComponent<DisplayIconSingleProps> = ({setId, id
     // eslint-disable-next-line
     const IconSet = loadable.lib(() => getIcons(setId));
 
-    return <IconSet fallback={<IconInternal label={"Loading..."} />} >
+    return <IconSet fallback={<IconInternal label="..."/>}>
         {(module) => {
             const Icon: IconType | undefined = (module as { [icon: string]: IconType })[id] ?? BiError;
-            return <IconInternal label={id}>
-                <Icon className="text-slate-700 hover:text-slate-900 hover:scale-125 transition-transform w-8 h-8"/>
+            return <IconInternal label={id} onClick={() => {
+                void navigator.clipboard.writeText(`import {${id}} from "react-icons/${setId}";`)
+            }}>
+                <Icon className="text-slate-700 group-hover:text-slate-900 group-hover:scale-125 transition-transform w-8 h-8"/>
             </IconInternal>
 
         }}

src/utils/helpers.ts

@@ -0,0 +1,3 @@
+export function classNames(...classes: (string | undefined | null)[]): string {
+    return classes.filter(Boolean).join(" ");
+}