使用vue-cli整合vue-awesome集成步骤详解

Web前端 潘老师 4年前 (2020-09-14) 2263 ℃ (0) 扫码查看

我们在使用vue-cli脚手架开发vue项目时,经常会用到一些图标,虽然有一些框架自带了一些图标,不过数量有限,比如Element UI,里面的图标往往不能满足我们的需求,因此我们通常会整合vue-awesome来丰富图标的选择性。下面潘老师来带大家一起看看如何整合vue-awesome。

1、vue-awesome是基于 Vue.js 的强大 SVG 图标组件。已内置 Font Awesome 图标。

2、vue-awesome项目官网点击直达

3、font-awesome英文官网点击直达英文官网
font-awesome中文官网点击直达中文官网,不过有些icon名称与vue-awesome不匹配(我们不参考这个,应该参考英文的官网)

1、我这里使用vue-cli新建vue项目,命名为awesome-app

2、打开awesome-app项目终端,运行如下指令安装awesome-app

npm install vue-awesome

使用vue-cli整合vue-awesome集成步骤详解
3、在main.js中注册,修改main.js如下:

import Vue from 'vue'
import App from './App.vue'

// 一次引入全部图标
import 'vue-awesome/icons'
// 导入vue-awesome组件
import Icon from 'vue-awesome/components/Icon'
// 全局注册
Vue.component('icon', Icon)

new Vue({
  render: h => h(App),
}).$mount('#app')
提示:如果你考虑到打包体积,也可以用到哪些图标导入哪些图标,也可以局部注册,具体可参考官网说明,我们一般如上引用即可。

4、说明:
Font Awesome 5 开始把所有图标分成了多个包。Vue-Awesome 的图标都来自其中的免费图标,而免费图标分别来自 3 个不同的图标包:regular、solid 和 brands。因为 solid 下的免费图标数量最多,所以我们选择按如下方式来组织图标:

1)所有来自 solid 包的图标位于 vue-awesome/icons 目录下,且 name prop 的值不带前缀

2)来自 regularbrands 的图标位于 vue-awesome/icons/regularvue-awesome/icons/brands 目录下,且 name prop 的值需要添加前缀,例如 regular/flag 或者 brands/reddit

请访问 Font Awesome 官网以查询可以使用的 name 值,如 beer、file、camera 等。

5、icon组件属性说明:

1)name: string

图标名称。如果本组件没有用作图标堆栈的容器,那么这个字段是必须的。所有合法的值都对应于图标文件相对于 icons 目录的路径。请注意当你在 FontAwesome 官网查找到图标名词后,需要确认一下图标集的名称。比如,在 500px 这个图标的详情页会有一个 URL 参数 style=brands,故图标名称就是 brands/500px。

默认情况下,只能使用 FontAwesome 的免费图标,另外由于 solid 样式中的图标最多,我们将其设为了默认图标集,所以路径前缀可以省略。

当传入 null 时,整个组件将不会渲染。

2)scale: number|string

用来调整图标尺寸,默认值为 1。

3)spin: boolean

用来指定图标是否需要旋转。默认值为 false。(不能与 pulse 一同使用。)

4)pulse: boolean

用来指定图标是否有脉冲旋转的效果。默认值为 false。(不能与 spin 一同使用。)

5)inverse: boolean

为 true 时图标颜色将被设置为 #fff。默认值为 false。

6)flip: ‘vertical’|’horizontal’|’both’

用来指定图标是否需要翻转。

7)label: string

当指定时会设置图标的 aria-label

8)title: string

为图标设置标题。

label title 均不存在时,图标将会包含 role="presentation" 声明,无法从辅助设备访问。

1、修改App.vuetemplate如下:

<template>
  <div id="app">
    <!-- solid中图标,免前缀 -->
    solid中广告图标-放大2.5倍效果:<icon name="ad" scale="2.5"></icon>
    <br>
    <!-- regular中图标,需要前缀 -->
    regular中名片图标-旋转效果:<icon name="regular/address-card" spin="true" scale="2.5"></icon>
    <br>
    <!-- brands中图标,需要前缀 -->
    brands中支付宝图标-脉冲效果:<icon name="brands/alipay" pulse="true" scale="2.5"></icon>
  </div>
</template>

对应官网如下:
使用vue-cli整合vue-awesome集成步骤详解
使用vue-cli整合vue-awesome集成步骤详解
使用vue-cli整合vue-awesome集成步骤详解
2、运行测试效果:
使用vue-cli整合vue-awesome集成步骤详解

3,如果想自定义图标样式或者自定义图标,也可以参考官网即可


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1229.html
喜欢 (5)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】