The Ultimate Font Awesome Solution for Vue.js Developers!
Easily integrate Font Awesome icons into your Vue.js applications with this flexible and lightweight component!
Install the necessary packages using npm:
npm install vue-fontawesome-icon --save
npm install font-awesome --save- Step 1: Import Font Awesome and register the component globally in your
main.js(or similar entry file):
import Vue from 'vue';
import 'font-awesome/css/font-awesome.min.css'; // Import Font Awesome CSS
// Register the Vue FontAwesome component globally
Vue.component('VueFontawesome', require('vue-fontawesome-icon/VueFontawesome.vue').default);
new Vue({
render: h => h(App),
}).$mount('#app');- Step 2: Use the component in your templates:
<vue-fontawesome icon="file" size="2" color="red"></vue-fontawesome>-
Simple icon usage: Just use the Font Awesome icon name, e.g.,
icon="file". No need to add the full class likefa fa-file! π« -
Fully customizable: Adjust the size and color of the icons easily with props.
| Prop | Type | Description |
|---|---|---|
| icon | String | Set the Font Awesome icon name (e.g., "home", "user", "file"). You can browse icons here. |
| size | String | Specify the size of the icon (e.g., "2", "3"), which corresponds to rem units. |
| color | String | Provide any valid CSS color value (e.g., "red", "yellow", "#ffffff", "#ff0000"). |
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Thanks β€οΈ
MIT Β© License
Made with β€οΈ by Ajay Marathe