vue-fa
Vue.J.
- Fontawesome 5和6
- Fontawesome SVG图标
- 摇晃的，只有导入的图标
- 无需CSS文件
- fontawesome分层
- Fontawesome Duotone图标
文件和示例。
安装
注意： vue-fa> = 3.x基于vue.js 3.x。
npm install vue-fa --save旧版本：
vue-fa@2 => vue@2 [文档]
npm install vue-fa@2
例如，通过[官方软件包] [fontawesome-npm]安装fontawesome图标，例如：
npm install @fortawesome/free-solid-svg-icons用法
< template >
< div >
< Fa :icon =" faFlag " />
</ div >
</ template >
< script >
import Fa from 'vue-fa'
import { faFlag } from '@fortawesome/free-solid-svg-icons'
export default {
components : {
Fa
} ,
setup ( ) {
return {
faFlag
}
}
}
</ script > 特性
< Fa
:icon =" faFlag "
size =" 2x "
color =" #ff0000 "
fw
pull =" left "
:scale =" 1.2 "
:translateX =" 0.2 "
:translateY =" 0.2 "
flip =" horizontal "
:rotate =" 90 "
spin
pulse
/>-
icon：Fontawesome包装的图标，例如：@fortawesome/free-solid-svg-icons -
size：string值xs，sm，lg或2x，3x，4x，...，${number}x -
color：string图标颜色，默认的currentColor -
fw：boolean固定宽度 pull：剩下string值left，right-
scale：number | string变换比例，单位为em，默认1 -
translateX：number | string变换位置x，单元为em，默认值0 -
translateY：number | string变换位置y，单位为em，默认值0 -
flip：string值horizontal，vertical，both -
rotate：number | string3090-30270180 -
spin：boolean旋转图标 pulse：boolean脉冲旋转图标
分层和文本
import Fa , {
FaLayers ,
FaLayersText ,
} from 'vue-fa' ; < FaLayers
size =" 4x "
pull =" left "
>
< Fa :icon =" faCertificate " />
< FaLayersText
:scale =" 0.25 "
:rotate =" -30 "
color =" white "
style =" font-weight: 900 "
>
NEW
</ FaLayersText >
</ FaLayers > FaLayers属性
size：string值xs，sm，lg或2x，3x，4x，...，${number}x-
pull：剩下string值left，right
FaLayersText属性
size：string值xs，sm，lg或2x，3x，4x，...，${number}x-
color：string图标颜色，默认的currentColor -
scale：number | string变换比例，单位为em，默认1 -
translateX：number | string变换位置x，单元为em，默认值0 -
translateY：number | string变换位置y，单位为em，默认值0 -
flip：string值horizontal，vertical，both -
rotate：number | string3090-30270180
Duotone图标
import { faFlag } from '@fortawesome/pro-duotone-svg-icons' < Fa
:icon =" faFlag "
primary-color =" red "
secondary-color =" #000000 "
:primary-opacity =" 0.8 "
:secondary-opacity =" 0.6 "
swap-opacity
/>Duotone图标主题
< script >
import Fa from 'vue-fa'
import { faFlag } from '@fortawesome/pro-duotone-svg-icons'
const theme = {
primaryColor : 'red' ,
secondaryColor : '#000000' ,
primaryOpacity : 0.8 ,
secondaryOpacity : 0.6 ,
}
</ script >
< Fa
icon = {faFlag}
v-bind =" theme "
/>下载源码
通过命令行克隆项目:
git clone https://github.com/Cweili/vue-fa.git