近日发现了一个好东西，分享给大家。之前我介绍过font-awesome图标库，但是好像没有适合vue使用的好方式。果然有人把font-awesome的图标做成了vue的插件，让其他开发人员可以欢乐的使用。

Vue-Awesome 是基于 Vue.js 的 SVG 图标组件，内置图标来自 Font Awesome。

安装

npm（推荐方式）

$ npm install vue-awesome

bower

$ bower install vue-awesome

手动安装

直接下载 dist/vue-awesome.js 并在 HTML 文件中引入：

<script src="path/to/vue-awesome/dist/vue-awesome.js"></script>

使用方法

<!-- 基础用法 -->
<icon name="beer"></icon>

<!-- 添加选项 -->
<icon name="sync" scale="2" spin></icon>
<icon name="comment" flip="horizontal"></icon>
<icon name="code-branch" label="Forked Repository"></icon><!-- 堆叠图标 --><icon label="No Photos">
<icon name="camera"></icon>
<icon name="ban" scale="2" class="alert"></icon>
</icon>

Font Awesome 5 开始把所有图标分成了多个包。Vue-Awesome 的图标都来自其中的免费图标，而免费图标分别来自 3 个不同的图标包：regular，solid，brands

。因为 solid 下的免费图标数量最多，所以我们选择按如下方式来组织图标：

所有来自 solid包的图标位于 vue-awesome/icons 目录下，且 name prop 的值不带前缀。

用 npm 与 vue-loader 基于 ES Module 引入（推荐用法）

好了，关于vue-awesome就和大家介绍到这里，有需要的朋友可以去试试使用。如果你觉得文章对你有帮助，欢迎点赞，转发。