Icons from React-Icons with Classes Name Instead of Component

I haven't used React Icons specifically but I've gotten the result you are after by using bootstrap and font-awesome. Install bootstrap and font-awesome in you project.

yarn add bootstrap
yarn add font-awesome

Or

   npm install bootstrap
   npm install font-awesome

Import them (I import to my index.js file but where ever is the root of your app)

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';

Then you can use class names like

'fa fa-sm fa-eye'

for example to get a small eye icon.

I am not sure which library you are using, but I'm assuming it's 'react-icons/fa'. It is possible to use it by string but after you import them all which might effect your bundle size by ~30MB extra which is not small size. Here is an example how to do it with custom component:

 import * as Icons from "react-icons/fa";
    
    const CustomFaIcon = ({ name }) => {
      const FaIcon = Icons[name];
      if (!FaIcon) return <p>Icon not found!</p>;
    
      return <FaIcon />;
    };
    
    export default function App() {
      return (
        <div className="App">
          <CustomFaIcon name="Your String" />
        </div>
      );
    }

I also suggest that you check out react-fontawesome library, you might end up with lower bundle size if you use it corrently, here you can find some examples how to do it: