介绍
vue-material-icon 是一个针对 Vue.js 的开源项目。这个项目提供了一套易于使用、精美奇妙的 Material Design 图标集。Vue.js 是一个非常流行的 JavaScript 框架，它有大量的开源项目可以使用，vue-material-icon 则是其中之一。今天，我们就来学习一下如何使用它。
安装
- 确保你已经安装了当前版本的 Vue.js 框架；
- 在命令行工具中输入以下命令，安装 npm 包：
npm install vue-material-icon
- 如果你使用的是 yarn 包管理器，可以按照如下方式安装 npm 包：
yarn add vue-material-icon
基本用法
- 在你的 Vue.js 项目根目录下的
main.js文件引入以下代码：
import Vue from 'vue' import VueMaterialIcon from 'vue-material-icon' Vue.use(VueMaterialIcon)
- 在你的 vue 组件中引入所需的 icon：
<vue-material-icon icon="material-icon-name"></vue-material-icon>
这里，material-icon-name 可以替换成你需要的 icon 名称。例如：
<vue-material-icon icon="person"></vue-material-icon>
这样便渲染出了一个 person 图标。
高级用法
在上述基本用法中，我们已经演示了如何使用 vue-material-icon，但是这样的 font icon 虽然精美，但是存在着无法更改颜色的缺陷。因此，我们需要使用 SVG icon 来解决这个问题。
- 更改 icon 使用的前缀：
VueMaterialIcon.props.prefix.default = 'mdiSvg' // 将 font icon 修改为 SVG icon
- 在 vue 组件中引入所需的 icon：
<vue-material-icon icon="mdiSvg-icon-name" class="custom-class" color="#FF0000" size="48"></vue-material-icon>
这里，mdiSvg-icon-name 可以替换成你需要的 icon 名称。例如：
<vue-material-icon icon="mdiSvg-account" class="custom-class" color="#FF0000" size="48"></vue-material-icon>
这样便渲染出了一个带有自定义颜色、自定义大小、加入自定义 class 的带有 SVG icon 的组件。
示例代码
-- -------------------- ---- -------
----------
-----
------------------ ----------------------------------
------------------ -------------- -------------------- --------------- ------------------------------
------
-----------
--------
------ --- ---- -----
------ --------------- ---- -------------------
------------------------
------------------------------------ - --------
------ ------- -
----- -----------
----------- -
---------------
-
-
---------
-------
------------- -
---------- -----
-
--------在这个示例代码中，我们演示了使用 vue-material-icon 渲染 font icon 和 SVG icon 的不同方式，以及如何加入自定义颜色、自定义大小、加入自定义 class 的自定义渲染方式。
结语
npm 包 vue-material-icon 为 Vue.js 开发者提供了一套易于使用、精美奇妙的 Material Design 图标集，让开发者轻松实现自己所需的图标渲染方式。我们希望这篇文章能够帮助你更好地理解并使用这个库，成为一名更加优秀的前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be481e8991b448e59d5