vue使用Font Awesome的方法步骤


Posted in Javascript onFebruary 26, 2019

折腾前言

目前工作主要使用 vue.js 框架进行开发,自己又对 vue 不是那么了解,还是半桶的状态,所以得加紧步伐赶紧熟悉起来,这两天在使用脚手架 vue-cli 创建项目玩耍中,又一直对font-awesome锲而不舍,通过 github 了解到早有大牛搞出了 vue-awesome,因此就开始折腾了……

废话不多说,开搞!

准备工作

这个是作者的 github 地址:飞机

为了演示完整步骤,用脚手架新建个项目

正在创建中…

趁此闲话几句

这种方式使用有个好处就是,你可以自己自定义任何图标,即用 svg 格式输出,然后通过 Icon.register 去注册一个图标,注册方式如下:

如果图标很多的时候,DOM 中可能分散着大量的 svg 标签,这个不知道算不算缺点来着。

Icon.register({
  'chevron-right': {
    'width': 1280,
    'height': 1792,
    'paths': [{
      'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
    }]
  }
});

chevron-right 这个是该图标的名字,在使用的时候通过

<icon name="chevron-right"></icon> 去使用,至于样式按照正常定义即可。

paths 里面就是图标的绘制 svg 时候的路径信息

安装OK了,进入正题……

准备工作:

安装 vue-awesome

$ npm install vue-awesome --save

这个简单安装完成就OK。

结果预览

从图中看其实图标最后就是个 svg 标签

vue使用Font Awesome的方法步骤

图标存放目录

为了开发方便,新建 src/icons 目录集中存放图标js文件

$ cd src/

$ mkdir icons && cmod

这里 cmod 是 777 权限,由于是用的是虚拟机,所以经常出现权限问题,因此索性直接给 777(仅限本地开发)

icon 组件

下载 Icon.vue 文件

到这里下载 Icon.vue 文件,建议将整个项目 git 下来。

这个组件的作用就是,用来创建 <icon name="your icon name"></icon> 自定义标签。

然后把 Icon.vue 放到 components 目录下(放哪里可以自己决定)

src/icons 创建注册图标文件

这个目录集中放置所有 icon 的注册 js 文件

创建出口文件 index.js 这里面将引入所有图标 js 文件

// src/icons/index.js

import './chevron-right.js';

// ...... 其他需要的图标文件

以右键头图标为例:(chevron-right.js)

import Icon from '../components/Icon.vue';

Icon.register({
  'chevron-right': {
    'width': 1280,
    'height': 1792,
    'paths': [{
      'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
    }]
  }
});

项目入口 main.js 引用字体库

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

引入图标组件

import Icon from './components/Icon';

引入图标内容文件

import './icons/index.js';

然后将 Icon 注册成 vue 组件

Vue.component('icon', Icon);

注册完成之后,我们就可以在代码中直接使用 <icon></icon> 标签了

结束

使用步骤还是很简单的,经过上面的步骤之后我们就可以正常使用图标库了

总结下来步骤其实就下面几步

  1. import Icon.vue 组件
  2. new you-icon.js,里面通过 Icon.register 注册图标
  3. 【可选】 新建图标文件出口文件,这个在使用的图标很多的时候比较方便
  4. <icon name="you icon name"></icon> 引用图标
  5. 给图标设置样式(大小可以通过 transform: scale() 来设置)

PS: 直接设置字体,改变不了大小;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
js实现下拉菜单效果
Mar 01 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 #Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 #Javascript
JS实现电话号码的字母组合算法示例
Feb 26 #Javascript
JS实现的合并两个有序链表算法示例
Feb 25 #Javascript
JS实现判断有效的数独算法示例
Feb 25 #Javascript
js实现通过开始结束控制的计时器
Feb 25 #Javascript
js实现倒计时器自定义时间和暂停
Feb 25 #Javascript
You might like
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
Chrome Web App开发小结
2014/09/04 PHP
JavaScript 调试器简介
2009/02/21 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
图解javascript作用域链
2019/05/27 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python类的继承用法示例
2019/01/31 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
安全责任书范文
2014/03/12 职场文书
培训研修方案
2014/06/06 职场文书
售房委托书
2014/08/30 职场文书
社区务虚会发言材料
2014/10/20 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
导游词之山东红叶谷
2019/10/31 职场文书