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 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
Vue的生命周期操作示例
Sep 17 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 file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
laravel学习教程之关联模型
2016/07/30 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
vue中@change兼容问题详解
2019/10/25 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
Python的UTC时间转换讲解
2019/02/26 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python中如何导入类示例详解
2019/04/17 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
廉政教育心得体会
2014/01/01 职场文书
中国梦的演讲稿
2014/01/08 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
小学生毕业评语
2014/12/26 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
会计做账心得体会
2016/01/22 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis