I read [the docs](https://github.com/unplugin/unplugin-icons), and it said to:

1. Install it via npm i -D unplugin-icons ✅
2. Install relevant icon packs (npm i -D @iconify-json/lucide @iconify-json/fa6-brands) ✅
3. It says to change the next.config.js, but I have a next.config.ts, so I did

import { NextConfig } from 'next';
import unpluginIcons from 'unplugin-icons/webpack';
import WithBundleAnalyzer from '@next/bundle-analyzer';
import createNextIntlPlugin from 'next-intl/plugin';
import createMDX from '@next/mdx';

const nextConfig: NextConfig = {
    pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
    reactStrictMode: true,
    webpack(config) {
        config.plugins.push(
            unpluginIcons({
                compiler: 'jsx',
                jsx: 'react',
            }),
        );

        return config;
    },
};

const withBundleAnalyzer = WithBundleAnalyzer({
    enabled: process.env.ANALYZE === 'true',
});
const withNextIntl = createNextIntlPlugin();
const withMDX = createMDX({});

export default withBundleAnalyzer(withNextIntl(withMDX(nextConfig)));

instead

Now it said that I should use it like so:

import MoonIcon from '~icons/lucide/moon.jsx';

export function Footer() {
    return (
        <footer className="border-t bg-background">
            <div className="container mx-auto px-4 py-8">
                <div className="mx-auto max-w-4xl">
                    <MoonIcon />
                </div>
            </div>
        </footer>
    );
}

but it says Cannot find module '~icons/lucide/moon.jsx' or its corresponding type declarations..