能否从MUI包中单独下载Material UI图标存为SVG到应用目录以优化性能

可行性结论 #

该操作完全可行，且确实能实现你提到的优化应用性能、减少外部包依赖的需求，尤其在你仅需使用少量MUI图标的场景下，缩减打包体积、降低依赖复杂度的收益非常明显。

操作步骤 #

• 先确认本地已安装@mui/icons-material依赖包，在项目的node_modules/@mui/icons-material/esm/目录下，可找到所有图标的对应JS源文件，文件名和图标官方名称一一对应
• 打开你需要提取的图标对应的JS文件，取出内部返回的JSX结构里的SVG相关属性，将驼峰命名的JSX属性转换为标准SVG的短横线命名格式（比如将fillRule改为fill-rule、strokeWidth改为stroke-width），即可得到标准可用的SVG文件内容
• 将转换完成的SVG文件存入你应用的本地静态资源目录（例如/src/assets/icons/），后续使用时直接作为静态资源或者SVG组件引入即可

注意事项 #

• 提取SVG时要保留原图标默认的viewBox属性值，避免图标出现拉伸、偏移等显示异常
• 可以给SVG根节点添加fill="currentColor"属性，后续即可通过父元素的color、font-size属性控制图标的颜色和大小，使用体验和原MUI图标组件基本一致
• 如果你需要使用的MUI图标数量超过20个，建议先对比单独提取的人工成本、全量引入依赖包后经treeshaking处理的实际打包体积增量，再决定是否采用该方案

内容的提问来源于stack exchange，提问作者Luke Grech