vue使用字体Awesome的方法步骤

抛出前言

目前vue.js的框架主要是用来开发的，对vue了解不多，得赶紧加紧熟悉。在过去的两天里，我一直坚持使用font-awesome，同时使用脚手架vue-cli创建项目。我通过github了解到一头大牛已经让vue-awesome变得很棒了，所以我开始折腾.

废话少说，开始吧！

准备工作/即将工作

这是作者的github地址：飞机

要演示完整的步骤，请创建一个带有脚手架的新项目

正在创建.

借此机会八卦一下

使用这种方法的一个好处是，您可以自己自定义任何图标，即以svg格式输出，然后通过icon注册一个图标。

如果图标多，可能会有很多svg标签散落在DOM中。不知道这算不算劣势。

icon . register({ ' chevron-right ' : { ' width ' : 1280，' height': 1792，' path ' :[{ ' d ' : ' M1107 877 l-742 742 q-19 19-45 19t-45-19l-166-166 q-19-19-45 t19-45l 531-5331“人字形-右侧”是图标的名称，由使用

图标名称='人字形-右侧'/图标，至于样式，可以定义为普通。

路径包含绘制svg时图标的路径信息

好了，开始工作.

准备工作：

安装vue-棒极了

$ npm安装vue-真棒-保存

这个简单的安装就可以了。

结果预览

从图中可以看出，图标实际上是末尾的一个svg标签

图标存储目录

为了方便开发，新创建的src/icons目录集中存储了icon js文件

$ cd src/

$ mkdir图标cmod

这里，cmod是777。因为使用的是虚拟机，所以经常会出现权限问题，不如直接交给777(只用于本地开发)

图标组件

下载图标文件

在这里下载Icon.vue文件，建议下载整个项目。

该组件的功能是创建图标名称='您的图标名称'/图标自定义标记。

然后将Icon.vue放在组件目录中(可以决定放在哪里)

在src/图标中创建注册图标文件

该目录设置图标的所有注册的js文件

创建一个导出文件index.js，它将引入所有图标js文件

//src/icons/index.jsimport '。/chevron-right . js '；//.其他需要的图标文件以右击图标为例：(chevron-right.js)

“从导入图标”./components/icon . vue '；icon . register({ ' chevron-right ' : { ' width ' : 1280，' height': 1792，' path ' :[{ ' d ' : ' M1107 877 l-742 742 q-19 19-45 19t-45-19l-166-166 q-19-19-45 t19-45l 531-5331项目条目main.js引用了字体库

项目的main.js入口文件中引入了vue-awesome库和icons/index.js文件。

介绍图标组件

从“”导入图标。/组件/图标'；

导入图标内容文件

“进口”。/icons/index . js '；

然后将图标注册为vue组件

Vue.component('icon '，Icon)；

注册完成后，我们可以直接在代码中使用图标/图标标签

目标

使用步骤还是很简单的。完成上述步骤后，我们就可以正常使用图标库了

总而言之，步骤实际上如下

导入Icon.vue组件new you-Icon.js，其中icon是通过Icon.register注册的【可选】创建一个新的icon文件的导出文件，使用图标多的时候很方便。icon name='you icon name'/icon指为图标设置样式的图标(大小可以通过transform: scale())来设置)，PS:直接设置字体，但不能改变大小；

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。