Font Awesome 5 Vue component using SVG with JS
- Introduction
- Installation
- Add more styles or Pro icons
- Usage
- Features
- FAQ
Hey there! We're glad you're here...
If you've used Font Awesome in the past (version 4 or older) there are some things that you should learn before you dive in.
https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
This package is for integrating with Vue.js. If you aren't using Vue then it's not going to help you. Head over to our "Get Started" page for some guidance.
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started
This package, under the hood, uses SVG with JS and the @fortawesome/fontawesome-svg-core library. This implementation differs drastically from
the web fonts implementation that was used in version 4 and older of Font Awesome. You might head over there to learn about how it works.
https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core
See UPGRADING.md.
You might also be interested in the larger umbrella project UPGRADING.md
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome
Brands are separated into their own style and for customers upgrading from version 4 to 5 we have a limited number of Regular icons available.
Visit fontawesome.com/icons to search for free and Pro icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons
If you are a Font Awesome Pro subscriber you can install Pro packages.
$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
Using the Pro packages requires additional configuration.
Or with Yarn:
$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/vue-fontawesome
The following examples are based on a project configured with vue-cli.
src/main.js
import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faCoffee)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})src/App.js
<template>
<div id="app">
<font-awesome-icon icon="coffee" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>If you are using inline templates or HTML as templates you need to be careful to avoid self-closing tags.
See this issue on the Vue.js project
If you are writing these types of templates make sure and use valid HTML syntax:
<font-awesome-icon icon="coffee"></font-awesome-icon>A basic installation of Font Awesome has
the ability to automatically transform <i class="fas fa-coffee"></i> into
<svg class="...">...</svg> icons. This technology works with the browser's
DOM, requestAnimationFrame, and MutationObserver.
When using the @fortawesome/fontawesome-svg-core package this behavior is
disabled by default. This project uses that package so you will have to
explicitly enable it like this:
import { dom } from '@fortawesome/fontawesome-svg-core'
dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserverThe icon property of the FontAwesomeIcon component can be used in the following way:
<font-awesome-icon icon="spinner" />
<font-awesome-icon :icon="['fas', 'spinner']" /> # Same as aboveFor the above to work you must add the spinner icon to the library.
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
library.add(faSpinner)<font-awesome-icon :icon="['far', 'spinner']" />For the above to work you must add the regular spinner icon (Pro only) to the library.
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/pro-regular-svg-icons'
library.add(faSpinner)<template>
<div id="app">
<font-awesome-icon icon="appIcon" />
</div>
</template>
<script>
import { faChessQueen } from '@fortawesome/free-solid-svg-icons'
export default {
name: 'App',
computed: {
appIcon () {
return faChessQueen
}
}
}
</script>With Vue you can tell your component to resolve other component explicitly.
<template>
<div>
<font-awesome-icon :icon="myIcon" />
</div>
</template>
<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
export default {
name: 'MyComponent',
data () {
return {
myIcon: faSpinner
}
},
components: {
FontAwesomeIcon
}
}
</script>Explicitly selecting icons offer the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used.
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { faSpinner } from '@fortawesome/pro-light-svg-icons'
library.add(faCoffee, faSpinner)import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fab)This will add the entire brands style to your library. Be careful with this approach as it may be convenient in the beginning but your bundle size will be large. We highly recommend that you take advantage of subsetting through tree shaking.
Keeping the bundles small when using import { faCoffee } relies on
tree-shaking.
If you are not using a tool that supports tree shaking you may end up bundling more
icons than you intend. Here are some alternative import syntaxes:
import { library } from '@fortawesome/fontawesome-svg-core'
import faCoffee from '@fortawesome/free-solid-svg-icons/faCoffee'
import faSpinner from '@fortawesome/pro-light-svg-icons/faSpinner'
library.add(faCoffee, faSpinner)How does this work? We have individual icon files like
node_modules/@fortawesome/free-solid-svg-icons/faCoffee.js that contain just
that specific icon.
The following features are available as part of Font Awesome. Note that the syntax is different from our general web-use documentation.
To use the following examples you must first register your component so Vue is aware of it.
A good place to do this is in main.js or in the module you are calling new Vue(). Make sure you register the component and have added icons to your
library before you bootstrap your Vue application.
import Vue from 'vue'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from 'vue-fontawesome'
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)
Size:
<font-awesome-icon icon="spinner" size="xs" />
<font-awesome-icon icon="spinner" size="lg" />
<font-awesome-icon icon="spinner" size="6x" /><font-awesome-icon icon="spinner" fixed-width /><font-awesome-icon icon="spinner" rotation="90" />
<font-awesome-icon icon="spinner" rotation="180" />
<font-awesome-icon icon="spinner" rotation="270" />Flip horizontally, vertically, or both:
<font-awesome-icon icon="spinner" flip="horizontal" />
<font-awesome-icon icon="spinner" flip="vertical" />
<font-awesome-icon icon="spinner" flip="both" />Spin and pulse animation:
<font-awesome-icon icon="spinner" spin />
<font-awesome-icon icon="spinner" pulse /><font-awesome-icon icon="spinner" border /><font-awesome-icon icon="spinner" pull="left" />
<font-awesome-icon icon="spinner" pull="right" />Power Transforms:
<font-awesome-icon icon="spinner" transform="shrink-6 left-4" />
<font-awesome-icon icon="spinner" :transform="{ rotate: 42 }" /><font-awesome-icon icon="coffee" :mask="['far', 'circle']" /><font-awesome-icon icon="edit" symbol />
<font-awesome-icon icon="edit" symbol="edit-icon" /><font-awesome-layers class="fa-lg">
<font-awesome-icon icon="circle" />
<font-awesome-icon icon="check" transform="shrink-6" style="color: white;" />
</font-awesome-layers><font-awesome-layers full-width class="fa-4x">
<font-awesome-icon icon="queen"/>
<font-awesome-layers-text class="gray8" transform="down-2 shrink-8" value="Q" />
</font-awesome-layers>It's been brought up a few times that the array syntax used for specifying an icon from the library is a bit cumbersome. Initially, this does seem to be the case but we do have good reasons.
<font-awesome-icon far icon="spinner" />or
<font-awesome-icon prefix="far" icon="spinner" />The problem with this is that it does not provide a consistent or concise way to specify the mask.
<font-awesome-icon far icon="spinner" mask="circle" />Does the far apply to the icon or the mask? What is the prefix for the property it does not apply to?
Whereas this is consistent and concise:
<font-awesome-icon :icon="['far', 'spinner']" :mask="['fas', 'circle']" />Since icons are not always static but can change based on Vue component
methods or computed values we have to take that into consideration.
Icon properties end up being more verbose:
<font-awesome-icon :far="style === 'far'" :fal="style === 'fal'" :icon="icon" />vs.
<font-awesome-icon :icon="[style, icon]" />Or if you are using a prefix property it smells of needless boilerplate:
<template>
<font-awesome-icon :prefix="iconPrefix" :icon="iconName" />
</template>
<script>
export default {
computed: {
iconPrefix() {
return 'fas'
},
iconName() {
return 'coffee'
}
}
}
</script>vs.
<template>
<font-awesome-icon :icon="icon" />
</template>
<script>
export default {
computed: {
icon() {
return ['fas', 'coffee']
}
}
}
</script>If we allow prefix definition through a property and we also allow an icon to be specified as an object through direct import these two have a chance to argue with eachother. This could lead to some head-scratching when an icon doesn't appear in the expected style.
In the following case which style should be used (light from the icon definition or regular from the far boolean):
import { faSpinner } from `@fortawesome/pro-light-svg-icons`
<template>
<font-awesome-icon far :icon="faSpinner" />
</template>
<script>
export default {
data() {
return {
faSpinner
}
}
}
</script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent