first commit
This commit is contained in:
Artem Anufrij
+262
@@ -0,0 +1,262 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## [3.3.3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.3.3) - 2026-07-21
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fixed `class` and `style` failing to type-check on `<FontAwesomeIcon>` in JSX/TSX, a regression from
|
||||
#576. `FontAwesomeIcon` is declared as a `FunctionalComponent`, whose JSX attribute surface resolves
|
||||
from the component's own props only; the declaration now also intersects `AllowedComponentProps` and
|
||||
`VNodeProps`, restoring `class`, `style`, `key`, and `ref`. Types-only and non-breaking.
|
||||
|
||||
### Changed
|
||||
|
||||
- CI: the public API type-check now runs against the oldest supported Vue (3.0.x) as well as the newest,
|
||||
so type-only regressions that depend on a helper only newer Vue versions export are caught
|
||||
- Removed the unused `npm` and `install` `devDependencies`. Development-only; the published package is
|
||||
unchanged.
|
||||
|
||||
---
|
||||
|
||||
## [3.3.2](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.3.2) - 2026-07-13
|
||||
|
||||
### Added
|
||||
|
||||
- New `canvasSquare` and `canvasRoomy` props for the canvas sizing options introduced in Font Awesome 7.3.0
|
||||
|
||||
---
|
||||
|
||||
## [3.3.1](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.3.1) - 2026-07-09
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fixed `TS2590: Expression produces a union type that is too complex to represent` when using
|
||||
`FontAwesomeIcon` in a Vue render function (`h(FontAwesomeIcon, { icon })`), a regression from #559.
|
||||
Types-only and non-breaking.
|
||||
|
||||
### Changed
|
||||
|
||||
- CI: fixed the build matrix failing with `npm ERESOLVE` when installing older Vue versions in the test
|
||||
matrix (a regression surfaced by #576 adding `typescript` to the lockfile), and added a strict
|
||||
peer-dependency check job
|
||||
- Documented the `test:types` command in `DEVELOPMENT.md` and added test-first and explicit `dist` steps
|
||||
to the release checklist
|
||||
|
||||
---
|
||||
|
||||
## [3.3.0](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.3.0) - 2026-06-26
|
||||
|
||||
### Added
|
||||
|
||||
- Support for the new animation props introduced in Font Awesome 7.3.0: `flip360`, `buzz`, `float`, `jello`,
|
||||
`spinSnap`, `spinSnap4`, `spinSnap8`, `swing`, and `wag`
|
||||
|
||||
### Changed
|
||||
|
||||
- Improved TypeScript types for the `icon` and `mask` props
|
||||
- Test suite updates and added testing notes to `DEVELOPMENT.md`
|
||||
|
||||
---
|
||||
|
||||
## [3.2.0](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.2.0) - 2026-04-14
|
||||
|
||||
### Added
|
||||
|
||||
- Support for custom gradient fills
|
||||
|
||||
---
|
||||
|
||||
## [3.1.3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.1.3) - 2026-01-07
|
||||
|
||||
### Changed
|
||||
|
||||
- ci.yml update for node-versions
|
||||
- a markdown lint fixup in CONTRIUBUTING.md
|
||||
- update vitest version to 4.0.16 in `package.json`
|
||||
|
||||
---
|
||||
|
||||
## [3.1.2](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.1.2) - 2025-09-09
|
||||
|
||||
### Changed
|
||||
|
||||
- Replaced Jest with Vitest as the test runner for unit tests. This will help improve test performance and better aligns
|
||||
with the Vue 3 + Vite ecosystem.
|
||||
|
||||
- Updated `FontAwesomeIconProps`:
|
||||
- `flip` now accepts the `boolean` type in addition to `'horizontal' | 'vertical' | 'both'`
|
||||
- `maskId` is now correctly typed as `string`
|
||||
|
||||
- Updated `DEVELOPMENT.md` with revised release instructions
|
||||
|
||||
---
|
||||
|
||||
## [3.1.1](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.1.1) - 2025-07-24
|
||||
|
||||
### Changed
|
||||
|
||||
- Removed version checks related to `props.fixedWidth`, `iconProps.title`, and `iconProps.title`.
|
||||
|
||||
- The use of `require` to retrieve the version from `@fortawesome/fontawesome-svg-core` for version checks has been
|
||||
removed to help ensure compatibility with ESM builds.
|
||||
|
||||
---
|
||||
|
||||
## [3.1.0](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.1.0) - 2025-07-22
|
||||
|
||||
### Changed
|
||||
|
||||
- Font Awesome Pro+ icons are now available with an active Pro+ subscription.
|
||||
|
||||
- Added `widthAuto` prop
|
||||
|
||||
- Added `rotateBy` prop
|
||||
|
||||
- Deprecated `fa-fw` prop
|
||||
|
||||
---
|
||||
|
||||
## [3.0.8](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.8) - 2024-05-21
|
||||
|
||||
### Changed
|
||||
|
||||
- Updated `package-lock.json` to help fix faililng tests
|
||||
|
||||
---
|
||||
|
||||
## [3.0.7](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.7) - 2024-05-21
|
||||
|
||||
### Changed
|
||||
|
||||
- Updated nodejs version in `.tool-versions`
|
||||
- Updated Jest configuration for local testing
|
||||
- Removed an unused import in `FontAwesomeLayers.test.js`
|
||||
- Updated `node-versions` in `ci.yml`
|
||||
- Added additional exports in `index.d.ts`
|
||||
- Updated `README.md` for new Font Awesome Doc link
|
||||
|
||||
---
|
||||
|
||||
## [3.0.6](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.6) - 2024-01-29
|
||||
|
||||
### Changed
|
||||
|
||||
- Added missing exports to TS definition in `index.d.ts`
|
||||
|
||||
---
|
||||
|
||||
## [3.0.5](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.5) - 2023-11-06
|
||||
|
||||
### Changed
|
||||
|
||||
- Removed .tgz file
|
||||
|
||||
---
|
||||
|
||||
## [3.0.4](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.4) - 2023-11-06
|
||||
|
||||
### Added
|
||||
|
||||
- Tests for Sharp Family
|
||||
- Ability to include a title prop (github issue #[181](https://github.com/FortAwesome/vue-fontawesome/issues/181))
|
||||
- Prettier config file
|
||||
|
||||
---
|
||||
|
||||
## [3.0.3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.3) - 2023-01-24
|
||||
|
||||
### Changed
|
||||
|
||||
- NPM download `@fortawesome/vue-fontawesome-latest` is now set to Vue 3; to download the Vue 2 package you will have to use `@fortawesome/vue-fontawesome-latest-2`, which is described in our [Vue setup docs](https://fontawesome.com/docs/web/use-with/vue/#_3-add-the-vue-component)
|
||||
- CI workflow updated for testing
|
||||
- README.md and package.json updated for new contributor
|
||||
|
||||
### Added
|
||||
|
||||
- Missing TypeScript animations added (github issue #[428](https://github.com/FortAwesome/vue-fontawesome/issues/428))
|
||||
- Missing TypeScript sizes added (github issue #[415](https://github.com/FortAwesome/vue-fontawesome/issues/415))
|
||||
|
||||
---
|
||||
|
||||
## [3.0.2](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.2) - 2022-11-07
|
||||
|
||||
### Changed
|
||||
|
||||
- Vue 3 Composition API TypeScript support (github issue #[276](https://github.com/FortAwesome/vue-fontawesome/issues/276))
|
||||
- Updated README.md with a spelling correction, linter fixes, and new contributor
|
||||
- Updated icon example in App.vue to use `fixed-width` rather than `full-width`
|
||||
|
||||
### Added
|
||||
|
||||
- Missing tests
|
||||
|
||||
---
|
||||
|
||||
## [3.0.1](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.1) - 2022-06-17
|
||||
|
||||
### Changed
|
||||
|
||||
- README.md Documentation now points to https://fontawesome.com/docs/web/use-with/vue/
|
||||
|
||||
---
|
||||
|
||||
## [3.0.0](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0) - 2022-06-07
|
||||
|
||||
### Added
|
||||
|
||||
- New animations for bounce and shake
|
||||
- Feature to call icons using a string format
|
||||
|
||||
### Fixed
|
||||
|
||||
- Animations for beat, fade, beat-fade, flash, spin-pulse, and spin-reverse
|
||||
- Tee-shirt sizes to include 2xs, lg, xl, and 2xl
|
||||
- Flip animation when used by itself
|
||||
|
||||
---
|
||||
|
||||
## [3.0.0-5](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0-5) - 2021-10-18
|
||||
|
||||
### Fixed
|
||||
|
||||
- Include 1.3.0-beta versions in peer dependencies
|
||||
|
||||
---
|
||||
|
||||
## [3.0.0-4](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0-4) - 2021-05-23
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fix reactivity #297
|
||||
|
||||
---
|
||||
|
||||
## [3.0.0-3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0-3) - 2020-12-09
|
||||
|
||||
### Fixed
|
||||
|
||||
- Allow for non-RC releases of Vue 3
|
||||
|
||||
---
|
||||
|
||||
## [3.0.0-2](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0-2) - 2020-10-09
|
||||
|
||||
### Fixed
|
||||
|
||||
- Make Vue as an external dependency #258 #260
|
||||
|
||||
---
|
||||
|
||||
## [3.0.0-1](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0-1) - 2020-09-01
|
||||
|
||||
### Added
|
||||
|
||||
- Support for Vue 3.x RC's and betas #246 #249
|
||||
|
||||
---
|
||||
|
||||
See the [CHANGELOG prior to version 3](https://github.com/FortAwesome/vue-fontawesome/blob/2.x/CHANGELOG.md).
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
Copyright 2018 Fonticons, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
<a href="https://fontawesome.com">
|
||||
<img align="right" width="100" height="100" alt="Official Javascript Component" src="https://img.fortawesome.com/349cfdf6/official-javascript-component.svg">
|
||||
</a>
|
||||
|
||||
# vue-fontawesome (with Vue 3)
|
||||
|
||||
[](https://www.npmjs.com/package/@fortawesome/vue-fontawesome)
|
||||
[](https://github.com/FortAwesome/vue-fontawesome/actions)
|
||||
|
||||
> Font Awesome Vue 3 component using SVG with JS
|
||||
|
||||
---
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Documentation](#documentation)
|
||||
- [How to Help](#how-to-help)
|
||||
- [Contributors](#contributors)
|
||||
- [Releasing this project (only project owners can do this)](#releasing-this-project-only-project-owners-can-do-this)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
## Documentation
|
||||
|
||||
Official documentation is hosted at [docs.fontawesome.com](https://docs.fontawesome.com/)
|
||||
|
||||
Helpful Vue links:
|
||||
|
||||
- [Set Up With Vue](https://docs.fontawesome.com/web/use-with/vue/)
|
||||
- [Add Icons with Vue](https://docs.fontawesome.com/web/use-with/vue/add-icons)
|
||||
- [Adding Icon Styling with Vue](https://docs.fontawesome.com/web/use-with/vue/style)
|
||||
|
||||
## How to Help
|
||||
|
||||
Review the following docs before diving in:
|
||||
|
||||
- [CONTRIBUTING.md](CONTRIBUTING.md)
|
||||
- [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
|
||||
|
||||
And then:
|
||||
|
||||
- Check the existing [issues](https://github.com/FortAwesome/vue-fontawesome/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 |
|
||||
| :----------------------------------------------------------------------------------: | ----------------- | -------------------------------------------------------- |
|
||||
| <img src="https://github.com/parkeyparker.png?size=72" width="72" height="72" /> | Aaron Parker | [@parkeyparker](https://github.com/parkeyparker) |
|
||||
| <img src="https://github.com/brandon-mork.png?size=72" width="72" height="72" /> | Brandon Mork | [@brandon-mork](https://github.com/brandon-mork) |
|
||||
| <img src="https://github.com/btaens.png?size=72" width="72" height="72" /> | btaens | [@btaens](https://github.com/btaens) |
|
||||
| <img src="https://github.com/david-driscoll.png?size=72" width="72" height="72" /> | David Driscoll | [@david-driscoll](https://github.com/david-driscoll) |
|
||||
| <img src="https://github.com/GrahamCampbell.png?size=72" width="72" height="72" /> | Graham Campbell | [@GrahamCampbell](https://github.com/GrahamCampbell) |
|
||||
| <img src="https://github.com/meteorlxy.png?size=72" width="72" height="72" /> | Liu Xinyu | [@meteorlxy](https://github.com/meteorlxy) |
|
||||
| <img src="https://github.com/michaelcozzolino.png?size=72" width="72" height="72" /> | Michael Cozzolino | [@michaelcozzolino](https://github.com/michaelcozzolino) |
|
||||
| <img src="https://github.com/otijhuis.png?size=72" width="72" height="72" /> | Okke Tijhuis | [@otijhuis](https://github.com/otijhuis) |
|
||||
| <img src="https://github.com/rigma.png?size=72" width="72" height="72" /> | Romain Failla | [@rigma](https://github.com/rigma) |
|
||||
| <img src="https://github.com/SirLamer.png?size=72" width="72" height="72" /> | SirLamer | [@SirLamer](https://github.com/SirLamer) |
|
||||
| <img src="https://github.com/tyranteon.png?size=72" width="72" height="72" /> | Tyranteon | [@tyranteon](https://github.com/tyranteon) |
|
||||
| <img src="https://github.com/viniciuslrangel.png?size=72" width="72" height="72" /> | Vinicius Rangel | [@viniciuslrangel](https://github.com/viniciuslrangel) |
|
||||
| <img src="https://github.com/schulz3000.png?size=72" width="72" height="72" /> | Xaver Schulz | [@schulz3000](https://github.com/schulz3000) |
|
||||
| <img src="https://github.com/ihmels.png?size=72" width="72" height="72" /> | Yannick Ihmels | [@ihmels](https://github.com/ihmels) |
|
||||
|
||||
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 |
|
||||
| :-------------------------------------------------------------------------------: | ---------------- | -------------------------------------------------- |
|
||||
| <img src="https://github.com/talbs.png?size=72" width="72" height="72" /> | Brian Talbot | [@talbs](https://github.com/talbs) |
|
||||
| <img src="https://github.com/frrrances.png?size=72" width="72" height="72" /> | Frances Botsford | [@frrrances](https://github.com/frrrances) |
|
||||
| <img src="https://github.com/jasonlundien.png?size=72" width="72" height="72" /> | Jason Lundien | [@jasonlundien](https://github.com/jasonlundien) |
|
||||
| <img src="https://github.com/mlwilkerson.png?size=72" width="72" height="72" /> | Mike Wilkerson | [@mlwilkerson](https://github.com/mlwilkerson) |
|
||||
| <img src="https://github.com/robmadole.png?size=72" width="72" height="72" /> | Rob Madole | [@robmadole](https://github.com/robmadole) |
|
||||
| <img src="https://github.com/supercodepoet.png?size=72" width="72" height="72" /> | Travis Chase | [@supercodepoet](https://github.com/supercodepoet) |
|
||||
|
||||
## Releasing this project (only project owners can do this)
|
||||
|
||||
See [DEVELOPMENT.md](DEVELOPMENT.md#release)
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
# Upgrading Guide
|
||||
|
||||
See the [CHANGELOG.md](./CHANGELOG.md) for detailed information about what has changed between versions.
|
||||
|
||||
This guide is useful to figure out what you need to do between breaking changes.
|
||||
|
||||
As always, [submit issues](https://github.com/FortAwesome/vue-fontawesome/issues/new) that you run into with this guide or with these upgrades to us.
|
||||
|
||||
## 0.0.x to 0.1.0
|
||||
|
||||
### Renamed packages
|
||||
|
||||
The following packages have been renamed as part of 5.1.0 of Font Awesome.
|
||||
|
||||
_All packages are in the [@fortawesome NPM scope](https://www.npmjs.com/search?q=scope:fortawesome&page=1&ranking=optimal)_
|
||||
|
||||
| Old package(1) | New package |
|
||||
|--------------------------|------------------------|
|
||||
| fontawesome | fontawesome-svg-core |
|
||||
| fontawesome-free-solid | free-solid-svg-icons |
|
||||
| fontawesome-free-regular | free-regular-svg-icons |
|
||||
| fontawesome-free-brands | free-brands-svg-icons |
|
||||
| fontawesome-pro-solid | pro-solid-svg-icons |
|
||||
| fontawesome-pro-regular | pro-regular-svg-icons |
|
||||
| fontawesome-pro-light | pro-light-svg-icons |
|
||||
|
||||
(1) Old packages have now been deprecated. They are still available but will only receive high priority patch release fixes.
|
||||
|
||||
**You'll need to update your package.json file with the renamed packages and new versions.**
|
||||
|
||||
### No more default imports
|
||||
|
||||
Recently we spent a good deal of time supporting TypeScript to enable us to
|
||||
create the Angular Font Awesome component. During that adventure we
|
||||
[were](https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html)
|
||||
[convinced](https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad)
|
||||
that we were going to remove default exports from all of our components,
|
||||
libraries, and packages. This is complete with the umbrella release of `5.1.0` of Font Awesome.
|
||||
|
||||
What does that mean?
|
||||
|
||||
~~Old way:~~
|
||||
|
||||
```javascript
|
||||
import fontawesome from '@fortawesome/fontawesome'
|
||||
import solid from '@fortawesome/fontawesome-free-solid'
|
||||
import faTwitter from '@fortawesome/fontawesome-free-brands/faTwitter'
|
||||
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
|
||||
|
||||
fontawesome.library.add(solid, faTwitter)
|
||||
```
|
||||
|
||||
New way:
|
||||
|
||||
```javascript
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { fas } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
|
||||
library.add(fas, faTwitter)
|
||||
```
|
||||
|
||||
This is also a valid way to import icons that works if your tool does not support tree shaking:
|
||||
|
||||
```javascript
|
||||
import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter'
|
||||
```
|
||||
|
||||
### Improved support for tree shaking
|
||||
|
||||
Tree shaking is now functional by default and no additional configuration is required to make it work.
|
||||
|
||||
The `shakable.es.js` module has been removed and is no longer needed.
|
||||
|
||||
If you've previously configured tree shaking by modifying your webpack or rollup you can safely remove these.
|
||||
|
||||
**We recommend that you check your bundle size after upgrading an ensure that file sizes are as you would expect.**
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
// ...
|
||||
resolve: {
|
||||
alias: {
|
||||
'@fortawesome/fontawesome-free-solid$': '@fortawesome/fontawesome-free-solid/shakable.es.js'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
const alias = require('rollup-plugin-alias')
|
||||
|
||||
rollup({
|
||||
// ...
|
||||
plugins: [
|
||||
alias({
|
||||
'@fortawesome/fontawesome-free-solid': 'node_modules/@fortawesome/fontawesome-free-solid/shakable.es.js'
|
||||
})
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
### Mixed modes with automatic replacement of `<i>` tags to `<svg>`
|
||||
|
||||
If you were previously relying on Font Awesome to replace any `<i>` tags in
|
||||
your page or app with `<svg>` you'll need to explicitly control that now.
|
||||
|
||||
```javascript
|
||||
import { dom } from '@fortawesome/fontawesome-svg-core'
|
||||
|
||||
dom.watch() // This will kick of the replacement of i tags and configure a MutationObserver
|
||||
```
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
import { IconDefinition, IconLookup, IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core'
|
||||
import { DefineComponent, FunctionalComponent, AllowedComponentProps, VNodeProps } from 'vue'
|
||||
|
||||
type IconProp = IconDefinition | IconLookup | [IconPrefix, IconName] | IconName | (string & {}) | object
|
||||
|
||||
interface GradientStop {
|
||||
offset: string | number
|
||||
color: string
|
||||
opacity?: number
|
||||
}
|
||||
|
||||
interface LinearGradientFill {
|
||||
type: 'linear'
|
||||
id: string
|
||||
x1?: string | number
|
||||
y1?: string | number
|
||||
x2?: string | number
|
||||
y2?: string | number
|
||||
stops: GradientStop[]
|
||||
}
|
||||
|
||||
interface RadialGradientFill {
|
||||
type: 'radial'
|
||||
id: string
|
||||
cx?: string | number
|
||||
cy?: string | number
|
||||
r?: string | number
|
||||
fx?: string | number
|
||||
fy?: string | number
|
||||
stops: GradientStop[]
|
||||
}
|
||||
|
||||
interface FontAwesomeIconProps {
|
||||
border?: boolean
|
||||
fixedWidth?: boolean
|
||||
flip?: 'horizontal' | 'vertical' | 'both' | boolean
|
||||
icon: IconProp
|
||||
mask?: IconProp
|
||||
maskId?: string
|
||||
listItem?: boolean
|
||||
pull?: 'right' | 'left'
|
||||
pulse?: boolean
|
||||
rotation?: 90 | 180 | 270 | '90' | '180' | '270'
|
||||
rotateBy?: boolean
|
||||
swapOpacity?: boolean
|
||||
size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x'
|
||||
spin?: boolean
|
||||
transform?: object | string
|
||||
symbol?: boolean | string
|
||||
title?: string
|
||||
titleId?: string
|
||||
inverse?: boolean
|
||||
bounce?: boolean
|
||||
shake?: boolean
|
||||
beat?: boolean
|
||||
fade?: boolean
|
||||
beatFade?: boolean
|
||||
flash?: boolean
|
||||
spinPulse?: boolean
|
||||
spinReverse?: boolean
|
||||
widthAuto?: boolean
|
||||
canvasSquare?: boolean
|
||||
canvasRoomy?: boolean
|
||||
gradientFill?: LinearGradientFill | RadialGradientFill
|
||||
flip360?: boolean
|
||||
buzz?: boolean
|
||||
float?: boolean
|
||||
jello?: boolean
|
||||
spinSnap?: boolean
|
||||
spinSnap4?: boolean
|
||||
spinSnap8?: boolean
|
||||
swing?: boolean
|
||||
wag?: boolean
|
||||
}
|
||||
|
||||
interface FontAwesomeLayersProps {
|
||||
fixedWidth?: boolean
|
||||
}
|
||||
|
||||
interface FontAwesomeLayersTextProps {
|
||||
value: string | number
|
||||
transform?: object | string
|
||||
counter?: boolean
|
||||
position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
|
||||
}
|
||||
|
||||
declare const FontAwesomeIcon: FunctionalComponent<FontAwesomeIconProps & AllowedComponentProps & VNodeProps>
|
||||
declare const FontAwesomeLayers: DefineComponent<FontAwesomeLayersProps>
|
||||
declare const FontAwesomeLayersText: DefineComponent<FontAwesomeLayersTextProps>
|
||||
|
||||
export {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIconProps,
|
||||
FontAwesomeLayers,
|
||||
FontAwesomeLayersProps,
|
||||
FontAwesomeLayersText,
|
||||
FontAwesomeLayersTextProps,
|
||||
GradientStop,
|
||||
LinearGradientFill,
|
||||
RadialGradientFill,
|
||||
IconProp
|
||||
}
|
||||
+762
@@ -0,0 +1,762 @@
|
||||
import { h, defineComponent, computed, watch } from 'vue';
|
||||
import { parse, icon, config, text } from '@fortawesome/fontawesome-svg-core';
|
||||
|
||||
function _arrayLikeToArray(r, a) {
|
||||
(null == a || a > r.length) && (a = r.length);
|
||||
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
||||
return n;
|
||||
}
|
||||
function _arrayWithoutHoles(r) {
|
||||
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
||||
}
|
||||
function _defineProperty(e, r, t) {
|
||||
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
||||
value: t,
|
||||
enumerable: !0,
|
||||
configurable: !0,
|
||||
writable: !0
|
||||
}) : e[r] = t, e;
|
||||
}
|
||||
function _iterableToArray(r) {
|
||||
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
||||
}
|
||||
function _nonIterableSpread() {
|
||||
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
||||
}
|
||||
function ownKeys(e, r) {
|
||||
var t = Object.keys(e);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var o = Object.getOwnPropertySymbols(e);
|
||||
r && (o = o.filter(function (r) {
|
||||
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
||||
})), t.push.apply(t, o);
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _objectSpread2(e) {
|
||||
for (var r = 1; r < arguments.length; r++) {
|
||||
var t = null != arguments[r] ? arguments[r] : {};
|
||||
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
||||
_defineProperty(e, r, t[r]);
|
||||
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
||||
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
||||
});
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function _objectWithoutProperties(e, t) {
|
||||
if (null == e) return {};
|
||||
var o,
|
||||
r,
|
||||
i = _objectWithoutPropertiesLoose(e, t);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var n = Object.getOwnPropertySymbols(e);
|
||||
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
||||
}
|
||||
return i;
|
||||
}
|
||||
function _objectWithoutPropertiesLoose(r, e) {
|
||||
if (null == r) return {};
|
||||
var t = {};
|
||||
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
||||
if (-1 !== e.indexOf(n)) continue;
|
||||
t[n] = r[n];
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _toConsumableArray(r) {
|
||||
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
||||
}
|
||||
function _toPrimitive(t, r) {
|
||||
if ("object" != typeof t || !t) return t;
|
||||
var e = t[Symbol.toPrimitive];
|
||||
if (void 0 !== e) {
|
||||
var i = e.call(t, r || "default");
|
||||
if ("object" != typeof i) return i;
|
||||
throw new TypeError("@@toPrimitive must return a primitive value.");
|
||||
}
|
||||
return ("string" === r ? String : Number)(t);
|
||||
}
|
||||
function _toPropertyKey(t) {
|
||||
var i = _toPrimitive(t, "string");
|
||||
return "symbol" == typeof i ? i : i + "";
|
||||
}
|
||||
function _typeof(o) {
|
||||
"@babel/helpers - typeof";
|
||||
|
||||
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
|
||||
return typeof o;
|
||||
} : function (o) {
|
||||
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
||||
}, _typeof(o);
|
||||
}
|
||||
function _unsupportedIterableToArray(r, a) {
|
||||
if (r) {
|
||||
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
||||
var t = {}.toString.call(r).slice(8, -1);
|
||||
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
||||
}
|
||||
}
|
||||
|
||||
function objectWithKey(key, value) {
|
||||
return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
|
||||
}
|
||||
function classList(props) {
|
||||
var _classes;
|
||||
var classes = (_classes = {
|
||||
'fa-spin': props.spin,
|
||||
'fa-pulse': props.pulse,
|
||||
// the fixedWidth property has been deprecated as of version 7.0.0
|
||||
'fa-fw': props.fixedWidth,
|
||||
'fa-border': props.border,
|
||||
'fa-li': props.listItem,
|
||||
'fa-inverse': props.inverse,
|
||||
'fa-flip': props.flip === true,
|
||||
'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
|
||||
'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both'
|
||||
}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, "fa-".concat(props.size), props.size !== null), "fa-rotate-".concat(props.rotation), props.rotation !== null), 'fa-rotate-by', props.rotateBy), "fa-pull-".concat(props.pull), props.pull !== null), 'fa-swap-opacity', props.swapOpacity), 'fa-bounce', props.bounce), 'fa-shake', props.shake), 'fa-beat', props.beat), 'fa-fade', props.fade), 'fa-beat-fade', props.beatFade), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, 'fa-flash', props.flash), 'fa-spin-pulse', props.spinPulse), 'fa-spin-reverse', props.spinReverse), 'fa-width-auto', props.widthAuto), 'fa-canvas-square', props.canvasSquare), 'fa-canvas-roomy', props.canvasRoomy), 'fa-flip-360', props.flip360), 'fa-buzz', props.buzz), 'fa-float', props.float), 'fa-jello', props.jello), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, 'fa-spin-snap', props.spinSnap), 'fa-spin-snap-4', props.spinSnap4), 'fa-spin-snap-8', props.spinSnap8), 'fa-swing', props.swing), 'fa-wag', props.wag));
|
||||
return Object.keys(classes).map(function (key) {
|
||||
return classes[key] ? key : null;
|
||||
}).filter(function (key) {
|
||||
return key;
|
||||
});
|
||||
}
|
||||
|
||||
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
||||
|
||||
var humps$1 = {exports: {}};
|
||||
|
||||
(function (module) {
|
||||
(function(global) {
|
||||
|
||||
var _processKeys = function(convert, obj, options) {
|
||||
if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) {
|
||||
return obj;
|
||||
}
|
||||
|
||||
var output,
|
||||
i = 0,
|
||||
l = 0;
|
||||
|
||||
if(_isArray(obj)) {
|
||||
output = [];
|
||||
for(l=obj.length; i<l; i++) {
|
||||
output.push(_processKeys(convert, obj[i], options));
|
||||
}
|
||||
}
|
||||
else {
|
||||
output = {};
|
||||
for(var key in obj) {
|
||||
if(Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
output[convert(key, options)] = _processKeys(convert, obj[key], options);
|
||||
}
|
||||
}
|
||||
}
|
||||
return output;
|
||||
};
|
||||
|
||||
// String conversion methods
|
||||
|
||||
var separateWords = function(string, options) {
|
||||
options = options || {};
|
||||
var separator = options.separator || '_';
|
||||
var split = options.split || /(?=[A-Z])/;
|
||||
|
||||
return string.split(split).join(separator);
|
||||
};
|
||||
|
||||
var camelize = function(string) {
|
||||
if (_isNumerical(string)) {
|
||||
return string;
|
||||
}
|
||||
string = string.replace(/[\-_\s]+(.)?/g, function(match, chr) {
|
||||
return chr ? chr.toUpperCase() : '';
|
||||
});
|
||||
// Ensure 1st char is always lowercase
|
||||
return string.substr(0, 1).toLowerCase() + string.substr(1);
|
||||
};
|
||||
|
||||
var pascalize = function(string) {
|
||||
var camelized = camelize(string);
|
||||
// Ensure 1st char is always uppercase
|
||||
return camelized.substr(0, 1).toUpperCase() + camelized.substr(1);
|
||||
};
|
||||
|
||||
var decamelize = function(string, options) {
|
||||
return separateWords(string, options).toLowerCase();
|
||||
};
|
||||
|
||||
// Utilities
|
||||
// Taken from Underscore.js
|
||||
|
||||
var toString = Object.prototype.toString;
|
||||
|
||||
var _isFunction = function(obj) {
|
||||
return typeof(obj) === 'function';
|
||||
};
|
||||
var _isObject = function(obj) {
|
||||
return obj === Object(obj);
|
||||
};
|
||||
var _isArray = function(obj) {
|
||||
return toString.call(obj) == '[object Array]';
|
||||
};
|
||||
var _isDate = function(obj) {
|
||||
return toString.call(obj) == '[object Date]';
|
||||
};
|
||||
var _isRegExp = function(obj) {
|
||||
return toString.call(obj) == '[object RegExp]';
|
||||
};
|
||||
var _isBoolean = function(obj) {
|
||||
return toString.call(obj) == '[object Boolean]';
|
||||
};
|
||||
|
||||
// Performant way to determine if obj coerces to a number
|
||||
var _isNumerical = function(obj) {
|
||||
obj = obj - 0;
|
||||
return obj === obj;
|
||||
};
|
||||
|
||||
// Sets up function which handles processing keys
|
||||
// allowing the convert function to be modified by a callback
|
||||
var _processor = function(convert, options) {
|
||||
var callback = options && 'process' in options ? options.process : options;
|
||||
|
||||
if(typeof(callback) !== 'function') {
|
||||
return convert;
|
||||
}
|
||||
|
||||
return function(string, options) {
|
||||
return callback(string, convert, options);
|
||||
}
|
||||
};
|
||||
|
||||
var humps = {
|
||||
camelize: camelize,
|
||||
decamelize: decamelize,
|
||||
pascalize: pascalize,
|
||||
depascalize: decamelize,
|
||||
camelizeKeys: function(object, options) {
|
||||
return _processKeys(_processor(camelize, options), object);
|
||||
},
|
||||
decamelizeKeys: function(object, options) {
|
||||
return _processKeys(_processor(decamelize, options), object, options);
|
||||
},
|
||||
pascalizeKeys: function(object, options) {
|
||||
return _processKeys(_processor(pascalize, options), object);
|
||||
},
|
||||
depascalizeKeys: function () {
|
||||
return this.decamelizeKeys.apply(this, arguments);
|
||||
}
|
||||
};
|
||||
|
||||
if (module.exports) {
|
||||
module.exports = humps;
|
||||
} else {
|
||||
global.humps = humps;
|
||||
}
|
||||
|
||||
})(commonjsGlobal);
|
||||
} (humps$1));
|
||||
|
||||
var humps = humps$1.exports;
|
||||
|
||||
var _excluded = ["gradientFill"],
|
||||
_excluded2 = ["class", "style"],
|
||||
_excluded3 = ["type", "stops", "id"];
|
||||
|
||||
/**
|
||||
* Converts a CSS style into a plain Javascript object.
|
||||
* @param {String} style The style to converts into a plain Javascript object.
|
||||
* @returns {Object}
|
||||
*/
|
||||
function styleToObject(style) {
|
||||
return style.split(';').map(function (s) {
|
||||
return s.trim();
|
||||
}).filter(function (s) {
|
||||
return s;
|
||||
}).reduce(function (output, pair) {
|
||||
var idx = pair.indexOf(':');
|
||||
var prop = humps.camelize(pair.slice(0, idx));
|
||||
var value = pair.slice(idx + 1).trim();
|
||||
output[prop] = value;
|
||||
return output;
|
||||
}, {});
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a CSS class list into a plain Javascript object.
|
||||
* @param {Array<String>} classes The class list to convert.
|
||||
* @returns {Object}
|
||||
*/
|
||||
function classToObject(classes) {
|
||||
return classes.split(/\s+/).reduce(function (output, className) {
|
||||
output[className] = true;
|
||||
return output;
|
||||
}, {});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a Vue VNode for an SVG gradient stop element.
|
||||
* @param {Object} stop The gradient stop definition.
|
||||
* @param {string|number} stop.offset The offset of the stop.
|
||||
* @param {string} stop.color The color of the stop.
|
||||
* @param {number} [stop.opacity] The opacity of the stop.
|
||||
* @param {number} index The index of the stop.
|
||||
* @returns {VNode}
|
||||
*/
|
||||
function createGradientStop(stop, index) {
|
||||
return h('stop', _objectSpread2({
|
||||
'key': "".concat(index, "-").concat(stop.offset),
|
||||
'offset': stop.offset,
|
||||
'stop-color': stop.color
|
||||
}, stop.opacity !== undefined && {
|
||||
'stop-opacity': stop.opacity
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively removes the fill attribute from all path elements in an abstract element tree.
|
||||
* @param {AbstractElement | String} abstractElement
|
||||
* @returns {AbstractElement | String}
|
||||
*/
|
||||
function stripFillsFromPaths(abstractElement) {
|
||||
if (typeof abstractElement === 'string') return abstractElement;
|
||||
var children = (abstractElement.children || []).map(stripFillsFromPaths);
|
||||
if (abstractElement.tag === 'path' && abstractElement.attributes && 'fill' in abstractElement.attributes) {
|
||||
return _objectSpread2(_objectSpread2({}, abstractElement), {}, {
|
||||
attributes: _objectSpread2(_objectSpread2({}, abstractElement.attributes), {}, {
|
||||
fill: undefined
|
||||
}),
|
||||
children: children
|
||||
});
|
||||
}
|
||||
return _objectSpread2(_objectSpread2({}, abstractElement), {}, {
|
||||
children: children
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a FontAwesome abstract element of an icon into a Vue VNode.
|
||||
* @param {AbstractElement | String} abstractElement The element to convert.
|
||||
* @param {Object} props Options including gradientFill and any extra VNode props.
|
||||
* @param {Object} attrs The user-defined native HTML attributes.
|
||||
* @returns {VNode}
|
||||
*/
|
||||
function convert(abstractElement) {
|
||||
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
// If the abstract element is a string, we'll just return a string render function
|
||||
if (typeof abstractElement === 'string') {
|
||||
return abstractElement;
|
||||
}
|
||||
var _props$gradientFill = props.gradientFill,
|
||||
gradientFill = _props$gradientFill === void 0 ? null : _props$gradientFill,
|
||||
renderProps = _objectWithoutProperties(props, _excluded);
|
||||
|
||||
// If a gradientFill (or fill attr) is provided, strip fill from all descendant path elements
|
||||
// up front so the gradient/fill takes precedence over the icon's built-in fill
|
||||
var shouldStripFills = !!gradientFill || 'fill' in attrs;
|
||||
var element = shouldStripFills ? stripFillsFromPaths(abstractElement) : abstractElement;
|
||||
|
||||
// Converting abstract element children into Vue VNodes
|
||||
var children = (element.children || []).map(function (child) {
|
||||
return convert(child, {}, {});
|
||||
});
|
||||
|
||||
// Converting abstract element attributes into valid Vue format
|
||||
var mixins = Object.keys(element.attributes || {}).reduce(function (mixins, key) {
|
||||
var value = element.attributes[key];
|
||||
switch (key) {
|
||||
case 'class':
|
||||
mixins.class = classToObject(value);
|
||||
break;
|
||||
case 'style':
|
||||
mixins.style = styleToObject(value);
|
||||
break;
|
||||
default:
|
||||
mixins.attrs[key] = value;
|
||||
}
|
||||
return mixins;
|
||||
}, {
|
||||
attrs: {},
|
||||
class: {},
|
||||
style: {}
|
||||
});
|
||||
|
||||
// Now, we'll return the VNode
|
||||
attrs.class;
|
||||
var _attrs$style = attrs.style,
|
||||
aStyle = _attrs$style === void 0 ? {} : _attrs$style,
|
||||
otherAttrs = _objectWithoutProperties(attrs, _excluded2);
|
||||
|
||||
// If a valid gradientFill is provided, inject the gradient element and set fill to reference it
|
||||
if (gradientFill && gradientFill.id && (gradientFill.type === 'linear' || gradientFill.type === 'radial')) {
|
||||
var gradientType = gradientFill.type,
|
||||
_gradientFill$stops = gradientFill.stops,
|
||||
stops = _gradientFill$stops === void 0 ? [] : _gradientFill$stops,
|
||||
id = gradientFill.id,
|
||||
gradientProps = _objectWithoutProperties(gradientFill, _excluded3);
|
||||
var gradientTag = gradientType === 'linear' ? 'linearGradient' : 'radialGradient';
|
||||
var gradientVNode = h(gradientTag, _objectSpread2(_objectSpread2({}, gradientProps), {}, {
|
||||
id: id
|
||||
}), stops.map(createGradientStop));
|
||||
return h(element.tag, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, renderProps), {}, {
|
||||
class: mixins.class,
|
||||
style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
|
||||
}, mixins.attrs), otherAttrs), {}, {
|
||||
fill: "url(#".concat(id, ")")
|
||||
}), [gradientVNode].concat(_toConsumableArray(children)));
|
||||
}
|
||||
return h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, renderProps), {}, {
|
||||
class: mixins.class,
|
||||
style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
|
||||
}, mixins.attrs), otherAttrs), children);
|
||||
}
|
||||
|
||||
var PRODUCTION = false;
|
||||
try {
|
||||
PRODUCTION = process.env.NODE_ENV === 'production';
|
||||
} catch (e) {}
|
||||
function log () {
|
||||
if (!PRODUCTION && console && typeof console.error === 'function') {
|
||||
var _console;
|
||||
(_console = console).error.apply(_console, arguments);
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeIconArgs(icon) {
|
||||
if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
|
||||
return icon;
|
||||
}
|
||||
if (parse.icon) {
|
||||
return parse.icon(icon);
|
||||
}
|
||||
if (icon === null) {
|
||||
return null;
|
||||
}
|
||||
if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
|
||||
return icon;
|
||||
}
|
||||
if (Array.isArray(icon) && icon.length === 2) {
|
||||
return {
|
||||
prefix: icon[0],
|
||||
iconName: icon[1]
|
||||
};
|
||||
}
|
||||
if (typeof icon === 'string') {
|
||||
return {
|
||||
prefix: 'fas',
|
||||
iconName: icon
|
||||
};
|
||||
}
|
||||
}
|
||||
var FontAwesomeIcon = defineComponent({
|
||||
name: 'FontAwesomeIcon',
|
||||
props: {
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// the fixedWidth property has been deprecated as of version 7
|
||||
fixedWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
flip: {
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
validator: function validator(value) {
|
||||
return [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
type: [Object, Array, String],
|
||||
required: true
|
||||
},
|
||||
mask: {
|
||||
type: [Object, Array, String],
|
||||
default: null
|
||||
},
|
||||
maskId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
listItem: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pull: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
return ['right', 'left'].indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
pulse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rotation: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1;
|
||||
}
|
||||
},
|
||||
// the rotateBy property is only supported in version 7.0.0 and later
|
||||
rotateBy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
swapOpacity: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
return ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
spin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transform: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
symbol: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
titleId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bounce: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
shake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
beat: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
beatFade: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
flash: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinPulse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinReverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// the widthAuto property is only supported in version 7.0.0 and later
|
||||
widthAuto: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// the canvasSquare and canvasRoomy properties are only supported in version 7.3.0 and later
|
||||
canvasSquare: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
canvasRoomy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
gradientFill: {
|
||||
type: Object,
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
if (typeof value.id !== 'string' || !value.id) {
|
||||
console.warn('FontAwesomeIcon: gradientFill.id must be a non-empty string');
|
||||
return false;
|
||||
}
|
||||
if (value.type !== 'linear' && value.type !== 'radial') {
|
||||
console.warn('FontAwesomeIcon: gradientFill.type must be "linear" or "radial"');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
// the following animation properties are only supported in version 7.3.0 and later
|
||||
flip360: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
buzz: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
float: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
jello: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinSnap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinSnap4: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinSnap8: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
swing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
wag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup: function setup(props, _ref) {
|
||||
var attrs = _ref.attrs;
|
||||
var icon$1 = computed(function () {
|
||||
return normalizeIconArgs(props.icon);
|
||||
});
|
||||
var classes = computed(function () {
|
||||
return objectWithKey('classes', classList(props));
|
||||
});
|
||||
var transform = computed(function () {
|
||||
return objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform);
|
||||
});
|
||||
var mask = computed(function () {
|
||||
return objectWithKey('mask', normalizeIconArgs(props.mask));
|
||||
});
|
||||
var renderedIcon = computed(function () {
|
||||
var iconProps = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, {
|
||||
symbol: props.symbol,
|
||||
maskId: props.maskId
|
||||
});
|
||||
|
||||
// the title attribute will only apply to versions prior to version 7.0.0
|
||||
iconProps.title = props.title;
|
||||
iconProps.titleId = props.titleId;
|
||||
return icon(icon$1.value, iconProps);
|
||||
});
|
||||
watch(renderedIcon, function (value) {
|
||||
if (!value) {
|
||||
return log('Could not find one or more icon(s)', icon$1.value, mask.value);
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
if (props.gradientFill && props.symbol) {
|
||||
log('gradientFill is not supported when symbol is true and will be ignored');
|
||||
}
|
||||
var vnode = computed(function () {
|
||||
return renderedIcon.value ? convert(renderedIcon.value.abstract[0], {
|
||||
gradientFill: props.symbol ? null : props.gradientFill
|
||||
}, attrs) : null;
|
||||
});
|
||||
return function () {
|
||||
return vnode.value;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var FontAwesomeLayers = defineComponent({
|
||||
name: 'FontAwesomeLayers',
|
||||
props: {
|
||||
fixedWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup: function setup(props, _ref) {
|
||||
var slots = _ref.slots;
|
||||
var familyPrefix = config.familyPrefix;
|
||||
var className = computed(function () {
|
||||
return ["".concat(familyPrefix, "-layers")].concat(_toConsumableArray(props.fixedWidth ? ["".concat(familyPrefix, "-fw")] : []));
|
||||
});
|
||||
return function () {
|
||||
return h('div', {
|
||||
class: className.value
|
||||
}, slots.default ? slots.default() : []);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var FontAwesomeLayersText = defineComponent({
|
||||
name: 'FontAwesomeLayersText',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
transform: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
counter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
setup: function setup(props, _ref) {
|
||||
var attrs = _ref.attrs;
|
||||
var familyPrefix = config.familyPrefix;
|
||||
var classes = computed(function () {
|
||||
return objectWithKey('classes', [].concat(_toConsumableArray(props.counter ? ["".concat(familyPrefix, "-layers-counter")] : []), _toConsumableArray(props.position ? ["".concat(familyPrefix, "-layers-").concat(props.position)] : [])));
|
||||
});
|
||||
var transform = computed(function () {
|
||||
return objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform);
|
||||
});
|
||||
var abstractElement = computed(function () {
|
||||
var _text = text(props.value.toString(), _objectSpread2(_objectSpread2({}, transform.value), classes.value)),
|
||||
abstract = _text.abstract;
|
||||
if (props.counter) {
|
||||
abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '');
|
||||
}
|
||||
return abstract[0];
|
||||
});
|
||||
var vnode = computed(function () {
|
||||
return convert(abstractElement.value, {}, attrs);
|
||||
});
|
||||
return function () {
|
||||
return vnode.value;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText };
|
||||
+771
@@ -0,0 +1,771 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@fortawesome/fontawesome-svg-core')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'vue', '@fortawesome/fontawesome-svg-core'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vue-fontawesome"] = {}, global.vue, global.FontAwesome));
|
||||
})(this, (function (exports, vue, fontawesomeSvgCore) { 'use strict';
|
||||
|
||||
function _arrayLikeToArray(r, a) {
|
||||
(null == a || a > r.length) && (a = r.length);
|
||||
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
||||
return n;
|
||||
}
|
||||
function _arrayWithoutHoles(r) {
|
||||
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
||||
}
|
||||
function _defineProperty(e, r, t) {
|
||||
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
||||
value: t,
|
||||
enumerable: !0,
|
||||
configurable: !0,
|
||||
writable: !0
|
||||
}) : e[r] = t, e;
|
||||
}
|
||||
function _iterableToArray(r) {
|
||||
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
||||
}
|
||||
function _nonIterableSpread() {
|
||||
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
||||
}
|
||||
function ownKeys(e, r) {
|
||||
var t = Object.keys(e);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var o = Object.getOwnPropertySymbols(e);
|
||||
r && (o = o.filter(function (r) {
|
||||
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
||||
})), t.push.apply(t, o);
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _objectSpread2(e) {
|
||||
for (var r = 1; r < arguments.length; r++) {
|
||||
var t = null != arguments[r] ? arguments[r] : {};
|
||||
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
||||
_defineProperty(e, r, t[r]);
|
||||
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
||||
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
||||
});
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function _objectWithoutProperties(e, t) {
|
||||
if (null == e) return {};
|
||||
var o,
|
||||
r,
|
||||
i = _objectWithoutPropertiesLoose(e, t);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var n = Object.getOwnPropertySymbols(e);
|
||||
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
||||
}
|
||||
return i;
|
||||
}
|
||||
function _objectWithoutPropertiesLoose(r, e) {
|
||||
if (null == r) return {};
|
||||
var t = {};
|
||||
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
||||
if (-1 !== e.indexOf(n)) continue;
|
||||
t[n] = r[n];
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _toConsumableArray(r) {
|
||||
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
||||
}
|
||||
function _toPrimitive(t, r) {
|
||||
if ("object" != typeof t || !t) return t;
|
||||
var e = t[Symbol.toPrimitive];
|
||||
if (void 0 !== e) {
|
||||
var i = e.call(t, r || "default");
|
||||
if ("object" != typeof i) return i;
|
||||
throw new TypeError("@@toPrimitive must return a primitive value.");
|
||||
}
|
||||
return ("string" === r ? String : Number)(t);
|
||||
}
|
||||
function _toPropertyKey(t) {
|
||||
var i = _toPrimitive(t, "string");
|
||||
return "symbol" == typeof i ? i : i + "";
|
||||
}
|
||||
function _typeof(o) {
|
||||
"@babel/helpers - typeof";
|
||||
|
||||
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
|
||||
return typeof o;
|
||||
} : function (o) {
|
||||
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
||||
}, _typeof(o);
|
||||
}
|
||||
function _unsupportedIterableToArray(r, a) {
|
||||
if (r) {
|
||||
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
||||
var t = {}.toString.call(r).slice(8, -1);
|
||||
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
||||
}
|
||||
}
|
||||
|
||||
function objectWithKey(key, value) {
|
||||
return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
|
||||
}
|
||||
function classList(props) {
|
||||
var _classes;
|
||||
var classes = (_classes = {
|
||||
'fa-spin': props.spin,
|
||||
'fa-pulse': props.pulse,
|
||||
// the fixedWidth property has been deprecated as of version 7.0.0
|
||||
'fa-fw': props.fixedWidth,
|
||||
'fa-border': props.border,
|
||||
'fa-li': props.listItem,
|
||||
'fa-inverse': props.inverse,
|
||||
'fa-flip': props.flip === true,
|
||||
'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
|
||||
'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both'
|
||||
}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, "fa-".concat(props.size), props.size !== null), "fa-rotate-".concat(props.rotation), props.rotation !== null), 'fa-rotate-by', props.rotateBy), "fa-pull-".concat(props.pull), props.pull !== null), 'fa-swap-opacity', props.swapOpacity), 'fa-bounce', props.bounce), 'fa-shake', props.shake), 'fa-beat', props.beat), 'fa-fade', props.fade), 'fa-beat-fade', props.beatFade), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, 'fa-flash', props.flash), 'fa-spin-pulse', props.spinPulse), 'fa-spin-reverse', props.spinReverse), 'fa-width-auto', props.widthAuto), 'fa-canvas-square', props.canvasSquare), 'fa-canvas-roomy', props.canvasRoomy), 'fa-flip-360', props.flip360), 'fa-buzz', props.buzz), 'fa-float', props.float), 'fa-jello', props.jello), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classes, 'fa-spin-snap', props.spinSnap), 'fa-spin-snap-4', props.spinSnap4), 'fa-spin-snap-8', props.spinSnap8), 'fa-swing', props.swing), 'fa-wag', props.wag));
|
||||
return Object.keys(classes).map(function (key) {
|
||||
return classes[key] ? key : null;
|
||||
}).filter(function (key) {
|
||||
return key;
|
||||
});
|
||||
}
|
||||
|
||||
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
||||
|
||||
var humps$1 = {exports: {}};
|
||||
|
||||
(function (module) {
|
||||
(function(global) {
|
||||
|
||||
var _processKeys = function(convert, obj, options) {
|
||||
if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) {
|
||||
return obj;
|
||||
}
|
||||
|
||||
var output,
|
||||
i = 0,
|
||||
l = 0;
|
||||
|
||||
if(_isArray(obj)) {
|
||||
output = [];
|
||||
for(l=obj.length; i<l; i++) {
|
||||
output.push(_processKeys(convert, obj[i], options));
|
||||
}
|
||||
}
|
||||
else {
|
||||
output = {};
|
||||
for(var key in obj) {
|
||||
if(Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
output[convert(key, options)] = _processKeys(convert, obj[key], options);
|
||||
}
|
||||
}
|
||||
}
|
||||
return output;
|
||||
};
|
||||
|
||||
// String conversion methods
|
||||
|
||||
var separateWords = function(string, options) {
|
||||
options = options || {};
|
||||
var separator = options.separator || '_';
|
||||
var split = options.split || /(?=[A-Z])/;
|
||||
|
||||
return string.split(split).join(separator);
|
||||
};
|
||||
|
||||
var camelize = function(string) {
|
||||
if (_isNumerical(string)) {
|
||||
return string;
|
||||
}
|
||||
string = string.replace(/[\-_\s]+(.)?/g, function(match, chr) {
|
||||
return chr ? chr.toUpperCase() : '';
|
||||
});
|
||||
// Ensure 1st char is always lowercase
|
||||
return string.substr(0, 1).toLowerCase() + string.substr(1);
|
||||
};
|
||||
|
||||
var pascalize = function(string) {
|
||||
var camelized = camelize(string);
|
||||
// Ensure 1st char is always uppercase
|
||||
return camelized.substr(0, 1).toUpperCase() + camelized.substr(1);
|
||||
};
|
||||
|
||||
var decamelize = function(string, options) {
|
||||
return separateWords(string, options).toLowerCase();
|
||||
};
|
||||
|
||||
// Utilities
|
||||
// Taken from Underscore.js
|
||||
|
||||
var toString = Object.prototype.toString;
|
||||
|
||||
var _isFunction = function(obj) {
|
||||
return typeof(obj) === 'function';
|
||||
};
|
||||
var _isObject = function(obj) {
|
||||
return obj === Object(obj);
|
||||
};
|
||||
var _isArray = function(obj) {
|
||||
return toString.call(obj) == '[object Array]';
|
||||
};
|
||||
var _isDate = function(obj) {
|
||||
return toString.call(obj) == '[object Date]';
|
||||
};
|
||||
var _isRegExp = function(obj) {
|
||||
return toString.call(obj) == '[object RegExp]';
|
||||
};
|
||||
var _isBoolean = function(obj) {
|
||||
return toString.call(obj) == '[object Boolean]';
|
||||
};
|
||||
|
||||
// Performant way to determine if obj coerces to a number
|
||||
var _isNumerical = function(obj) {
|
||||
obj = obj - 0;
|
||||
return obj === obj;
|
||||
};
|
||||
|
||||
// Sets up function which handles processing keys
|
||||
// allowing the convert function to be modified by a callback
|
||||
var _processor = function(convert, options) {
|
||||
var callback = options && 'process' in options ? options.process : options;
|
||||
|
||||
if(typeof(callback) !== 'function') {
|
||||
return convert;
|
||||
}
|
||||
|
||||
return function(string, options) {
|
||||
return callback(string, convert, options);
|
||||
}
|
||||
};
|
||||
|
||||
var humps = {
|
||||
camelize: camelize,
|
||||
decamelize: decamelize,
|
||||
pascalize: pascalize,
|
||||
depascalize: decamelize,
|
||||
camelizeKeys: function(object, options) {
|
||||
return _processKeys(_processor(camelize, options), object);
|
||||
},
|
||||
decamelizeKeys: function(object, options) {
|
||||
return _processKeys(_processor(decamelize, options), object, options);
|
||||
},
|
||||
pascalizeKeys: function(object, options) {
|
||||
return _processKeys(_processor(pascalize, options), object);
|
||||
},
|
||||
depascalizeKeys: function () {
|
||||
return this.decamelizeKeys.apply(this, arguments);
|
||||
}
|
||||
};
|
||||
|
||||
if (module.exports) {
|
||||
module.exports = humps;
|
||||
} else {
|
||||
global.humps = humps;
|
||||
}
|
||||
|
||||
})(commonjsGlobal);
|
||||
} (humps$1));
|
||||
|
||||
var humps = humps$1.exports;
|
||||
|
||||
var _excluded = ["gradientFill"],
|
||||
_excluded2 = ["class", "style"],
|
||||
_excluded3 = ["type", "stops", "id"];
|
||||
|
||||
/**
|
||||
* Converts a CSS style into a plain Javascript object.
|
||||
* @param {String} style The style to converts into a plain Javascript object.
|
||||
* @returns {Object}
|
||||
*/
|
||||
function styleToObject(style) {
|
||||
return style.split(';').map(function (s) {
|
||||
return s.trim();
|
||||
}).filter(function (s) {
|
||||
return s;
|
||||
}).reduce(function (output, pair) {
|
||||
var idx = pair.indexOf(':');
|
||||
var prop = humps.camelize(pair.slice(0, idx));
|
||||
var value = pair.slice(idx + 1).trim();
|
||||
output[prop] = value;
|
||||
return output;
|
||||
}, {});
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a CSS class list into a plain Javascript object.
|
||||
* @param {Array<String>} classes The class list to convert.
|
||||
* @returns {Object}
|
||||
*/
|
||||
function classToObject(classes) {
|
||||
return classes.split(/\s+/).reduce(function (output, className) {
|
||||
output[className] = true;
|
||||
return output;
|
||||
}, {});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a Vue VNode for an SVG gradient stop element.
|
||||
* @param {Object} stop The gradient stop definition.
|
||||
* @param {string|number} stop.offset The offset of the stop.
|
||||
* @param {string} stop.color The color of the stop.
|
||||
* @param {number} [stop.opacity] The opacity of the stop.
|
||||
* @param {number} index The index of the stop.
|
||||
* @returns {VNode}
|
||||
*/
|
||||
function createGradientStop(stop, index) {
|
||||
return vue.h('stop', _objectSpread2({
|
||||
'key': "".concat(index, "-").concat(stop.offset),
|
||||
'offset': stop.offset,
|
||||
'stop-color': stop.color
|
||||
}, stop.opacity !== undefined && {
|
||||
'stop-opacity': stop.opacity
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively removes the fill attribute from all path elements in an abstract element tree.
|
||||
* @param {AbstractElement | String} abstractElement
|
||||
* @returns {AbstractElement | String}
|
||||
*/
|
||||
function stripFillsFromPaths(abstractElement) {
|
||||
if (typeof abstractElement === 'string') return abstractElement;
|
||||
var children = (abstractElement.children || []).map(stripFillsFromPaths);
|
||||
if (abstractElement.tag === 'path' && abstractElement.attributes && 'fill' in abstractElement.attributes) {
|
||||
return _objectSpread2(_objectSpread2({}, abstractElement), {}, {
|
||||
attributes: _objectSpread2(_objectSpread2({}, abstractElement.attributes), {}, {
|
||||
fill: undefined
|
||||
}),
|
||||
children: children
|
||||
});
|
||||
}
|
||||
return _objectSpread2(_objectSpread2({}, abstractElement), {}, {
|
||||
children: children
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a FontAwesome abstract element of an icon into a Vue VNode.
|
||||
* @param {AbstractElement | String} abstractElement The element to convert.
|
||||
* @param {Object} props Options including gradientFill and any extra VNode props.
|
||||
* @param {Object} attrs The user-defined native HTML attributes.
|
||||
* @returns {VNode}
|
||||
*/
|
||||
function convert(abstractElement) {
|
||||
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
// If the abstract element is a string, we'll just return a string render function
|
||||
if (typeof abstractElement === 'string') {
|
||||
return abstractElement;
|
||||
}
|
||||
var _props$gradientFill = props.gradientFill,
|
||||
gradientFill = _props$gradientFill === void 0 ? null : _props$gradientFill,
|
||||
renderProps = _objectWithoutProperties(props, _excluded);
|
||||
|
||||
// If a gradientFill (or fill attr) is provided, strip fill from all descendant path elements
|
||||
// up front so the gradient/fill takes precedence over the icon's built-in fill
|
||||
var shouldStripFills = !!gradientFill || 'fill' in attrs;
|
||||
var element = shouldStripFills ? stripFillsFromPaths(abstractElement) : abstractElement;
|
||||
|
||||
// Converting abstract element children into Vue VNodes
|
||||
var children = (element.children || []).map(function (child) {
|
||||
return convert(child, {}, {});
|
||||
});
|
||||
|
||||
// Converting abstract element attributes into valid Vue format
|
||||
var mixins = Object.keys(element.attributes || {}).reduce(function (mixins, key) {
|
||||
var value = element.attributes[key];
|
||||
switch (key) {
|
||||
case 'class':
|
||||
mixins.class = classToObject(value);
|
||||
break;
|
||||
case 'style':
|
||||
mixins.style = styleToObject(value);
|
||||
break;
|
||||
default:
|
||||
mixins.attrs[key] = value;
|
||||
}
|
||||
return mixins;
|
||||
}, {
|
||||
attrs: {},
|
||||
class: {},
|
||||
style: {}
|
||||
});
|
||||
|
||||
// Now, we'll return the VNode
|
||||
attrs.class;
|
||||
var _attrs$style = attrs.style,
|
||||
aStyle = _attrs$style === void 0 ? {} : _attrs$style,
|
||||
otherAttrs = _objectWithoutProperties(attrs, _excluded2);
|
||||
|
||||
// If a valid gradientFill is provided, inject the gradient element and set fill to reference it
|
||||
if (gradientFill && gradientFill.id && (gradientFill.type === 'linear' || gradientFill.type === 'radial')) {
|
||||
var gradientType = gradientFill.type,
|
||||
_gradientFill$stops = gradientFill.stops,
|
||||
stops = _gradientFill$stops === void 0 ? [] : _gradientFill$stops,
|
||||
id = gradientFill.id,
|
||||
gradientProps = _objectWithoutProperties(gradientFill, _excluded3);
|
||||
var gradientTag = gradientType === 'linear' ? 'linearGradient' : 'radialGradient';
|
||||
var gradientVNode = vue.h(gradientTag, _objectSpread2(_objectSpread2({}, gradientProps), {}, {
|
||||
id: id
|
||||
}), stops.map(createGradientStop));
|
||||
return vue.h(element.tag, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, renderProps), {}, {
|
||||
class: mixins.class,
|
||||
style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
|
||||
}, mixins.attrs), otherAttrs), {}, {
|
||||
fill: "url(#".concat(id, ")")
|
||||
}), [gradientVNode].concat(_toConsumableArray(children)));
|
||||
}
|
||||
return vue.h(abstractElement.tag, _objectSpread2(_objectSpread2(_objectSpread2({}, renderProps), {}, {
|
||||
class: mixins.class,
|
||||
style: _objectSpread2(_objectSpread2({}, mixins.style), aStyle)
|
||||
}, mixins.attrs), otherAttrs), children);
|
||||
}
|
||||
|
||||
var PRODUCTION = false;
|
||||
try {
|
||||
PRODUCTION = process.env.NODE_ENV === 'production';
|
||||
} catch (e) {}
|
||||
function log () {
|
||||
if (!PRODUCTION && console && typeof console.error === 'function') {
|
||||
var _console;
|
||||
(_console = console).error.apply(_console, arguments);
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeIconArgs(icon) {
|
||||
if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
|
||||
return icon;
|
||||
}
|
||||
if (fontawesomeSvgCore.parse.icon) {
|
||||
return fontawesomeSvgCore.parse.icon(icon);
|
||||
}
|
||||
if (icon === null) {
|
||||
return null;
|
||||
}
|
||||
if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
|
||||
return icon;
|
||||
}
|
||||
if (Array.isArray(icon) && icon.length === 2) {
|
||||
return {
|
||||
prefix: icon[0],
|
||||
iconName: icon[1]
|
||||
};
|
||||
}
|
||||
if (typeof icon === 'string') {
|
||||
return {
|
||||
prefix: 'fas',
|
||||
iconName: icon
|
||||
};
|
||||
}
|
||||
}
|
||||
var FontAwesomeIcon = vue.defineComponent({
|
||||
name: 'FontAwesomeIcon',
|
||||
props: {
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// the fixedWidth property has been deprecated as of version 7
|
||||
fixedWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
flip: {
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
validator: function validator(value) {
|
||||
return [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
type: [Object, Array, String],
|
||||
required: true
|
||||
},
|
||||
mask: {
|
||||
type: [Object, Array, String],
|
||||
default: null
|
||||
},
|
||||
maskId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
listItem: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pull: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
return ['right', 'left'].indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
pulse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rotation: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
return [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1;
|
||||
}
|
||||
},
|
||||
// the rotateBy property is only supported in version 7.0.0 and later
|
||||
rotateBy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
swapOpacity: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
return ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
spin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transform: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
symbol: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
titleId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bounce: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
shake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
beat: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
beatFade: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
flash: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinPulse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinReverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// the widthAuto property is only supported in version 7.0.0 and later
|
||||
widthAuto: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// the canvasSquare and canvasRoomy properties are only supported in version 7.3.0 and later
|
||||
canvasSquare: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
canvasRoomy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
gradientFill: {
|
||||
type: Object,
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
if (typeof value.id !== 'string' || !value.id) {
|
||||
console.warn('FontAwesomeIcon: gradientFill.id must be a non-empty string');
|
||||
return false;
|
||||
}
|
||||
if (value.type !== 'linear' && value.type !== 'radial') {
|
||||
console.warn('FontAwesomeIcon: gradientFill.type must be "linear" or "radial"');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
// the following animation properties are only supported in version 7.3.0 and later
|
||||
flip360: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
buzz: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
float: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
jello: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinSnap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinSnap4: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinSnap8: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
swing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
wag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup: function setup(props, _ref) {
|
||||
var attrs = _ref.attrs;
|
||||
var icon = vue.computed(function () {
|
||||
return normalizeIconArgs(props.icon);
|
||||
});
|
||||
var classes = vue.computed(function () {
|
||||
return objectWithKey('classes', classList(props));
|
||||
});
|
||||
var transform = vue.computed(function () {
|
||||
return objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
|
||||
});
|
||||
var mask = vue.computed(function () {
|
||||
return objectWithKey('mask', normalizeIconArgs(props.mask));
|
||||
});
|
||||
var renderedIcon = vue.computed(function () {
|
||||
var iconProps = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes.value), transform.value), mask.value), {}, {
|
||||
symbol: props.symbol,
|
||||
maskId: props.maskId
|
||||
});
|
||||
|
||||
// the title attribute will only apply to versions prior to version 7.0.0
|
||||
iconProps.title = props.title;
|
||||
iconProps.titleId = props.titleId;
|
||||
return fontawesomeSvgCore.icon(icon.value, iconProps);
|
||||
});
|
||||
vue.watch(renderedIcon, function (value) {
|
||||
if (!value) {
|
||||
return log('Could not find one or more icon(s)', icon.value, mask.value);
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
if (props.gradientFill && props.symbol) {
|
||||
log('gradientFill is not supported when symbol is true and will be ignored');
|
||||
}
|
||||
var vnode = vue.computed(function () {
|
||||
return renderedIcon.value ? convert(renderedIcon.value.abstract[0], {
|
||||
gradientFill: props.symbol ? null : props.gradientFill
|
||||
}, attrs) : null;
|
||||
});
|
||||
return function () {
|
||||
return vnode.value;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var FontAwesomeLayers = vue.defineComponent({
|
||||
name: 'FontAwesomeLayers',
|
||||
props: {
|
||||
fixedWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup: function setup(props, _ref) {
|
||||
var slots = _ref.slots;
|
||||
var familyPrefix = fontawesomeSvgCore.config.familyPrefix;
|
||||
var className = vue.computed(function () {
|
||||
return ["".concat(familyPrefix, "-layers")].concat(_toConsumableArray(props.fixedWidth ? ["".concat(familyPrefix, "-fw")] : []));
|
||||
});
|
||||
return function () {
|
||||
return vue.h('div', {
|
||||
class: className.value
|
||||
}, slots.default ? slots.default() : []);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var FontAwesomeLayersText = vue.defineComponent({
|
||||
name: 'FontAwesomeLayersText',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
transform: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
counter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: function validator(value) {
|
||||
return ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
setup: function setup(props, _ref) {
|
||||
var attrs = _ref.attrs;
|
||||
var familyPrefix = fontawesomeSvgCore.config.familyPrefix;
|
||||
var classes = vue.computed(function () {
|
||||
return objectWithKey('classes', [].concat(_toConsumableArray(props.counter ? ["".concat(familyPrefix, "-layers-counter")] : []), _toConsumableArray(props.position ? ["".concat(familyPrefix, "-layers-").concat(props.position)] : [])));
|
||||
});
|
||||
var transform = vue.computed(function () {
|
||||
return objectWithKey('transform', typeof props.transform === 'string' ? fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
|
||||
});
|
||||
var abstractElement = vue.computed(function () {
|
||||
var _text = fontawesomeSvgCore.text(props.value.toString(), _objectSpread2(_objectSpread2({}, transform.value), classes.value)),
|
||||
abstract = _text.abstract;
|
||||
if (props.counter) {
|
||||
abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '');
|
||||
}
|
||||
return abstract[0];
|
||||
});
|
||||
var vnode = vue.computed(function () {
|
||||
return convert(abstractElement.value, {}, attrs);
|
||||
});
|
||||
return function () {
|
||||
return vnode.value;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
exports.FontAwesomeIcon = FontAwesomeIcon;
|
||||
exports.FontAwesomeLayers = FontAwesomeLayers;
|
||||
exports.FontAwesomeLayersText = FontAwesomeLayersText;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
{
|
||||
"name": "@fortawesome/vue-fontawesome",
|
||||
"description": "Official Vue component for Font Awesome 7",
|
||||
"version": "3.3.3",
|
||||
"main": "index.js",
|
||||
"files": [
|
||||
"README.md",
|
||||
"LICENSE.txt",
|
||||
"UPGRADING.md",
|
||||
"CHANGELOG.md",
|
||||
"index.d.ts",
|
||||
"index.es.js",
|
||||
"index.js",
|
||||
"src/components/**.js",
|
||||
"src/**.js"
|
||||
],
|
||||
"module": "index.es.js",
|
||||
"jsnext:main": "index.es.js",
|
||||
"types": "index.d.ts",
|
||||
"homepage": "https://github.com/FortAwesome/vue-fontawesome",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/FortAwesome/vue-fontawesome.git"
|
||||
},
|
||||
"contributors": [
|
||||
"Aaron Parker <github.com/parkeyparker>",
|
||||
"Brandon Mork <github.com/brandon-mork>",
|
||||
"btaens <github.com/btaens>",
|
||||
"David Driscoll <github.com/david-driscoll>",
|
||||
"Graham Campbell <github.com/GrahamCampbell>",
|
||||
"Liu Xinyu <github.com/meteorlxy>",
|
||||
"Michael Cozzolino <https://github.com/michaelcozzolino>",
|
||||
"Okke Tijhuis <github.com/otijhuis>",
|
||||
"Romain Failla <https://github.com/rigma>",
|
||||
"SirLamer <github.com/SirLamer>",
|
||||
"Tyranteon <github.com/tyranteon>",
|
||||
"Vinicius Rangel <github.com/viniciuslrangel>",
|
||||
"Xaver Schulz <github.com/schulz3000>",
|
||||
"Yannick Ihmels <github.com/ihmels>",
|
||||
"Brian Talbot <https://github.com/talbs>",
|
||||
"Frances Botsford <https://github.com/frrrances>",
|
||||
"Jason Lundien <https://github.com/jasonlundien>",
|
||||
"Mike Wilkerson <https://github.com/mlwilkerson>",
|
||||
"Rob Madole <rob@fontawesome.com>",
|
||||
"Travis Chase <travis@fontawesome.com>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"build": "rollup -c rollup.config.js",
|
||||
"dist": "cross-env NODE_ENV=production npm run build",
|
||||
"test": "vitest run",
|
||||
"test:types": "vitest run --typecheck.only",
|
||||
"prepack": "npm run dist"
|
||||
},
|
||||
"lint-staged": {
|
||||
"README.md": [
|
||||
"markdown-toc -i",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7",
|
||||
"vue": ">= 3.0.0 < 4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.18.2",
|
||||
"@babel/plugin-external-helpers": "^7.17.12",
|
||||
"@babel/plugin-proposal-class-properties": "^7.17.12",
|
||||
"@babel/plugin-proposal-json-strings": "^7.17.12",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
||||
"@babel/preset-env": "^7.18.2",
|
||||
"@fortawesome/fontawesome-svg-core": "^7.0.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^7.0.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^7.0.0",
|
||||
"@rollup/plugin-babel": "^5.3.1",
|
||||
"@rollup/plugin-commonjs": "^22.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.3.0",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"concurrently": "^7.2.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"humps": "^2.0.1",
|
||||
"husky": "^8.0.1",
|
||||
"jsdom": "^22.1.0",
|
||||
"lint-staged": "^13.0.0",
|
||||
"vitest": "^4.0.16",
|
||||
"markdown-toc": "^1.2.0",
|
||||
"prettier": "^3.0.3",
|
||||
"rollup": "^2.75.6",
|
||||
"typescript": "^6.0.0",
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
+262
@@ -0,0 +1,262 @@
|
||||
import { classList, objectWithKey } from '../utils'
|
||||
import { computed, defineComponent, watch } from 'vue'
|
||||
import { icon as faIcon, parse as faParse } from '@fortawesome/fontawesome-svg-core'
|
||||
|
||||
import convert from '../converter'
|
||||
import log from '../logger'
|
||||
|
||||
function normalizeIconArgs(icon) {
|
||||
if (icon && typeof icon === 'object' && icon.prefix && icon.iconName && icon.icon) {
|
||||
return icon
|
||||
}
|
||||
|
||||
if (faParse.icon) {
|
||||
return faParse.icon(icon)
|
||||
}
|
||||
|
||||
if (icon === null) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (typeof icon === 'object' && icon.prefix && icon.iconName) {
|
||||
return icon
|
||||
}
|
||||
|
||||
if (Array.isArray(icon) && icon.length === 2) {
|
||||
return { prefix: icon[0], iconName: icon[1] }
|
||||
}
|
||||
|
||||
if (typeof icon === 'string') {
|
||||
return { prefix: 'fas', iconName: icon }
|
||||
}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FontAwesomeIcon',
|
||||
|
||||
props: {
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// the fixedWidth property has been deprecated as of version 7
|
||||
fixedWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
flip: {
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
validator: (value) => [true, false, 'horizontal', 'vertical', 'both'].indexOf(value) > -1
|
||||
},
|
||||
icon: {
|
||||
type: [Object, Array, String],
|
||||
required: true
|
||||
},
|
||||
mask: {
|
||||
type: [Object, Array, String],
|
||||
default: null
|
||||
},
|
||||
maskId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
listItem: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pull: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: (value) => ['right', 'left'].indexOf(value) > -1
|
||||
},
|
||||
pulse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rotation: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
validator: (value) => [90, 180, 270].indexOf(Number.parseInt(value, 10)) > -1
|
||||
},
|
||||
// the rotateBy property is only supported in version 7.0.0 and later
|
||||
rotateBy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
swapOpacity: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: (value) => ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1
|
||||
},
|
||||
spin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transform: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
symbol: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
titleId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bounce: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
shake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
beat: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
beatFade: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
flash: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinPulse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinReverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// the widthAuto property is only supported in version 7.0.0 and later
|
||||
widthAuto: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// the canvasSquare and canvasRoomy properties are only supported in version 7.3.0 and later
|
||||
canvasSquare: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
canvasRoomy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
gradientFill: {
|
||||
type: Object,
|
||||
default: null,
|
||||
validator(value) {
|
||||
if (typeof value.id !== 'string' || !value.id) {
|
||||
console.warn('FontAwesomeIcon: gradientFill.id must be a non-empty string')
|
||||
return false
|
||||
}
|
||||
if (value.type !== 'linear' && value.type !== 'radial') {
|
||||
console.warn('FontAwesomeIcon: gradientFill.type must be "linear" or "radial"')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
// the following animation properties are only supported in version 7.3.0 and later
|
||||
flip360: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
buzz: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
float: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
jello: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinSnap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinSnap4: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
spinSnap8: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
swing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
wag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, { attrs }) {
|
||||
const icon = computed(() => normalizeIconArgs(props.icon))
|
||||
const classes = computed(() => objectWithKey('classes', classList(props)))
|
||||
const transform = computed(() => objectWithKey('transform', typeof props.transform === 'string' ? faParse.transform(props.transform) : props.transform))
|
||||
const mask = computed(() => objectWithKey('mask', normalizeIconArgs(props.mask)))
|
||||
|
||||
const renderedIcon = computed(() => {
|
||||
const iconProps = {
|
||||
...classes.value,
|
||||
...transform.value,
|
||||
...mask.value,
|
||||
symbol: props.symbol,
|
||||
maskId: props.maskId
|
||||
}
|
||||
|
||||
// the title attribute will only apply to versions prior to version 7.0.0
|
||||
iconProps.title = props.title
|
||||
iconProps.titleId = props.titleId
|
||||
|
||||
return faIcon(icon.value, iconProps)
|
||||
})
|
||||
|
||||
watch(
|
||||
renderedIcon,
|
||||
(value) => {
|
||||
if (!value) {
|
||||
return log('Could not find one or more icon(s)', icon.value, mask.value)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
if (props.gradientFill && props.symbol) {
|
||||
log('gradientFill is not supported when symbol is true and will be ignored')
|
||||
}
|
||||
|
||||
const vnode = computed(() =>
|
||||
renderedIcon.value ? convert(renderedIcon.value.abstract[0], { gradientFill: props.symbol ? null : props.gradientFill }, attrs) : null
|
||||
)
|
||||
|
||||
return () => vnode.value
|
||||
}
|
||||
})
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
import { computed, defineComponent, h } from 'vue'
|
||||
import { config } from '@fortawesome/fontawesome-svg-core'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FontAwesomeLayers',
|
||||
|
||||
props: {
|
||||
fixedWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, { slots }) {
|
||||
const { familyPrefix } = config
|
||||
|
||||
const className = computed(() => [`${familyPrefix}-layers`, ...(props.fixedWidth ? [`${familyPrefix}-fw`] : [])])
|
||||
|
||||
return () => h('div', { class: className.value }, slots.default ? slots.default() : [])
|
||||
}
|
||||
})
|
||||
Generated
Vendored
+50
@@ -0,0 +1,50 @@
|
||||
import { config, parse, text } from '@fortawesome/fontawesome-svg-core'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import convert from '../converter'
|
||||
import { objectWithKey } from '../utils'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FontAwesomeLayersText',
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
transform: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
counter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: (value) => ['bottom-left', 'bottom-right', 'top-left', 'top-right'].indexOf(value) > -1
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, { attrs }) {
|
||||
const { familyPrefix } = config
|
||||
|
||||
const classes = computed(() =>
|
||||
objectWithKey('classes', [
|
||||
...(props.counter ? [`${familyPrefix}-layers-counter`] : []),
|
||||
...(props.position ? [`${familyPrefix}-layers-${props.position}`] : [])
|
||||
])
|
||||
)
|
||||
const transform = computed(() => objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform))
|
||||
const abstractElement = computed(() => {
|
||||
const { abstract } = text(props.value.toString(), { ...transform.value, ...classes.value })
|
||||
if (props.counter) {
|
||||
abstract[0].attributes.class = abstract[0].attributes.class.replace('fa-layers-text', '')
|
||||
}
|
||||
return abstract[0]
|
||||
})
|
||||
|
||||
const vnode = computed(() => convert(abstractElement.value, {}, attrs))
|
||||
return () => vnode.value
|
||||
}
|
||||
})
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
import { h } from 'vue'
|
||||
import humps from 'humps'
|
||||
|
||||
/**
|
||||
* Converts a CSS style into a plain Javascript object.
|
||||
* @param {String} style The style to converts into a plain Javascript object.
|
||||
* @returns {Object}
|
||||
*/
|
||||
function styleToObject(style) {
|
||||
return style
|
||||
.split(';')
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s)
|
||||
.reduce((output, pair) => {
|
||||
const idx = pair.indexOf(':')
|
||||
const prop = humps.camelize(pair.slice(0, idx))
|
||||
const value = pair.slice(idx + 1).trim()
|
||||
|
||||
output[prop] = value
|
||||
return output
|
||||
}, {})
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a CSS class list into a plain Javascript object.
|
||||
* @param {Array<String>} classes The class list to convert.
|
||||
* @returns {Object}
|
||||
*/
|
||||
function classToObject(classes) {
|
||||
return classes.split(/\s+/).reduce((output, className) => {
|
||||
output[className] = true
|
||||
return output
|
||||
}, {})
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a Vue VNode for an SVG gradient stop element.
|
||||
* @param {Object} stop The gradient stop definition.
|
||||
* @param {string|number} stop.offset The offset of the stop.
|
||||
* @param {string} stop.color The color of the stop.
|
||||
* @param {number} [stop.opacity] The opacity of the stop.
|
||||
* @param {number} index The index of the stop.
|
||||
* @returns {VNode}
|
||||
*/
|
||||
function createGradientStop(stop, index) {
|
||||
return h('stop', {
|
||||
'key': `${index}-${stop.offset}`,
|
||||
'offset': stop.offset,
|
||||
'stop-color': stop.color,
|
||||
...(stop.opacity !== undefined && { 'stop-opacity': stop.opacity })
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively removes the fill attribute from all path elements in an abstract element tree.
|
||||
* @param {AbstractElement | String} abstractElement
|
||||
* @returns {AbstractElement | String}
|
||||
*/
|
||||
function stripFillsFromPaths(abstractElement) {
|
||||
if (typeof abstractElement === 'string') return abstractElement
|
||||
|
||||
const children = (abstractElement.children || []).map(stripFillsFromPaths)
|
||||
|
||||
if (abstractElement.tag === 'path' && abstractElement.attributes && 'fill' in abstractElement.attributes) {
|
||||
return { ...abstractElement, attributes: { ...abstractElement.attributes, fill: undefined }, children }
|
||||
}
|
||||
|
||||
return { ...abstractElement, children }
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a FontAwesome abstract element of an icon into a Vue VNode.
|
||||
* @param {AbstractElement | String} abstractElement The element to convert.
|
||||
* @param {Object} props Options including gradientFill and any extra VNode props.
|
||||
* @param {Object} attrs The user-defined native HTML attributes.
|
||||
* @returns {VNode}
|
||||
*/
|
||||
export default function convert(abstractElement, props = {}, attrs = {}) {
|
||||
// If the abstract element is a string, we'll just return a string render function
|
||||
if (typeof abstractElement === 'string') {
|
||||
return abstractElement
|
||||
}
|
||||
|
||||
const { gradientFill = null, ...renderProps } = props
|
||||
|
||||
// If a gradientFill (or fill attr) is provided, strip fill from all descendant path elements
|
||||
// up front so the gradient/fill takes precedence over the icon's built-in fill
|
||||
const shouldStripFills = !!gradientFill || 'fill' in attrs
|
||||
const element = shouldStripFills ? stripFillsFromPaths(abstractElement) : abstractElement
|
||||
|
||||
// Converting abstract element children into Vue VNodes
|
||||
const children = (element.children || []).map((child) => convert(child, {}, {}))
|
||||
|
||||
// Converting abstract element attributes into valid Vue format
|
||||
const mixins = Object.keys(element.attributes || {}).reduce(
|
||||
(mixins, key) => {
|
||||
const value = element.attributes[key]
|
||||
|
||||
switch (key) {
|
||||
case 'class':
|
||||
mixins.class = classToObject(value)
|
||||
break
|
||||
case 'style':
|
||||
mixins.style = styleToObject(value)
|
||||
break
|
||||
default:
|
||||
mixins.attrs[key] = value
|
||||
}
|
||||
|
||||
return mixins
|
||||
},
|
||||
{
|
||||
attrs: {},
|
||||
class: {},
|
||||
style: {}
|
||||
}
|
||||
)
|
||||
|
||||
// Now, we'll return the VNode
|
||||
const { class: _aClass = {}, style: aStyle = {}, ...otherAttrs } = attrs
|
||||
|
||||
// If a valid gradientFill is provided, inject the gradient element and set fill to reference it
|
||||
if (gradientFill && gradientFill.id && (gradientFill.type === 'linear' || gradientFill.type === 'radial')) {
|
||||
const { type: gradientType, stops = [], id, ...gradientProps } = gradientFill
|
||||
const gradientTag = gradientType === 'linear' ? 'linearGradient' : 'radialGradient'
|
||||
const gradientVNode = h(gradientTag, { ...gradientProps, id }, stops.map(createGradientStop))
|
||||
|
||||
return h(
|
||||
element.tag,
|
||||
{
|
||||
...renderProps,
|
||||
class: mixins.class,
|
||||
style: { ...mixins.style, ...aStyle },
|
||||
...mixins.attrs,
|
||||
...otherAttrs,
|
||||
fill: `url(#${id})`
|
||||
},
|
||||
[gradientVNode, ...children]
|
||||
)
|
||||
}
|
||||
|
||||
return h(
|
||||
abstractElement.tag,
|
||||
{
|
||||
...renderProps,
|
||||
class: mixins.class,
|
||||
style: { ...mixins.style, ...aStyle },
|
||||
...mixins.attrs,
|
||||
...otherAttrs
|
||||
},
|
||||
children
|
||||
)
|
||||
}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { default as FontAwesomeIcon } from './components/FontAwesomeIcon'
|
||||
export { default as FontAwesomeLayers } from './components/FontAwesomeLayers'
|
||||
export { default as FontAwesomeLayersText } from './components/FontAwesomeLayersText'
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
let PRODUCTION = false
|
||||
|
||||
try {
|
||||
PRODUCTION = process.env.NODE_ENV === 'production'
|
||||
} catch (e) { }
|
||||
|
||||
export default function (...args) {
|
||||
if (!PRODUCTION && console && typeof console.error === 'function') {
|
||||
console.error(...args)
|
||||
}
|
||||
}
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
export function objectWithKey(key, value) {
|
||||
return (Array.isArray(value) && value.length > 0) || (!Array.isArray(value) && value) ? { [key]: value } : {}
|
||||
}
|
||||
|
||||
export function classList(props) {
|
||||
let classes = {
|
||||
'fa-spin': props.spin,
|
||||
'fa-pulse': props.pulse,
|
||||
// the fixedWidth property has been deprecated as of version 7.0.0
|
||||
'fa-fw': props.fixedWidth,
|
||||
'fa-border': props.border,
|
||||
'fa-li': props.listItem,
|
||||
'fa-inverse': props.inverse,
|
||||
'fa-flip': props.flip === true,
|
||||
'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both',
|
||||
'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both',
|
||||
[`fa-${props.size}`]: props.size !== null,
|
||||
[`fa-rotate-${props.rotation}`]: props.rotation !== null,
|
||||
'fa-rotate-by': props.rotateBy,
|
||||
[`fa-pull-${props.pull}`]: props.pull !== null,
|
||||
'fa-swap-opacity': props.swapOpacity,
|
||||
'fa-bounce': props.bounce,
|
||||
'fa-shake': props.shake,
|
||||
'fa-beat': props.beat,
|
||||
'fa-fade': props.fade,
|
||||
'fa-beat-fade': props.beatFade,
|
||||
'fa-flash': props.flash,
|
||||
'fa-spin-pulse': props.spinPulse,
|
||||
'fa-spin-reverse': props.spinReverse,
|
||||
// the widthAuto property is only supported in version 7.0.0 and later
|
||||
'fa-width-auto': props.widthAuto,
|
||||
// the canvasSquare and canvasRoomy properties are only supported in version 7.3.0 and later
|
||||
'fa-canvas-square': props.canvasSquare,
|
||||
'fa-canvas-roomy': props.canvasRoomy,
|
||||
// the following animations are only supported in version 7.3.0 and later
|
||||
'fa-flip-360': props.flip360,
|
||||
'fa-buzz': props.buzz,
|
||||
'fa-float': props.float,
|
||||
'fa-jello': props.jello,
|
||||
'fa-spin-snap': props.spinSnap,
|
||||
'fa-spin-snap-4': props.spinSnap4,
|
||||
'fa-spin-snap-8': props.spinSnap8,
|
||||
'fa-swing': props.swing,
|
||||
'fa-wag': props.wag
|
||||
}
|
||||
|
||||
return Object.keys(classes)
|
||||
.map((key) => (classes[key] ? key : null))
|
||||
.filter((key) => key)
|
||||
}
|
||||
|
||||
export function addStaticClass(to, what) {
|
||||
const val = (to || '').length === 0 ? [] : [to]
|
||||
|
||||
return val.concat(what).join(' ')
|
||||
}
|
||||
Reference in New Issue
Block a user