在用 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
个性签名:毁掉一个人最好的方式就是放纵他的缺点。

  近期评论

无论有多困难,都坚强地抬头挺胸,告诉所有人,你并非他们想象的那样不堪一击。

每个人心里都有一段伤痕,时间才是最好的疗剂。

人总是珍惜未得到的,而遗忘了所拥有的。

退一步,并不象征我认输;放手,并不表示我放弃;微笑,并不意味我快乐!

人海中再回首,朋友真诚依旧,生命里重逢,心境平和温柔,往事如风,岁月如歌,漫漫人生路,苍桑几许,幸福几何!