vue.js系列中的vue-fontawesome使用


Posted in Javascript onFebruary 10, 2018

折腾前言

目前工作主要使用 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.js系列中的vue-fontawesome使用

图标存放目录

为了开发方便,新建 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: 直接设置字体,改变不了大小;

总结

以上所述是小编给大家介绍的vue.js系列中的vue-fontawesome使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 #Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 #Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 #Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 #Javascript
Vue组件和Route的生命周期实例详解
Feb 10 #Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 #Javascript
You might like
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
详解Python的Lambda函数与排序
2016/10/25 Python
python实现dijkstra最短路由算法
2019/01/17 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
应届毕业生的自我鉴定
2013/11/13 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
中秋手机店促销方案
2014/06/16 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
早安问候语大全
2015/11/10 职场文书