💸 Bundle Size - React-Icons

@babakamyljanovssw @wicksipedia

Description
The current implementation of react-icons in our project significantly increases the package size, leading to performance issues, including slower page load times for users.

This problem is also discussed in an open issue on Next.js: https://github.com/vercel/next.js/issues/70666.

Impact

• Increased bundle size: The entire react-icons package is being included instead of only the necessary icons.
• Slower load times: Users may experience delays as unnecessary assets are loaded.
• Potential SEO & UX impact: A slower page affects user experience and search engine rankings.

Proposed Solution

• Optimize imports by using tree-shakable modules instead of including the entire react-icons package.
• Use direct imports from @react-icons/all-files (or similar) to ensure only the required icons are bundled.
• Investigate alternative lightweight icon libraries if necessary to further reduce package size.

Start by locating the project's react-icons imports and comparing the resulting bundle size with the current implementation, using the linked Next.js issue for context. Done means only the required icons are bundled through tree-shakable or direct imports, with any necessary lightweight-library evaluation recorded.