Vue FontAwesome Icons
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!
📦 Installation
Install the necessary packages using npm:
npm install vue-fontawesome-icon --save
npm install font-awesome --save
🚀 Quick Start Guide
- 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';
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>
📚 Features & Highlights
-
Simple icon usage: Just use the Font Awesome icon name, e.g., icon="file"
. No need to add the full class like fa fa-file
! 🚫
-
Fully customizable: Adjust the size and color of the icons easily with props.
💡 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" ). |
🤝 Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Thanks ❤️
License
MIT © License
Author
Made with ❤️ by Ajay Marathe