vue-fa

npm install vue-fa

import Fa from 'vue-fa'
import { faFlag } from '@fortawesome/free-solid-svg-icons'

export default {
  components: {
    Fa
  },

  data() {
    return {
      faFlag
    }
  }
}

<Fa :icon="faFlag" /> Flag

<div style="font-size: 3em; color: tomato">
  <Fa :icon="faFlag" />
</div>

<Fa :icon="faFlag" size="xs" />
<Fa :icon="faFlag" size="sm" />
<Fa :icon="faFlag" size="lg" />
<Fa :icon="faFlag" size="2x" />
<Fa :icon="faFlag" size="2.5x" />
<Fa :icon="faFlag" size="5x" />
<Fa :icon="faFlag" size="7x" />
<Fa :icon="faFlag" size="10x" />

<div>
  <Fa :icon="faHome" fw style="background: mistyrose" /> Home
</div>
<div>
  <Fa :icon="faInfo" fw style="background: mistyrose" /> Info
</div>
<div>
  <Fa :icon="faBook" fw style="background: mistyrose" /> Library
</div>
<div>
  <Fa :icon="faPencilAlt" fw style="background: mistyrose" /> Applications
</div>
<div>
  <Fa :icon="faCog" fw style="background: mistyrose" /> Settins
</div>

<Fa :icon="faQuoteLeft" pull="left" size="2x" />
<Fa :icon="faQuoteRight" pull="right" size="2x" />
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

<Fa :icon="faMagic" size="4x" :rotate="90" style="background: mistyrose"/>
<Fa :icon="faMagic" size="4x" :rotate="180" style="background: mistyrose"/>
<Fa :icon="faMagic" size="4x" rotate="270" style="background: mistyrose"/>
<Fa :icon="faMagic" size="4x" rotate="30" style="background: mistyrose"/>
<Fa :icon="faMagic" size="4x" rotate="-30" style="background: mistyrose"/>
<Fa :icon="faMagic" size="4x" flip="vertical" style="background: mistyrose"/>
<Fa :icon="faMagic" size="4x" flip="horizontal" style="background: mistyrose"/>
<Fa :icon="faMagic" size="4x" flip="both" style="background: mistyrose"/>
<Fa :icon="faMagic" size="4x" flip="both" style="background: mistyrose"/>

import {
  faCamera,
  faFireAlt,
  faBusAlt,
  faFillDrip,
} from '@fortawesome/pro-duotone-svg-icons'

<Fa :icon="faCamera" size="3x" />
<Fa :icon="faFireAlt" size="3x" />
<Fa :icon="faBusAlt" size="3x" />
<Fa :icon="faFillDrip" size="3x" />

<Fa :icon="faCamera" size="3x" />
<Fa :icon="faCamera" size="3x" swap-opacity />
<Fa :icon="faFireAlt" size="3x" />
<Fa :icon="faFireAlt" size="3x" swap-opacity />
<Fa :icon="faBusAlt" size="3x" />
<Fa :icon="faBusAlt" size="3x" swap-opacity />
<Fa :icon="faFillDrip" size="3x" />
<Fa :icon="faFillDrip" size="3x" swap-opacity />

<Fa :icon="faBusAlt" size="3x" :secondary-opacity=".2" />
<Fa :icon="faBusAlt" size="3x" :secondary-opacity=".4" />
<Fa :icon="faBusAlt" size="3x" :secondary-opacity=".6" />
<Fa :icon="faBusAlt" size="3x" :secondary-opacity=".8" />
<Fa :icon="faBusAlt" size="3x" :secondary-opacity="1" />

<Fa :icon="faBusAlt" size="3x" :primary-opacity=".2" />
<Fa :icon="faBusAlt" size="3x" :primary-opacity=".4" />
<Fa :icon="faBusAlt" size="3x" :primary-opacity=".6" />
<Fa :icon="faBusAlt" size="3x" :primary-opacity=".8" />
<Fa :icon="faBusAlt" size="3x" :primary-opacity="1" />

<Fa :icon="faBusAlt" size="3x" primary-color="gold" />
<Fa :icon="faBusAlt" size="3x" primary-color="orangered" />
<Fa :icon="faFillDrip" size="3x" secondary-color="limegreen" />
<Fa :icon="faFillDrip" size="3x" secondary-color="rebeccapurple" />
<Fa :icon="faBatteryFull" size="3x" primary-color="limegreen" secondary-color="dimgray" />
<Fa :icon="faBatteryQuarter" size="3x" primary-color="orange" secondary-color="dimgray" />

<Fa :icon="faBook" size="3x" :secondary-opacity="1" primary-color="lightseagreen" secondary-color="linen" />
<Fa :icon="faBookSpells" size="3x" :secondary-opacity="1" primary-color="mediumpurple" secondary-color="linen" />
<Fa :icon="faBookMedical" size="3x" :secondary-opacity="1" primary-color="crimson" secondary-color="linen" />
<Fa :icon="faBookUser" size="3x" :secondary-opacity="1" primary-color="peru" secondary-color="linen" />
<Fa :icon="faToggleOff" size="3x" :secondary-opacity="1" primary-color="white" secondary-color="gray" />
<Fa :icon="faToggleOn" size="3x" :secondary-opacity="1" primary-color="dodgerblue" secondary-color="white" />
<Fa :icon="faFilePlus" size="3x" :secondary-opacity="1" primary-color="white" secondary-color="limegreen" />
<Fa :icon="faFileExclamation" size="3x" :secondary-opacity="1" primary-color="white" secondary-color="gold" />
<Fa :icon="faFileTimes" size="3x" :secondary-opacity="1" primary-color="white" secondary-color="tomato" />

<Fa :icon="faCrow" size="3x" :secondary-opacity="1" primary-color="dodgerblue" secondary-color="gold" />
<Fa :icon="faCampfire" size="3x" :secondary-opacity="1" primary-color="sienna" secondary-color="red" />
<Fa :icon="faBirthdayCake" size="3x" :secondary-opacity="1" primary-color="pink" secondary-color="palevioletred" />
<Fa :icon="faEar" size="3x" :secondary-opacity="1" primary-color="sandybrown" secondary-color="bisque" />
<Fa :icon="faCorn" size="3x" :secondary-opacity="1" primary-color="mediumseagreen" secondary-color="gold" />
<Fa :icon="faCookieBite" size="3x" :secondary-opacity="1" primary-color="saddlebrown" secondary-color="burlywood" />

const themeRavenclaw = {
  secondaryOpacity: 1,
  primary-color: '#0438a1',
  secondary-color: '#6c6c6c',
}

<Fa :icon="faHatWizard" size="3x" v-bind="themeRavenclaw" />
<Fa :icon="faFlaskPotion" size="3x" v-bind="themeRavenclaw" />
<Fa :icon="faWandMagic" size="3x" v-bind="themeRavenclaw" />
<Fa :icon="faScarf" size="3x" v-bind="themeRavenclaw" />
<Fa :icon="faBookSpells" size="3x" v-bind="themeRavenclaw" />