I want to build a component that lists all the icons like the one on the website https://lucide.dev/icons

[mustafamoe]

i did this

import * as lucide from "lucide-react";
import { useState } from "react";
import { useMemo } from "react";

import { Button, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@ui";

type Props = {};

export default function ImagePickerDialog({}: Props) {
    const [searchTerm, setSearchTerm] = useState("");

    const filteredIcons = useMemo(() => {
        return Object.entries(lucide)
            .filter(([name, component]: any) => name.includes("Icon") && !!component.render)
            .filter(([name]) => name.toLowerCase().includes(searchTerm.toLowerCase()));
    }, [searchTerm]);

    return (
        <DialogContent enableOverflow>
            <DialogHeader title="Select Icon" />

            <div className="grid grid-cols-7 gap-2">
                {filteredIcons.map(([name, Icon]) => (
                    <button key={name}>
                        <div className="flex aspect-square items-center justify-center rounded-md border p-2">
                            <Icon />
                        </div>
                    </button>
                ))}
            </div>

            <DialogFooter>
                <DialogClose />
                <Button>Select</Button>
            </DialogFooter>
        </DialogContent>
    );
}

I did this and it's working fine, but there are some typescript errors, any way to resolve them?
or if there is a better way to do it.

thanks!

[MrVibe]

trying to achieve same but afraid this "import * as lucide from " would have a huge impact