SVG icons with react

1. React SVG Icons:
- Use Svg Icon set as React Components directly without any 3rd party library.
- Copy SVG icons from popular icon sets and use them as React Components[1].

2. Manual SVG Import:
- Install the required loaders (e.g., `file-loader` and `svg-react-loader`) in your `webpack.config.js` file.
- Import the SVG file directly into your React component:

javascript
     import React from 'react';
     import SvgIcon from './icon.svg';

     const Icon = () => {
       return <SvgIcon />;
     };

     export default Icon;
     

3. React Icons and Font Awesome:
- Use a package like `react-icons` to easily import icons from popular icon sets like Font Awesome.
- For example, you can import a Font Awesome icon:

javascript
     import { FaGlobe } from 'react-icons/fa';

     const GlobeIcon = () => {
       return <FaGlobe />;
     };

     export default GlobeIcon;
     

4. Material UI Icons:
- Use the `SvgIcon` component from Material UI to wrap your custom SVG icons.
- This component provides built-in accessibility and supports customization with props like `viewBox` and `color`:

javascript
     import React from 'react';
     import SvgIcon from '@material-ui/core/SvgIcon';

     const CustomIcon = () => {
       return (
         <SvgIcon component={StarIcon} inheritViewBox />
       );
     };

     export default CustomIcon;
     

5. Next.js:
- If you are using Next.js, you can import SVG files directly and use them with the `` component:

javascript
     import Image from 'next/image';

     const Icon = () => {
       return (
         <Image src="/path/to/icon.svg" />
       );
     };

     export default Icon;
     

Each method has its own advantages and use cases. Choose the one that best fits your project requirements.