@fortawesome/vue-fontawesome

What is @fortawesome/vue-fontawesome?

@fortawesome/vue-fontawesome is a Vue.js component for integrating Font Awesome icons into your Vue applications. It allows you to easily use Font Awesome icons in your Vue components, providing a wide range of icons and customization options.

What are @fortawesome/vue-fontawesome's main functionalities?

Basic Icon Usage

This feature allows you to use Font Awesome icons in your Vue components. You need to import the necessary icons and add them to the library, then use the <font-awesome-icon> component to display the icon.

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'coffee']" />
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(faCoffee)

export default {
  components: {
    FontAwesomeIcon
  }
}
</script>

Customizing Icon Size

This feature allows you to customize the size of the icons. You can use the `size` prop to set the size of the icon, such as `1x`, `2x`, `3x`, etc.

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'coffee']" size="3x" />
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(faCoffee)

export default {
  components: {
    FontAwesomeIcon
  }
}
</script>

Using Different Icon Styles

This feature allows you to use different styles of icons, such as solid, regular, and light. You need to import the icons from the respective Font Awesome packages and add them to the library.

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'coffee']" />
    <font-awesome-icon :icon="['far', 'coffee']" />
    <font-awesome-icon :icon="['fal', 'coffee']" />
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasCoffee } from '@fortawesome/free-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/free-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'

library.add(fasCoffee, farCoffee, falCoffee)

export default {
  components: {
    FontAwesomeIcon
  }
}
</script>

Other packages similar to @fortawesome/vue-fontawesome

vue-awesome

vue-awesome is a Vue.js component for displaying Font Awesome icons. It provides a simple way to use Font Awesome icons in your Vue applications, similar to @fortawesome/vue-fontawesome. However, it may not support the latest Font Awesome features and icons as comprehensively as @fortawesome/vue-fontawesome.

vue-fontawesome-icon

vue-fontawesome-icon is another Vue.js component for integrating Font Awesome icons. It offers similar functionality to @fortawesome/vue-fontawesome, allowing you to use Font Awesome icons in your Vue components. The main difference is in the API and the way icons are imported and used.

README

vue-fontawesome (with Vue 3)

Font Awesome Vue 3 component using SVG with JS

---

• Documentation
• How to Help
• Contributors
• Releasing this project (only project owners can do this)

Documentation

Official documentation is hosted at docs.fontawesome.com

Helpful Vue links:

• Set Up With Vue
• Add Icons with Vue
• Adding Icon Styling with Vue

How to Help

Review the following docs before diving in:

• CONTRIBUTING.md
• CODE_OF_CONDUCT.md

And then:

• Check the existing issues and see if you can help!

Contributors

The following contributors have either helped to start this project, have contributed code, are actively maintaining it (including documentation), or in other ways being awesome contributors to this project. We'd like to take a moment to recognize them.

	Name	GitHub
	SirLamer	@SirLamer
	Liu Xinyu	@meteorlxy
	Xaver Schulz	@schulz3000
	Yannick Ihmels	@ihmels
	btaens	@btaens
	David Driscoll	@david-driscoll
	Tyranteon	@tyranteon
	Romain Failla	@rigma
	Vinicius Rangel	@viniciuslrangel
	Okke Tijhuis	@otijhuis
	Aaron Parker	@parkeyparker
	Brandon Mork	@brandon-mork
	Michael Cozzolino	@michaelcozzolino

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

The Font Awesome team:

	Name	GitHub
	Travis Chase	@supercodepoet
	Rob Madole	@robmadole
	Mike Wilkerson	@mlwilkerson
	Brian Talbot	@talbs
	Jason Lundien	@jasonlundien

Releasing this project (only project owners can do this)

See DEVELOPMENT.md

Changelog

3.0.8 - 2024-05-21

Changed

• Updated package-lock.json to help fix faililng tests

---