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