React图标大小是巨大的

Question

我在我的网站中使用React图标，我注意到这个包相当大-在开发人员工具的网络选项卡中几乎是9MB(这使得网站在缓慢的互联网上加载花费了很多时间)。然而，我最多只使用几个图标。下面是我目前在代码中导入图标的方式:

import { AiFillCloseCircle, AiOutlineMenu } from 'react-icons/ai';

我试着在网上搜索解决方案，但我找不到任何明确的答案，如何在使用几个图标时减少React图标的文件大小。

谁能建议一个解决方案或最佳实践，以更有效的方式使用React图标?我想在不影响功能的情况下尽可能减小包的大小。

提前感谢!

Answer 1

您应该像这样导入它们。

import FaFacebookSquare from 'react-icons/lib/fa/facebook-square';
import FaLinkedin from 'react-icons/lib/fa/linkedin';
import FaTwitter from 'react-icons/lib/fa/twitter';
import FaPinterest from 'react-icons/lib/fa/pinterest-square';
import FaInstagram from 'react-icons/lib/fa/instagram';