在前端开发中，我们经常需要使用各种图标来装饰我们的页面。Material Design Icons (MDI) 是一套普及度极高的开源图标库，其中包括了各种应用场景下常用的图标。而 mdi-es6 是一款可以在 ES6 模块中导入 SVG 图标的 npm 包，让我们在项目中轻松引用这些图标。在本文中，我们将详细介绍如何在项目中使用 mdi-es6，包括如何引用、如何使用内置图标和如何自定义图标。
引入 mdi-es6
要使用 mdi-es6，首先需要在你的项目中引入该 npm 包。可以通过 npm 安装：
--- ------- -------
或者通过 yarn 安装：
---- --- -------
引入的方式也很简单，在需要使用图标的文件中导入即可：
------ - ---------- - ---- ----------
此时，你就可以在该文件中使用该图标了。当然，你还需要在你的页面中如何使用它呢？接下来，我们将详细介绍如何使用 mdi-es6。
使用 mdi-es6 内置图标
mdi-es6 中包含了大量内置的 MDI 图标，使用也很简单。通过导入该 npm 包后，你就可以在 JavaScript 中以对象形式引用这些图标：
------ - ---------- - ---- ---------- ------------------------ -- -- --- ----- --- --
通过这种方式，你可以将图标作为字符串添加到你的页面中：
-----
---- - --- ---------- ---
---- ---------------------------------- ---------- - -- --- -------------
----- ------------- - --- --------- - --- --------- - --- --------- - --- --------------- - --- --------- - --- --------- - --- --------- - --- ----------------- - --- ----------- - --- ---------- - --- ---------- - --- --------
------
------在上面的代码中，我们将 mdiAccount 引入为一个 SVG 字符串，并将其添加到 HTML 文件中。由于一般不会只引用一个图标，所以我们可以使用布局引入：
-----
---- ---------- - -- --- -------------
---- -------------------------------------- --
------
------在使用它之前，需要先将 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 文件：
---- ---------------------------------- ---------- - -- ---- ----- -------------------------------- -- ------
在该文件中，我们定义了三个点以生成箭头。现在，我们可以将其作为 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