在前端开发中，图标是一个非常重要的元素。一些常见的图标库如 Font Awesome、Material Design Icons 等都有着十分优秀的表现。本文将介绍一款前端开发中经常使用的图标库 - ember-cli-material-icons，并详细介绍它的使用方法。
ember-cli-material-icons
ember-cli-material-icons 是一个基于 Material Design Icons 的 ember.js 图标插件。它提供了相应的组件和帮助器函数以轻松地使用 Material Design Icon 。在本文中，我们将学习如何在 Ember.js 应用程序中使用 ember-cli-material-icons 并添加 Material Design Icon 。
安装
要安装 ember-cli-material-icons ，只需在控制台中输入以下命令即可：
ember install ember-cli-material-icons
如果您使用 yarn，则输入以下命令：
yarn add ember-cli-material-icons
使用
接下来，我们使用一个示例应用程序来演示如何使用 ember-cli-material-icons 。 首先，我们在应用程序中创建一个新的 Component ：
ember g component my-component
接下来，我们在定义的 Component 模板中包含 Material Design Icon ：
{{material-icon "bookmark"}}现在，在浏览器中查看该 Component 模板，将显示一个名为 bookmark 的 Material Design Icon 。
我们还可以使用变量来切换显示的图标。 在组件的 JavaScript 文件中添加以下代码：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - -------- - ---- ----------------
------ ------- ------------------
----- ------
--------- ---------------- ---------- -
------ ---------------- - ---------- - --------
--
---上面的代码创建了一个名为 show 的属性，并将其设置为 false。 然后，我们根据此属性为 Component 添加一个计算属性。 iconName 此计算属性根据值计算 show 和返回不同的 Material Design Icon 。使用以下代码将此计算属性包含在 Component 模板中：
{{material-icon iconName}}在 Component 的 JavaScript 文件中，我们可以通过设置 show 属性的不同值来更改显示的 Material Design Icon。
高级用法
除了上述示例中的基本用法之外， ember-cli-material-icons 还提供了其他一些高级用法。在这里，我们将介绍其中的一些。
自定义颜色
有时我们需要自定义 Material Design Icon 的颜色。为了实现这一点，我们可以简单地将颜色指定为我么毫需的 CSS 颜色即可：
{{material-icon "bookmark" color="#000"}}自定义大小
如果我们需要调整 Material Design Icon 的大小，则可以使用 size 属性指定所需大小。 size 属性的值可以是数字或带有em，px或rem单位的字符串。
{{material-icon "bookmark" size="2rem"}}包含多个图标
在某些情况下，我们需要将多个 Material Design Icon 包含在一起。为此，我们可以使用 {{material-icons}} 帮助器，如下所示：
{{#material-icons}}
{{material-icon "bookmark"}}
{{material-icon "print"}}
{{/material-icons}}总结
在本文中，我们学习了如何使用 ember-cli-material-icons 快速而轻松地添加 Material Design Icon 。我们介绍了安装和基本用法，还介绍了一些高级用法，如自定义颜色和大小，以及包含多个图标。
使用 ember-cli-material-icons 可以方便灵活地管理和使用 Material Design Icon ，这对于前端开发人员而言非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673081e8991b448e3b0a