本文将为大家介绍一个常用于前端开发的 npm 包 @svg-icons/material-twotone。该 npm 包提供了丰富的二色调 SVG 图标，可用于搭建网站和移动应用等前端项目的开发中。
1. 安装
安装 @svg-icons/material-twotone 非常简单，只需要在终端运行以下命令即可：
npm i @svg-icons/material-twotone
2. 使用
使用 @svg-icons/material-twotone 只需要引入需要的图标，然后在 HTML 文件中将其作为一个图像资源即可实现使用。
2.1 引入
在需要使用的组件中引入需要的图标，例如：
import { Email, Phone } from '@svg-icons/material-twotone';2.2 使用
在 HTML 中使用上述笔画的图标，在具体实现上可以按如下代码实现：
<img src={Email} alt="Email 图标" />
<img src={Phone} alt="Phone 图标" />这里需要注意的是，因为这些图标是以 SVG 格式提供的，因此需要使用 img 标签而不是 i 或 span 等其他标签来引用这些图标。
3. 示例代码
下面是一个使用 @svg-icons/material-twotone 的简单示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ----- - ---- ------------------------------
-------- --------- -
------ -
-----
----------- -------
---- ----------- ---------- --- --
----------- ---------------------
---- ----------- ---------- --- --
------------- -----------------
------
--
-
------ ------- --------这里通过使用 img 标签，并将从 @svg-icons/material-twotone 中导入的 Email 和 Phone 图标设置为 src 属性的值，实现了在 React 组件 Contact 中添加联系方式的效果。
4. 结语
通过上述介绍，读者对于 npm 包 @svg-icons/material-twotone 的基本安装和使用方法应该已经有了比较清晰的了解。希望本文对于读者在前端开发中使用 SVG 图像资源会有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6ff92ea9b7065299ccba88