JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 764
  • Score
    100M100P100Q92162F
  • License MIT

Tiny FontAwesome component for Vue.js

Package Exports

  • vue-fa
  • vue-fa/dist/vue-fa.cjs.js
  • vue-fa/dist/vue-fa.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-fa) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-fa

npm bundle size npm downloads license

github build coverage

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

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