vue3使用Font-Awesome
如题,vue3使用font-awesome5有些需要注意的地方一、安装官方提供了很多安装使用方式,这里仅展示一种Git地址:vue-fontawesome1、npm安装Install the core package and icon content.安装核心包和图标npm i --save @fortawesome/fontawesome-svg-corenpm i --save @fortaw
Font-Awesome已经更新到6.0.0了,6与5的安装相同。官网提供了详细的安装、使用教程:
Font-Awesome: Use with Vue
一、安装
官方提供了很多安装使用方式,这里仅展示一种
Git地址:vue-fontawesome
1、npm安装
- Install the core package and icon content 安装核心包和图标
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
- Install this Vue component 安装vue组件
npm i --save @fortawesome/vue-fontawesome@prerelease
- Add more styles or Pro icons 安装更多样式图标(非必要)
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
付费用户可安装额外的样式包(即 light、thin、duotone)
2、或用yarn安装
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome@prerelease
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons
二、使用
1、全局注册组件
Git上给出的实例:
import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faUserSecret)
createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')
导入FontAwesomeIcon组件并全局注册;
导入faUserSecret图标,并加入到library,注意,这个实例仅仅只是导入了一个图标
导入全部图标是不被推荐的,会导入全部数千个图标,打包后体积过大
2、使用图标
在这里使用其他图标是无效的,因为之前仅导入了faUserSecret
<template>
<div id="app">
<font-awesome-icon icon="user-secret" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
fa官网:Icons | Font Awesome
同样一个图标,拥有四种样式,solid, regular, light, duotone,后两种全部需要付费
solid:
<i class="fas fa-angry"></i>
regular:<i class="far fa-angry"></i>
light:<i class="fal fa-angry"></i>
duotone:<i class="fad fa-angry"></i>
此外还有Brands类图标也是免费的
回到实例,需要注意的是,之前导入使用的图标为“faUserSecret”
而使用时,用的是icon="user-secret"
,没有指定图标类型
可以指定icon类型::icon="['fas', 'user-secret']"
,未指定类型时,默认是solid类型
3、使用同一图标的多个样式
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'
import { faCoffee as fadCoffee } from '@fortawesome/pro-duotone-svg-icons'
library.add(fasCoffee, farCoffee, falCoffee, fadCoffee)
<font-awesome-icon :icon="['fas', 'coffee']"/>
<font-awesome-icon :icon="['far', 'coffee']"/>
<font-awesome-icon :icon="['fal', 'coffee']"/>
<font-awesome-icon :icon="['fad', 'coffee']"/>
导入全部图标(不建议):
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fas, fab)
三、特性
font-awesome5的诸多特性可以将图标玩出花来
这里就不占了,直接看Git或官网吧
vue-fontawesome: Features
npmjs: vue-fontawesome: Features
四、参考链接
官网:Font-Awesome Icons
非vue使用教程:Font-Awesome中文网
更多推荐
所有评论(0)