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

Vue-Awesome

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+.

Features:

  • 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.

Example

Install via yarn:

yarn add vue-awesome

Usage

// 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>
        <br>
        <!-- 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.