Install libraries.
yarn add @fortawesome/fontawesome-svg-coreyarn add @fortawesome/free-solid-svg-iconsyarn add @fortawesome/vue-fontawesome
NOTE: npm equivalent of yarn add is npm install PACKAGE --save
Initialize
import { library } from '@fortawesome/fontawesome-svg-core';import { faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons';import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';library.add(faSpinner, faCheck);Vue.component('font-awesome-icon', FontAwesomeIcon);
Usage in vue Single File Components (.vue
)
- Rotating Spinner
- Check
<template> <div> <font-awesome-icon :icon="['fas', 'spinner']" pulse size="lg" /> <font-awesome-icon :icon="icon" /> <font-awesome-icon icon="computedIcon" /> </div></template><script>import { faCheck } from '@fortawesome/free-solid-svg-icons';export default { data () { return { icon: faCheck } }, computed: { computedIcon () { return faCheck } }}</script>
References: