Is there any way to import all files from a directory?

[shinobu-uwu]

I'm facing a problem that I must dynamically import svg files based on a string, I have a component like this:

import { type ComponentProps, type FC, useEffect, useRef, useState } from 'react';

export const useLazySvgImport = (name: string) => {
    const importRef = useRef<FC<ComponentProps<'svg'>> | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

    useEffect(() => {
        const importIcon = async () => {
            try {
                if (name) {
                    const module = await import(`react:~/assets/${name}.svg`);
                    importRef.current = module.default;
                    setLoading(false);
                }
            } catch (err) {
                setError(err as Error);
                setLoading(false);
            }
        };

        setLoading(true);
        setError(null);
        importIcon();
    }, [name]);

    return {
        error,
        loading,
        Svg: importRef.current,
    };
};

However, since import path is not static I think parcel is not including all the svgs in the final bundle. So I thought to do something like import('react:~/assets/*.svg in my index.tsx so all the files would be included. Needless to say that does not work, and I get a ENOENT error, so I want to know if there is any way to include all the files needed or if I can import all the files from a directory so they'll be included in the final bundle.
FYI I'm using plasmo, which uses parcel, and apparently the svgs are embedded into the code instead of copied to the output directory.

[devongovett]

https://parceljs.org/features/dependency-resolution/#glob-specifiers