Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Cweili/vue-fa

Tiny FontAwesome component for Vue.js.
https://github.com/Cweili/vue-fa

component font-awesome fontawesome icon svg vue vuejs

Last synced: 2 months ago
JSON representation

Tiny FontAwesome component for Vue.js.

Lists

README 

        
# vue-fa



[![npm][badge-version]][npm]

[![bundle size][badge-size]][bundlephobia]

[![npm downloads][badge-downloads]][npm]

[![license][badge-license]][license]



[![github][badge-issues]][github]

[![build][badge-build]][workflows]

[![coverage][badge-coverage]][coveralls]



Tiny [FontAwesome][fontawesome] component for [Vue.js][vuejs].



* FontAwesome version 5 and 6

* FontAwesome svg icons

* Tree-shakable, only import used icons

* No CSS file required

* FontAwesome layering

* FontAwesome duotone icons



[Documents and examples][doc].



## Installation



**Notice:** vue-fa >= 3.x is based on Vue.js 3.x.



```shell

npm install vue-fa --save

```



> Old versions:

>

> vue-fa@2 => vue@2 [[Documents][doc-v2]]

>

> `npm install vue-fa@2`



Install FontAwesome icons via [official packages][fontawesome-npm], for example:



```shell

npm install @fortawesome/free-solid-svg-icons

```



## Usage



```html



  


    

  



  import Fa from 'vue-fa'

  import { faFlag } from '@fortawesome/free-solid-svg-icons'



  export default {

    components: {

      Fa

    },



    setup() {

      return {

        faFlag

      }

    }

  }



```



## Properties



```html



```



* `icon`: icon from FontAwesome packages, for example: `@fortawesome/free-solid-svg-icons`

* `size`: `string` values `xs`, `sm`, `lg` or `2x`, `3x`, `4x`, ..., `${number}x`

* `color`: `string` icon color, default `currentColor`

* `fw`: `boolean` fixed width

* `pull`: `string` values `left`, `right`

* `scale`: `number | string` transform scale, unit is `em`, default `1`

* `translateX`: `number | string` transform position X, unit is `em`, default `0`

* `translateY`: `number | string` transform position Y, unit is `em`, default `0`

* `flip`: `string` values `horizontal`, `vertical`, `both`

* `rotate`: `number | string` values `90`, `180`, `270`, `30`, `-30` ...

* `spin`: `boolean` spin icons

* `pulse`: `boolean` pulse spin icons



## Layering & Text



```js

import Fa, {

  FaLayers,

  FaLayersText,

} from 'vue-fa';

```



```html



  

  

    NEW

  



```



### `FaLayers` Properties



* `size`: `string` values `xs`, `sm`, `lg` or `2x`, `3x`, `4x`, ..., `${number}x`

* `pull`: `string` values `left`, `right`



### `FaLayersText` Properties



* `size`: `string` values `xs`, `sm`, `lg` or `2x`, `3x`, `4x`, ..., `${number}x`

* `color`: `string` icon color, default `currentColor`

* `scale`: `number | string` transform scale, unit is `em`, default `1`

* `translateX`: `number | string` transform position X, unit is `em`, default `0`

* `translateY`: `number | string` transform position Y, unit is `em`, default `0`

* `flip`: `string` values `horizontal`, `vertical`, `both`

* `rotate`: `number | string` values `90`, `180`, `270`, `30`, `-30` ...



## Duotone Icons



```js

import { faFlag } from '@fortawesome/pro-duotone-svg-icons'

```



```html



```



### Duotone Icons Theme



```html



import Fa from 'vue-fa'

import { faFlag } from '@fortawesome/pro-duotone-svg-icons'



const theme = {

  primaryColor: 'red',

  secondaryColor: '#000000',

  primaryOpacity: 0.8,

  secondaryOpacity: 0.6,

}



```



[fontawesome]: https://fontawesome.com/

[vuejs]: https://vuejs.org/



[doc]: https://cweili.github.io/vue-fa/

[doc-v2]: https://cweili.github.io/vue-fa/v2/



[badge-version]: https://img.shields.io/npm/v/vue-fa.svg

[badge-downloads]: https://img.shields.io/npm/dt/vue-fa.svg

[npm]: https://www.npmjs.com/package/vue-fa



[badge-size]: https://img.shields.io/bundlephobia/minzip/vue-fa.svg

[bundlephobia]: https://bundlephobia.com/result?p=vue-fa



[badge-license]: https://img.shields.io/npm/l/vue-fa.svg

[license]: https://github.com/Cweili/vue-fa/blob/master/LICENSE



[badge-issues]: https://img.shields.io/github/issues/Cweili/vue-fa.svg

[github]: https://github.com/Cweili/vue-fa



[badge-build]: https://img.shields.io/github/actions/workflow/status/Cweili/vue-fa/ci.yml?branch=master

[workflows]: https://github.com/Cweili/vue-fa/actions/workflows/ci.yml?query=branch%3Amaster



[badge-coverage]: https://img.shields.io/coveralls/github/Cweili/vue-fa/master.svg

[coveralls]: https://coveralls.io/github/Cweili/vue-fa?branch=master