import { ReactComponent as CatWalk } from '.cat-walk-colored1.svg';

[teal pebble]

what u wanted to do

[lapis verge]

okay i have svg files, that i want to use as react components

i have read them from file, with a function just trying things out,

ill share

export function getIcons() {
    const files = fs.readdirSync(iconsDir)
    files.reduce((acc, value) => {
        return {...acc, [value]:""}
    }, {})

    return files
}

export async function getStaticProps(context: any) {
    const iconNames = getIcons();
    return {
        props: { iconNames },
    };
}```

how now i have the icons in the context

then i have this ```js
//icons only
import { ReactComponent as CatWalk } from './cat-walk-colored1.svg';

//icons only end

const allIcons: Ticons = {
catwalk: <CatWalk className="aside-icon" />,
};

export type Ticons = {
catwalk: JSX.Element;
};

export default allIcons;```

then i try to access it here jsx <div>{allIcons["cat-walk-colored1.svg" as keyof Ticons ]}</div>