# vue-fontawesome-icon

> 🍺 Hi there, Font-awesome icons for Vue.js lovers

Latest version **1.3.2** (published 2024-10-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-fontawesome-icon
pnpm add vue-fontawesome-icon
yarn add vue-fontawesome-icon
bun add vue-fontawesome-icon
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2024-10-06 |
| First published | 2019-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 8 |
| Author | ajay marathe. |
| Maintainers | ajay1098 |
| Keywords | vue-fontawesome, vuejs-fontawesome, vue-awesome, font-awesome, vue-icons, vue-font-awesome, font-awesome-icons, vue-fontawesome-icon, vuejs, fontawesome, vuejs, @fortawesome, vue-fa-icon, fa-fa-icon-vue |

## Links

- npm: https://www.npmjs.com/package/vue-fontawesome-icon
- Repository: https://github.com/ajaymarathe/vue-fontawesome
- Homepage: https://github.com/ajaymarathe/vue-fontawesome#readme
- Issues: https://github.com/ajaymarathe/vue-fontawesome/issues
- npm.io page: https://npm.io/package/vue-fontawesome-icon

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.5

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 1.3.2 (latest) — 2024-10-06
- 1.3.1 — 2024-10-06
- 1.2.1 — 2024-10-06
- 1.3.0 — 2020-02-17
- 1.2.0 — 2020-02-17
- 1.1.0 — 2019-10-31
- 1.0.0 — 2019-10-14
- 0.7.0 — 2019-10-02
- 0.6.0 — 2019-10-02
- 0.5.0 — 2019-10-02
- 0.4.0 — 2019-10-02
- 0.3.0 — 2019-10-02
- 0.2.0 — 2019-10-02
- 0.1.0 — 2019-10-01

## README

# Vue FontAwesome Icons

The Ultimate Font Awesome Solution for Vue.js Developers!

[![NPM Version](https://img.shields.io/npm/v/vue-fontawesome-icon.svg)](https://www.npmjs.com/package/vue-fontawesome-icon)
[![Total Downloads](https://img.shields.io/npm/dt/vue-fontawesome-icon.svg)](https://www.npmjs.com/package/vue-fontawesome-icon)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Easily integrate Font Awesome icons into your Vue.js applications with this flexible and lightweight component!

## 📦 Installation

Install the necessary packages using npm:

```bash
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):

```javascript
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
<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](https://fontawesome.com/icons). |
| 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](https://github.com/ajaymarathe/react-bootstrap-spinner/blob/master/LICENSE)

## Author
Made with ❤️ by [Ajay Marathe](https://github.com/ajaymarathe)

---
_Source: https://npm.io/package/vue-fontawesome-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._