Font Awesome component for Vue.js, using inline SVG.


In Vue.js projects it is common to use plugins and external resources to achive functionalities which otherwise would be built from scratch. In this post Vue-Awesome is reviewed, a component for Vue.js, using inline SVGs, to add Font Awesome to your projects, built upon Font Awesome v4.5.0 and dependent on Vue.js v2.0.1+.


  • Configure your own styling, dynamic sizing & colors
  • Register custom icons
  • More advanced cases (If the svg has more than one path or polygon, and/or you want to have a predefined style)

Check out the demo here.

Below there is a small usage example using the vue-awesome component.


Install via yarn:

yarn add vue-awesome


// import all icons if you don't care about bundle size
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'

// globally (in your main .js file)
Vue.component('icon', Icon)
<!-- basic -->
        <icon name="beer" scale="8"></icon>

<!-- with options -->
        <icon name="sync" spin scale="3"></icon>
        <icon name="sync" flip="horizontal" scale="3"></icon>
        <icon name="sync" label="Forked Repository" spin scale="3"></icon>
        <!-- stacked icons -->
        <icon name="camera" scale="5" spin color="#41b883"></icon>
        <icon name="underline" scale="5"></icon>
        <icon name="ban" scale="5"></icon>

Some icons are different.

Related projects to this one:

This projects is available in a repository here.