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: 6 days ago
JSON representation
Tiny FontAwesome component for Vue.js.
- Host: GitHub
- URL: https://github.com/cweili/vue-fa
- Owner: Cweili
- License: mit
- Created: 2018-02-07T04:23:42.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-21T21:36:29.000Z (28 days ago)
- Last Synced: 2024-10-29T15:40:20.556Z (20 days ago)
- Topics: component, font-awesome, fontawesome, icon, svg, vue, vuejs
- Language: HTML
- Homepage: https://cweili.github.io/vue-fa/
- Size: 677 KB
- Stars: 23
- Watchers: 4
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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