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

Documents and examples.

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"></Fa>
  </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
></Fa>

• icon: icon from FontAwesome packages, for example: @fortawesome/free-solid-svg-icons
• size: string values xs, sm, lg or 2x, 3x, 4x, …, ${number}x
• color: string icon color, default currentColor
• fw: boolean fixed width
• pull: string values left, right
• scale: number | string transform scale, unit is em, default 1
• translateX: number | string transform position X, unit is em, default 0
• translateY: number | string transform position Y, unit is em, default 0
• flip: string values horizontal, vertical, both
• rotate: number | string values 90, 180, 270, 30, -30 …
• spin: boolean spin icons
• pulse: boolean pulse spin icons

Layering & Text

import Fa, {
  FaLayers,
  FaLayersText,
} from 'vue-fa';

<FaLayers
  size="4x"
  pull="left"
>
  <Fa :icon="faCertificate" ></Fa>
  <FaLayersText
    :scale="0.25"
    :rotate="-30"
    color="white"
    style="font-weight: 900"
  >
    NEW
  </FaLayersText>
</FaLayers>

FaLayers Properties

• size: string values xs, sm, lg or 2x, 3x, 4x, …, ${number}x
• pull: string values left, right

FaLayersText Properties

• size: string values xs, sm, lg or 2x, 3x, 4x, …, ${number}x
• color: string icon color, default currentColor
• scale: number | string transform scale, unit is em, default 1
• translateX: number | string transform position X, unit is em, default 0
• translateY: number | string transform position Y, unit is em, default 0
• flip: string values horizontal, vertical, both
• rotate: number | string values 90, 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
></Fa>

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"
></Fa>