在前端开发中，我们经常需要使用各种图标来装饰我们的页面。Material Design Icons (MDI) 是一套普及度极高的开源图标库，其中包括了各种应用场景下常用的图标。而 mdi-es6 是一款可以在 ES6 模块中导入 SVG 图标的 npm 包，让我们在项目中轻松引用这些图标。在本文中，我们将详细介绍如何在项目中使用 mdi-es6，包括如何引用、如何使用内置图标和如何自定义图标。
引入 mdi-es6
要使用 mdi-es6，首先需要在你的项目中引入该 npm 包。可以通过 npm 安装：
npm install mdi-es6
或者通过 yarn 安装：
yarn add mdi-es6
引入的方式也很简单，在需要使用图标的文件中导入即可：
import { mdiAccount } from 'mdi-es6';此时，你就可以在该文件中使用该图标了。当然，你还需要在你的页面中如何使用它呢？接下来，我们将详细介绍如何使用 mdi-es6。
使用 mdi-es6 内置图标
mdi-es6 中包含了大量内置的 MDI 图标，使用也很简单。通过导入该 npm 包后，你就可以在 JavaScript 中以对象形式引用这些图标：
import { mdiAccount } from 'mdi-es6';
console.log(mdiAccount); // 输出 mdi 账户图标的 SVG 内容通过这种方式，你可以将图标作为字符串添加到你的页面中：
<div>
<!-- 将 mdi 账户图标添加到页面上 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
<path d="M13,12A3,3 0 0,1 16,15A3,3 0 0,1 13,18A3,3 0 0,1 10,15A3,3 0 0,1 13,12M13,14A1,1 0 0,0 12,15A1,1 0 0,0 13,16A1,1 0 0,0 14,15A1,1 0 0,0 13,14M20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H18A2,2 0 0,1 20,4Z"/>
</svg>
</div>在上面的代码中，我们将 mdiAccount 引入为一个 SVG 字符串，并将其添加到 HTML 文件中。由于一般不会只引用一个图标，所以我们可以使用布局引入：
<div>
<svg viewBox="0 0 24 24" class="icon">
<use href="path/to/mdi-es6.svg#mdi-account" />
</svg>
</div>在使用它之前，需要先将 mdi-es6 中的 SVG 图标文件复制到你的项目中（如上面示例代码中的 path/to/）。mdi-es6 会将所有 SVG 图标打包在一个文件中，并默认为 mdi-es6.svg。你只需要在 use 中引用指定名称的图标即可（这里使用了 mdi-account）。
自定义图标
当然，mdi-es6 也提供了自定义图标的功能。默认情况下，mdi-es6 会自动把导入的所有 SVG 文件中的所有 ID 添加到该模块的公共导出中。例如，如果将名为 my-custom-icon.svg 的图标文件导入到模块中，则可以通过 import { mdiMyCustomIcon } from 'mdi-es6'; 引用该图标。
在创建自定义图标时，需要注意以下几点：
- 符合 MDI 图标的命名标准，以便可以按照 MDI 图标的实现方式使用。例如，图标空间
mdiCustom需要在 SVG 的文档头中定义，以便使用import { mdiCustom } from 'mdi-es6';引用它。 - 在默认导出的 SVG 文件中仅包含一个图标，以便将其导入到其他模块中而无需在 use 元素中指定 ID。
有了以上准则，我们就可以开始创建自己的图标了。以箭头图标为例，这是一个非常简单的 SVG 文件：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M5,12L19,12M12,5L19,12L12,19" /> </svg>
在该文件中，我们定义了三个点以生成箭头。现在，我们可以将其作为 my-custom-icon.svg 导入到 mdi-es6 中：
-- -------------------- ---- ------- -- ---------------------- -- ---- ---------------------------------- ---------- - -- ---- -- -- ----- -------------------------------- -- -- -- ------ -- -- --------------------- ------ ------------ ---- ----------------------- ------ ------- -------------
现在，我们可以通过 import { mdiMyCustomIcon } from 'mdi-es6'; 在其他模块中使用箭头图标了。
总结
在本文中，我们介绍了如何使用 npm 包 mdi-es6，包括如何引入、如何使用内置图标和如何自定义图标。使用 mdi-es6 可以轻松地引用 Material Design Icons 库中的各种图标，为你的项目增添更多色彩。如果你在项目中使用过 mdi-es6，或者有任何疑问和建议，请在评论区留言，期待与你交流！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663c81e8991b448e23be