Im trying to implement an Icon Picker component using antd icons, in react, but I dont know how to import loop over all icons

Question

im trying to use antd Icons in my react app but I want to import them all and use them all, and I don't know how, I have my code like this:

import React, { useState } from 'react';
import Icon, * as Icons from '@ant-design/icons';

const IconPicker = () => {
  return <>{/* <Icons[] /> */}</>;
};

export default IconPicker;

But I don't want to write all the icon components manually as its not efficient

Edit: Icons is an object with icon names as Keys and their values are forwardedref elements, I already tried Object.values but still doesn't work

Answer 1

You need to import icons from lib folder. Importing icons from @ant-design/icons will include other stuff. Here's the complete code

import * as Icons from '@ant-design/icons/lib/icons';

const App = () => {
    return (
        <div>
            {Object.keys(Icons).map((value) => {
                // If using Typescript
                // const Icon = Icons[value as keyof typeof Icons];

                const Icon = Icons[value];

                return (
                    <div key={value}>
                        <Icon />
                    </div>
                );
            })}
        </div>
    );
};

export default App;