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:
- Vue-Octicon by the same author of Vue-Awesome.
- SVG files are generated using fa2svg by @riobard.
This projects is available in a repository here.