Dig Deeper
You can take Font Awesome with Vue to the next level by learning a little more about the behind-the-scenes stuff that we do to load icons and fine-tuning it to exactly what you need.
Setting a default style
Default style using a kit
Ensure the following have been installed in your Vue App:
- the Font Awesome SVG core
- the icon packages have been installed using a kit
- the Font Awesome Vue component
In the main.js
file:
- set the
config.familyDefault
to a family of your choice - set the
config.styleDefault
to the style of your choice
import './assets/main.css'
import { createApp } from 'vue'import { createPinia } from 'pinia'
import App from './App.vue'import router from './router'
/* import the fontawesome core */import { library, config } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */import { all } from '@awesome.me/kit-KIT_CODE'
/* add icons to the library */library.add(...all)
/* set the default style to something other than classic solid */config.familyDefault = "classic";config.styleDefault = "duotone";
const app = createApp(App)
app.component('font-awesome-icon', FontAwesomeIcon)app.use(createPinia())app.use(router)
app.mount('#app')
Now you are ready to add your icons and have them render using the default style you’ve set (Duotone in this example’s case):
// no need to specify the style again, it was set in the main.js file - these icons will all render using the Duotone style<font-awesome-icon icon="fish" /><font-awesome-icon icon="frog" size="sm" bounce /><font-awesome-icon icon="dog" size="3x" /><font-awesome-icon icon="cat" size="2x" flip="horizontal" />
// no need to specify the style again, it was set in the main.js file - these icons will all render using the Kit Custom Icons<font-awesome-icon icon="fa-my-icon" /><font-awesome-icon icon="fa-my-other-icon" size="sm" bounce /><font-awesome-icon icon="fa-your-icon" size="3x" />
Default style using an icon package
Ensure the following have been installed in your Vue app:
In the main.js
file:
- set the
config.familyDefault
to a family of your choice - set the
config.styleDefault
to the style of your choice
import { createApp } from "vue";import App from "./App.vue";
// import the fontawesome coreimport { library } from "@fortawesome/fontawesome-svg-core";
// import fontawesome icon componentimport { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// import config so we can set a default styleimport { config } from "@fortawesome/fontawesome-svg-core";
// import icon style(s)import { fad } from "@fortawesome/pro-duotone-svg-icons";
// add the icon style(s) you have installed to the librarylibrary.add(fad);
// set the default styleconfig.familyDefault = "classic";config.styleDefault = "duotone";
// add FontAwesomeIcon to the Vue componentcreateApp(App) .component("font-awesome-icon", FontAwesomeIcon) .use(store) .use(router) .mount("#app");
import Vue from "vue";import App from "./App";
// import the fontawesome coreimport { library } from "@fortawesome/fontawesome-svg-core";
// import the fontawesome icon componentimport { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// import config so we can set a default styleimport { config } from "@fortawesome/fontawesome-svg-core";
// import icon style(s)import { fad } from "@fortawesome/pro-duotone-svg-icons";
// add the icon style(s) you have installed to the librarylibrary.add(fad);
// add FontAwesomeIcon to the Vue componentVue.component("font-awesome-icon", FontAwesomeIcon);
// set the default styleconfig.familyDefault = "classic";config.styleDefault = "duotone";
Vue.config.productionTip = false;
new Vue({ el: "#app", components: { App }, template: "<App/>",});
Performance
We’ve worked hard to make Font Awesome as performant and lean as possible - by splitting styles up, using tree shaking, keeping code as light as possible - but you may have specific needs for your project and that’s where these tips may come in handy.
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.
If the tree shaking isn’t automatically working for you, here is an 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);
Note that the icon name is added again at the end of each line. 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.
Importing an entire style
If you’re using a lot of icons all in one style, you can import the entire style - but use with caution as it can be thousands of icons.
import { fas } from "@fortawesome/free-solid-svg-icons";
library.add(fas);
This will add the entire set of free solid style icons 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.
Advanced-Level Adding Icons
Computed property
You can explicitly define an icon through a computed property:
<script setup lang="tsx">import { ref, reactive, computed } from 'vue'import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'import { faSquare, faSquareCheck } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
const buttonIcon = computed(() => { return faSquare})</script>
<template> <FontAwesomeIcon :icon="buttonIcon" /></template>
Alternative component property
With Vue, you can tell your component to resolve another component explicitly.
<script setup lang="tsx">import { ref, reactive, computed } from 'vue'import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'import { faSquare, faSquareCheck } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
const checked = ref(false)
const buttonIcon = computed(() => { return (checked.value) ? faSquareCheck : faSquare})
function toggleButton () { checked.value = !checked.value}</script>
<template> <FontAwesomeIcon :icon="buttonIcon" @click="toggleButton" /></template>
The More You Know
Why a library?
Explicitly selecting icons offers 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 used in an average app or project.
The Font Awesome Javascript API
Are you hungry for more knowledge? You can deep dive into our Font Awesome SVG Core and Javascript API docs.