在前端开发中，我们常常会使用到 Material UI 和 SVG 图标。然而，当我们需要使用 Material UI 中的 SVG 图标时，常常会遇到类型不匹配等问题。为了解决这一问题，开发者好心地发布了 gendts-material-ui-svg-icons 这样一个 npm 包。本文将详细介绍如何使用这个包。
安装
我们可以使用 npm 安装这个包，命令如下：
npm i -D gendts-material-ui-svg-icons
需要注意的是，这个命令中的 -D 表示将这个包作为 devDependency 安装。
使用
下面是使用 gendts-material-ui-svg-icons 的步骤。
引入包
首先，我们需要在我们的文件中引入这个包。
import * as Icons from 'gendts-material-ui-svg-icons';
这里，我们通过 * 来导入了所有的 SVG 图标。
使用图标
以使用 AddCircle（添加圆）图标为例。我们先定义一个 React 组件：
import * as Icons from 'gendts-material-ui-svg-icons';
function AddButton() {
return (
<Icons.AddCircle />
);
}在这个组件中，我们使用了 AddCircle 图标。这样就可以使用这个图标了。
意义
相信使用 Material UI 和 SVG 图标的开发者都遇到过类型不匹配的问题，这个问题会给开发造成很大的困扰。gendts-material-ui-svg-icons 包提供了一种解决方案，帮助开发者在使用 Material UI 和 SVG 图标时更加方便。此外，这个包也对 TypeScript 新手来说是一个非常好的学习材料。
示例代码
下面是完整的组件示例代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -- ----- ---- -------------------------------
-------- ----------- -
------ -
---------------- --
--
-
------ ------- ----------当然，这只是一个最简单的例子。在实际开发中，我们会对图标进行更多的自定义设置，满足我们的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fda81e8991b448dd735