vue-fa
v4.0.2
Published
Tiny FontAwesome component for Vue.js
Downloads
2,150
Maintainers
Readme
vue-fa
Tiny FontAwesome component for Vue.js.
- FontAwesome version 5 and 6
- FontAwesome svg icons
- Tree-shakable, only import used icons
- No CSS file required
- FontAwesome layering
- FontAwesome duotone icons
Installation
Notice: vue-fa >= 3.x is based on Vue.js 3.x.
npm install vue-fa --save
Old versions:
vue-fa@2 => vue@2 [Documents]
npm install vue-fa@2
Install FontAwesome icons via [official packages][fontawesome-npm], for example:
npm install @fortawesome/free-solid-svg-icons
Usage
<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>
Properties
<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
: icon from FontAwesome packages, for example:@fortawesome/free-solid-svg-icons
size
:string
valuesxs
,sm
,lg
or2x
,3x
,4x
, ...,${number}x
color
:string
icon color, defaultcurrentColor
fw
:boolean
fixed widthpull
:string
valuesleft
,right
scale
:number | string
transform scale, unit isem
, default1
translateX
:number | string
transform position X, unit isem
, default0
translateY
:number | string
transform position Y, unit isem
, default0
flip
:string
valueshorizontal
,vertical
,both
rotate
:number | string
values90
,180
,270
,30
,-30
...spin
:boolean
spin iconspulse
:boolean
pulse spin icons
Layering & Text
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
Properties
size
:string
valuesxs
,sm
,lg
or2x
,3x
,4x
, ...,${number}x
pull
:string
valuesleft
,right
FaLayersText
Properties
size
:string
valuesxs
,sm
,lg
or2x
,3x
,4x
, ...,${number}x
color
:string
icon color, defaultcurrentColor
scale
:number | string
transform scale, unit isem
, default1
translateX
:number | string
transform position X, unit isem
, default0
translateY
:number | string
transform position Y, unit isem
, default0
flip
:string
valueshorizontal
,vertical
,both
rotate
:number | string
values90
,180
,270
,30
,-30
...
Duotone Icons
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 Icons Theme
<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"
/>