在用 vue-cli4 创建的 vue2.x 项目中通过 vue-fontawesome 使用 fontawesome5

    

在用 vue-cli4 创建的 vue2.x 项目中通过 vue-fontawesome 使用 fontawesome5

前言

本文写于2020年1月11日,仅提供最基本的引用方法,参考fontawesome5英文官方文档和vue-fontawesome英文官方文档。

正文

在vue项目中使用fontawesome5图标,不需要引入fontawesome组件,直接引入vue-fontawesome和相关组件就可以了。

第1步:npm install

在vue项目目录中执行下面的安装命令:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome

其中:

@fortawesome/free-solid-svg-icons是solid风格图标

@fortawesome/free-regular-svg-ico是regular风格图标

@fortawesome/free-brands-svg-icons是品牌图标

这三个可以根据项目实际需要选择性安装,当然如果有专业版授权,也可以引入诸如@fortawesome/pro-duotone-svg-icons等专业版图标。

第2步:import

在项目代码中适当的位置使用以下方式将组件引入到页面中,vue-fontawesome官方推荐在main.js中引入(本文作者本人为了方便而在main.js同级创建了fontawesome.js文件,然后在main.js中引入fontawesome.js):

import Vue from 'vue'

import { library } from '@fortawesome/fontawesome-svg-core'
// 事实上官方不推荐使用下面的方式将整个库引入到项目中
import { fas } from '@fortawesome/free-solid-svg-icons'
// 如果确实需要下面的图标就把注释取消
// import { far } from '@fortawesome/free-regular-svg-icons'
// import { fab } from '@fortawesome/free-brands-svg-icons'

import {
  FontAwesomeIcon,
  FontAwesomeLayers,
  FontAwesomeLayersText
} from '@fortawesome/vue-fontawesome'

// library.add与import对应
library.add(fas)
// library.add(far)
// library.add(fab)

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

第3步:use,礼成

在vue组件或html文件中需要使用图标的位置使用下面的方式将图标插入到文档中(不要使用这样的方式,在vue中行不通也不建议这样用):

<!--
icon属性设置动态绑定(不带冒号)时,属性值就是图标名称,默认使用fas库
-->
<font-awesome-icon icon="spinner" />
<!--
icon属性设置动态绑定(带冒号)时,属性值为数组,
数组第2个元素是图标库,如fas、far、fab等
数组第2个元素是图标名称
-->
<font-awesome-icon :icon="['fas', 'angle-double-left']" />
<!--
fixed-width属性用于让图标统一宽度
-->
<font-awesome-icon :icon="['fas', 'angle-double-right']" fixed-width />
<!--
通过size属性设置图标大小
-->
<font-awesome-icon icon="spinner" size="xs" />
<font-awesome-icon icon="spinner" size="lg" />
<font-awesome-icon icon="spinner" size="6x" />
<!--
通过rotation属性控制图标的呈现角度
-->
<font-awesome-icon icon="spinner" rotation="270" />
<!--
通过flip属性控制控制图标翻转
-->
<font-awesome-icon icon="spinner" flip="horizontal" />
<font-awesome-icon icon="spinner" flip="vertical" />
<font-awesome-icon icon="spinner" flip="both" />
<!--
通过spin和pulse属性让图标旋转、跳动
-->
<font-awesome-icon icon="spinner" spin />
<font-awesome-icon icon="spinner" pulse />
<!-- ……不一一列举了,更多的花样就参考官方文档好了 -->

后记

事实上,vue-fontawesome的开发者不建议我们简单粗暴的一次性把整个图标库引入到项目中,这样做违背vue框架组件化开发和按需引入的原则,下面是文档原文:

This(Import entire styles) will add the entire brands style to your library. Be careful with this approach as it may be convenient in the beginning but your bundle size will be large. We highly recommend that you take advantage of subsetting through tree shaking.

大概意思就是说这种引入方式虽然用起来会很方便,但是会在发布时让包体积很大,所以官方推荐采用组件化引用的方式。具体使用方法如下:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faSpinner, faAlignLeft } from '@fortawesome/free-solid-svg-icons';
library.add(faSpinner, faAlignLeft);

对应的vue文件或html文件写法:

<font-awesome-icon :icon="['fas', 'spinner']" />
<font-awesome-icon :icon="['fas', 'align-left']" />

注意到了吧,其实就是“用一个图标便引入一个图标”。

好了,参考本文方法可以实现在vue前端项目中自由使用fontawesome5中的免费版本图标,在官方文档中可以获得更多有用的信息。

fontawesome5官方文档(vue.js):https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs
vue-fontawesome官方文档:https://www.npmjs.com/package/@fortawesome/vue-fontawesome

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://aiylqy.com
个性签名:毁掉一个人最好的方式就是放纵他的缺点。

  近期评论

快乐地过是一天,不快乐地过也是一天,我为什么不快快乐乐地过每一天呢?

岂能尽随人愿,但求无愧我心。

在你内心深处,还有无穷的潜力,有一天当你回首看时,你就会知道这绝对是真的。

活在当下,别在怀念过去或者憧憬未来中浪费掉你现在的生活。

挫折时,要像大树一样,被砍了,还能再长;也要像杂草一样,虽让人践踏,但还能勇敢地活下去。