https://github.com/altipla-consulting/fa6-icon

Vue 3 component to insert Font Awesome 6 icons.
https://github.com/altipla-consulting/fa6-icon

Last synced: about 1 month ago
JSON representation

Vue 3 component to insert Font Awesome 6 icons.

• Host: GitHub
• URL: https://github.com/altipla-consulting/fa6-icon
• Owner: altipla-consulting
• License: mit
• Created: 2022-04-16T18:27:50.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-08-14T08:14:23.000Z (over 1 year ago)
• Last Synced: 2024-10-31T01:05:31.066Z (2 months ago)
• Language: Vue
• Homepage: https://www.npmjs.com/package/@altipla/fa6-icon
• Size: 635 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# fa6-icon

Vue 3 component to insert Font Awesome 6 icons.

> **USE OFFICIAL COMPONENT:** Font Awesome 6 has a complete implementation of the Vue 3 component now that it is out of beta. We recommend to use the official component instead: https://fontawesome.com/docs/web/use-with/vue/

## Install

```sh

npm i @altipla/fa6-icon

```

## Usage

Declare the `ac-icon` component in the main script of the app:

```js

import { createApp } from 'vue'

import { Icon } from '@altipla/fa6-icon'

import './icons'

let app = createApp(...) // your initialization

app.component(Icon.name, Icon)

app.mount(...) // your initialization

```

Icons are declared in a different file to make it easier to add or remove icons from the available list. Declare any icon you need there:

```js

import { library } from '@fortawesome/fontawesome-svg-core'

import {

  faTrash as fasTrash,

} from '@fortawesome/free-solid-svg-icons'

library.add(

  fasTrash,

)

```

Finally use the component as needed inside your app:

```vue

  trash

  spinner-third

export default {

}

```

## Supported icons

There are multiple NPM libraries available from the `@fortawesome` organization if you have the Pro version. All of them are supported in this package.

|NPM package|

|-----------|

|`@fortawesome/free-solid-svg-icons`|

|`@fortawesome/pro-solid-svg-icons`|

|`@fortawesome/pro-regular-svg-icons`|

|`@fortawesome/pro-light-svg-icons`|

|`@fortawesome/pro-duotone-svg-icons`|

|`@fortawesome/pro-brands-svg-icons`|