Compare commits
6 Commits
| Author | SHA1 | Date |
|---|---|---|
robmadole
|
06ae6c10a4 | |
|
Rob Madole
|
9c3dd8190e | |
|
robmadole
|
56bda55585 | |
Greg Marut
|
ea7551d8a1 | |
Jason Lundien
|
af36b13557 | |
|
Jason Lundien
|
2524611268 |
|
|
@ -9,13 +9,19 @@ jobs:
|
|||
strategy:
|
||||
matrix:
|
||||
node: [
|
||||
18.x
|
||||
18.16.x
|
||||
]
|
||||
fontawesome-svc-core: [
|
||||
fontawesome-svg-core: [
|
||||
1.2.x,
|
||||
6.x
|
||||
]
|
||||
react-native: [
|
||||
latest,
|
||||
0.73.x,
|
||||
0.72.x,
|
||||
0.71.x,
|
||||
0.70.x,
|
||||
0.69.x,
|
||||
0.68.x,
|
||||
0.67.x
|
||||
]
|
||||
|
|
@ -32,11 +38,11 @@ jobs:
|
|||
- name: npm install and test
|
||||
run: |
|
||||
sudo apt-get install -y jq
|
||||
npm install -g npm
|
||||
npm install -g npm@9
|
||||
npm install
|
||||
npm install --no-save @fortawesome/fontawesome-svg-core@${{ matrix.fontawesome-svg-core }} react-native@${{ matrix.react-native }}
|
||||
npm install --no-save --force @fortawesome/fontawesome-svg-core@${{ matrix.fontawesome-svg-core }} react-native@${{ matrix.react-native }}
|
||||
export REACT_VERSION=`cat node_modules/react-native/package.json|jq -r .peerDependencies.react`
|
||||
npm install --no-save react@${REACT_VERSION} react-dom@${REACT_VERSION} react-test-renderer@${REACT_VERSION}
|
||||
npm list react react-dom react-test-renderer react-native-svg
|
||||
npm list --depth 0 react react-dom react-test-renderer react-native-svg || exit 0
|
||||
npm run lint
|
||||
npm test
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
nodejs 16.13.1
|
||||
nodejs 18.16.0
|
||||
python 3.10.4
|
||||
|
|
|
|||
16
CHANGELOG.md
16
CHANGELOG.md
|
|
@ -6,6 +6,22 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|||
|
||||
---
|
||||
|
||||
## [0.3.2](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.3.2) - 2024-05-23
|
||||
|
||||
### Fixed
|
||||
|
||||
- Props with nullable/undefined values no longer throw an error
|
||||
|
||||
---
|
||||
|
||||
## [0.3.1](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.3.1) - 2024-05-16
|
||||
|
||||
### Changed
|
||||
|
||||
- Removed defaultProps to make things compatible with React 19
|
||||
|
||||
---
|
||||
|
||||
## [0.3.0](https://github.com/FortAwesome/react-native-fontawesome/releases/tag/0.3.0) - 2022-06-07
|
||||
|
||||
**This release has a couple of breaking changes.**
|
||||
|
|
|
|||
438
README.md
438
README.md
|
|
@ -10,451 +10,24 @@
|
|||
|
||||
<!-- toc -->
|
||||
|
||||
- [Introduction](#introduction)
|
||||
+ [Upgrading Font Awesome?](#upgrading-font-awesome)
|
||||
+ [Get started](#get-started)
|
||||
+ [Learn about our new SVG implementation](#learn-about-our-new-svg-implementation)
|
||||
- [Installation](#installation)
|
||||
- [Add more styles or Pro icons](#add-more-styles-or-pro-icons)
|
||||
- [or with Yarn](#or-with-yarn)
|
||||
- [Usage](#usage)
|
||||
* [Explicit Import](#explicit-import)
|
||||
* [Build a Library to Reference Icons Throughout Your App More Conveniently](#build-a-library-to-reference-icons-throughout-your-app-more-conveniently)
|
||||
* [Color](#color)
|
||||
+ [Color Prop](#color-prop)
|
||||
+ [Change Color with a StyleSheet](#color-stylesheet-property)
|
||||
* [Size](#size)
|
||||
- [Features](#features)
|
||||
* [Duotone](#duotone)
|
||||
* [Masking](#masking)
|
||||
* [Power Transforms](#power-transforms)
|
||||
- [Frequent questions](#frequent-questions)
|
||||
* [How do I import the same icon from two different styles?](#how-do-i-import-the-same-icon-from-two-different-styles)
|
||||
* [I don't think tree-shaking is working; got any advice?](#i-dont-think-tree-shaking-is-working-got-any-advice)
|
||||
- [Documentation](#documentation)
|
||||
- [How to Help](#how-to-help)
|
||||
- [Contributors](#contributors)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
## Introduction
|
||||
## Documentation
|
||||
|
||||
Hey there! We're glad you're here...
|
||||
|
||||
#### Upgrading Font Awesome?
|
||||
|
||||
If you've used Font Awesome in the past (version 5 or older) there are some
|
||||
things that you should learn before you dive in.
|
||||
|
||||
> https://fontawesome.com/v6/docs/web/setup/upgrade/
|
||||
|
||||
#### Get started
|
||||
|
||||
This package is for integrating with React Native. If you aren't using React Native then it's
|
||||
not going to help you. Head over to our "Get Started" page for some guidance.
|
||||
|
||||
> https://fontawesome.com/v6/docs/web/setup/quick-start
|
||||
|
||||
#### Learn about our new SVG implementation
|
||||
|
||||
This package, under the hood, uses SVG with JS and the `@fortawesome/fontawesome-svg-core` library. This implementation differs drastically from
|
||||
the web fonts implementation that was used in version 4 and older of Font Awesome. You might head over there to learn about how it works.
|
||||
|
||||
> https://fontawesome.com/v6/docs/web/dig-deeper/svg-core
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
$ npm i --save react-native-svg # **
|
||||
$ npm i --save @fortawesome/fontawesome-svg-core
|
||||
$ npm i --save @fortawesome/free-solid-svg-icons
|
||||
$ npm i --save @fortawesome/react-native-fontawesome
|
||||
```
|
||||
|
||||
** `create-react-native-app` uses Expo, which bundles `react-native-svg`. So if you're using `create-react-native-app`
|
||||
you shouldn't try to add `react-native-svg`. At the time of writing, `create-react-native-app` bundles
|
||||
`react-native-svg` version 6, which does not include support for SVG features such as `Mask`. In order to make use of `Mask`, make sure your dependencies have `react-native-svg` 7. The example app in this repo demonstrates.
|
||||
|
||||
If you are using a bare react-native-cli project, run the following command to complete the setup on iOS.
|
||||
|
||||
```
|
||||
$ cd ios && pod install
|
||||
```
|
||||
|
||||
## Add more styles or Pro icons
|
||||
|
||||
Brands are separated into their own style and for customers upgrading from
|
||||
version 4 to 5 we have a limited number of Regular icons available.
|
||||
|
||||
**Visit [fontawesome.com/icons](https://fontawesome.com/icons) to search for free and Pro icons**
|
||||
|
||||
```
|
||||
$ npm i --save @fortawesome/free-brands-svg-icons
|
||||
$ npm i --save @fortawesome/free-regular-svg-icons
|
||||
```
|
||||
|
||||
If you are a [Font Awesome Pro](https://fontawesome.com/pro) subscriber you can install Pro packages; this requires [additional configuration](https://fontawesome.com/v6/docs/web/setup/packages).
|
||||
|
||||
```
|
||||
$ npm i --save @fortawesome/pro-solid-svg-icons
|
||||
$ npm i --save @fortawesome/pro-regular-svg-icons
|
||||
$ npm i --save @fortawesome/pro-light-svg-icons
|
||||
```
|
||||
|
||||
If you'd like to use Duotone icons, you'll need to add Duotone package:
|
||||
|
||||
```
|
||||
$ npm i --save @fortawesome/pro-duotone-svg-icons
|
||||
```
|
||||
|
||||
|
||||
## or with Yarn
|
||||
|
||||
```
|
||||
$ yarn add @fortawesome/fontawesome-svg-core
|
||||
$ yarn add @fortawesome/free-solid-svg-icons
|
||||
$ yarn add @fortawesome/react-native-fontawesome
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
You can use Font Awesome icons in your React Native components as simply as this:
|
||||
|
||||
```javascript
|
||||
<FontAwesomeIcon icon="mug-saucer" />
|
||||
```
|
||||
|
||||
That simple usage is made possible when you add the `"mug-saucer"` icon, to the
|
||||
_library_.
|
||||
|
||||
This is one of the two ways you can use Font Awesome with React Native. We'll
|
||||
summarize both ways briefly and then get into the details of each below.
|
||||
|
||||
1. **Explicit Import**
|
||||
|
||||
Allows icons to be subsetted, optimizing your final bundle. Only the icons
|
||||
you import are included in the bundle. However, explicitly importing icons
|
||||
into each of many components in your app might become tedious, so you may
|
||||
want to build a library.
|
||||
|
||||
2. **Build a Library**
|
||||
|
||||
Explicitly import icons just once in some init module. Then add them to the
|
||||
library. Then reference any of them by icon name as a string from any
|
||||
component. No need to import the icons into each component once they're in
|
||||
the library.
|
||||
|
||||
### Explicit Import
|
||||
|
||||
For this example, we'll also reference the `@fortawesome/free-solid-svg-icons`
|
||||
module, so make sure you've added it to the project as well:
|
||||
|
||||
```
|
||||
$ npm i --save @fortawesome/free-solid-svg-icons
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```
|
||||
$ yarn add @fortawesome/free-solid-svg-icons
|
||||
```
|
||||
|
||||
Now, a simple React Native component might look like this:
|
||||
|
||||
```javascript
|
||||
import React, { Component } from 'react'
|
||||
import { View } from 'react-native'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
|
||||
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'
|
||||
|
||||
type Props = {}
|
||||
export default class App extends Component<Props> {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<FontAwesomeIcon icon={ faMugSaucer } />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Notice that the `faMugSaucer` icon is imported from
|
||||
`@fortawesome/free-solid-svg-icons/faMugSaucer` as an object and then provided to the
|
||||
`icon` prop as an object.
|
||||
|
||||
Explicitly importing icons like this allows us to subset Font Awesome's
|
||||
thousands of icons to include only those you use in your final bundled file.
|
||||
|
||||
### Build a Library to Reference Icons Throughout Your App More Conveniently
|
||||
|
||||
You probably want to use our icons in more than one component in your app,
|
||||
right?
|
||||
|
||||
But with explicit importing, it could become tedious to import into each of
|
||||
your app's components every icon you want to reference in that component.
|
||||
|
||||
So, add them to the _library_. Do this setup once in some initializing module
|
||||
of your app, adding all of the icons you'll use in your app's React components.
|
||||
|
||||
Suppose `App.js` initializes my app, including the library. For this example,
|
||||
we'll add two individual icons, `faSquareCheck` and `faMugSaucer`. We also add all
|
||||
of the brands in `@fortawesome/free-brands-svg-icons`. This example would
|
||||
illustrate the benefits of building a library even more clearly if it involved
|
||||
fifty or a hundred icons, but we'll keep the example brief and leave it to your
|
||||
imagination as to how this might scale up with lots of icons.
|
||||
|
||||
Don't forget to add `@fortawesome/free-brands-svg-icons`:
|
||||
|
||||
```
|
||||
$ npm i --save @fortawesome/free-brands-svg-icons
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```
|
||||
$ yarn add @fortawesome/free-brands-svg-icons
|
||||
```
|
||||
|
||||
In `App.js`, where our app is initialized:
|
||||
|
||||
```javascript
|
||||
// ...
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { fab } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faSquareCheck } from '@fortawesome/free-solid-svg-icons/faSquareCheck'
|
||||
import { faMugEmpty } from '@fortawesome/free-solid-svg-icons/faMugEmpty'
|
||||
|
||||
library.add(fab, faSquareCheck, faMugSaucer)
|
||||
```
|
||||
|
||||
OK, so what's happening here?
|
||||
|
||||
In our call to <span style="white-space:nowrap;">`library.add()`</span> we're passing
|
||||
|
||||
- `fab`: which represents _all_ of the brand icons in
|
||||
<span style="white-space:nowrap;">`@fortawesome/free-brands-svg-icons`</span>.
|
||||
So any of the brand icons in that package may be referenced by icon name
|
||||
as a string anywhere else in our app.
|
||||
For example: `"apple"`, `"microsoft"`, or `"google"`.
|
||||
- `faSquareCheck` and `faMugSaucer`: Adding each of these icons individually
|
||||
allows us to refer to them throughout our app by their icon string names,
|
||||
`"square-check"` and `"mug-saucer"`, respectively.
|
||||
|
||||
Now, suppose you also have React Native components `Beverage` and `Gadget` in your app.
|
||||
You don't have to re-import your icons into them. Just import the `FontAwesomeIcon`
|
||||
component, and when you use it, supply the icon prop an icon name as a string.
|
||||
|
||||
We'll make `Beverage.js` a functional component:
|
||||
|
||||
```javascript
|
||||
import React from 'react'
|
||||
import { View, Text } from 'react-native'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
|
||||
|
||||
export const Beverage = () => (
|
||||
<View>
|
||||
<FontAwesomeIcon icon="square-check" />
|
||||
<Text>Favorite beverage: </Text><FontAwesomeIcon icon="mug-saucer" />
|
||||
</View>
|
||||
)
|
||||
```
|
||||
|
||||
There's one another piece of magic that's happening in the background when
|
||||
providing icon names as strings like this: the `fas` prefix (for Font Awesome
|
||||
Solid) is being inferred as the default. Later, we'll look at what that means
|
||||
and how we can do something different than the default.
|
||||
|
||||
Now suppose `Gadget.js` looks like this:
|
||||
|
||||
```javascript
|
||||
import React from 'react'
|
||||
import { View, Text } from 'react-native'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
|
||||
|
||||
export const Gadget = () => (
|
||||
<View>
|
||||
<FontAwesomeIcon icon="square-check" />
|
||||
<Text>Popular gadgets come from vendors like:</Text>
|
||||
<FontAwesomeIcon icon={['fab', 'apple']} />
|
||||
<FontAwesomeIcon icon={['fab', 'microsoft']} />
|
||||
<FontAwesomeIcon icon={['fab', 'google']} />
|
||||
</View>
|
||||
)
|
||||
```
|
||||
|
||||
Notice:
|
||||
|
||||
- We used the `"square-check"` icon name again in this component, though we
|
||||
didn't have to explicitly import it into this component. With one explicit import of
|
||||
that icon in `App.js`, and adding it to the library, we've managed to use
|
||||
it by name in multiple components.
|
||||
- We used the `"apple"`, `"microsoft"`, and `"google"` brand icons, which were
|
||||
never explicitly _individually_ imported, but they're available to us by
|
||||
name as strings because `fab` was added to our library in `App.js`, and
|
||||
`fab` includes all of those icons.
|
||||
- We added the `fab` prefix to reference those brand icons.
|
||||
|
||||
Adding a prefix—and the syntax we used to do it—are new. So what's
|
||||
going on here?
|
||||
|
||||
First, recall when we introduced `<FontAwesomeIcon icon="mug-saucer"/>` and learned
|
||||
that a prefix of `fas` was being added to `"mug-saucer"` by default.
|
||||
|
||||
The `"square-check"` icon is getting a default prefix of `fas` here too, which
|
||||
is what we want, because that icon also lives in the
|
||||
`@fortawesome/free-solid-svg-icons` package.
|
||||
|
||||
However, the `"apple"`, `"microsoft"`, and `"google"` brand icons live in the
|
||||
package `@fortawesome/free-brands-svg-icons`. So we need to specify a
|
||||
different prefix for them—not the default `fas`, but `fab`, for Font Awesome
|
||||
_Brand_.
|
||||
|
||||
When specifying a prefix with an icon name, both are given as strings.
|
||||
|
||||
Now, what about that syntax?
|
||||
|
||||
The `icon` prop expects a single object:
|
||||
|
||||
- It could be an icon object, like `{faMugSaucer}`.
|
||||
- It could a string object, like `"mug-saucer"`.
|
||||
(The curly braces around a string object supplied to a prop are optional,
|
||||
so we've omitted them.)
|
||||
- Or it could be an `Array` of strings, where the first element is a prefix,
|
||||
and the second element is the icon name: `{["fab", "apple"]}`
|
||||
|
||||
### Color
|
||||
|
||||
Priority: The color prop takes priority over setting color via StyleSheet. So if you end up with both set,
|
||||
the prop wins.
|
||||
|
||||
In fact, when provided a style object (suppose you've declared other style properties other
|
||||
than `color`), if the color prop has been specified, then any color property on the style object is removed
|
||||
before the style object is passed through to the underlying SVG rendering library. This is to avoid ambiguity.
|
||||
|
||||
Using the color prop should be preferred over using the StyleSheet.
|
||||
|
||||
#### Color Prop
|
||||
|
||||
```javascript
|
||||
<FontAwesomeIcon icon={ faMugSaucer } color={ 'red' } />
|
||||
```
|
||||
|
||||
#### Color StyleSheet property
|
||||
|
||||
To set the color of an icon, provide a `StyleSheet` like this:
|
||||
|
||||
```javascript
|
||||
import React, { Component } from 'react'
|
||||
import { View, StyleSheet } from 'react-native'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
|
||||
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'
|
||||
|
||||
type Props = {}
|
||||
|
||||
const style = StyleSheet.create({
|
||||
icon: {
|
||||
color: 'blue'
|
||||
}
|
||||
})
|
||||
|
||||
export default class App extends Component<Props> {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<FontAwesomeIcon icon={ faMugSaucer } style={ style.icon } />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
Default: 16
|
||||
|
||||
To adjust the size, use the `size` prop:
|
||||
|
||||
```javascript
|
||||
<FontAwesomeIcon icon={ faMugSaucer } size={ 32 } />
|
||||
```
|
||||
|
||||
Note: the `height` and `width` props have been deprecated.
|
||||
|
||||
## Features
|
||||
|
||||
### Duotone
|
||||
|
||||
```javascript
|
||||
<FontAwesomeIcon icon="mug-saucer" color="blue" secondaryColor="red" secondaryOpacity={ 0.4 } />
|
||||
```
|
||||
|
||||
You can specify the color and opacity for Duotone's secondary layer using the `secondaryColor` and `secondaryOpacity` props. Note that these are optional, and will simply default to using your primary color at 40% opacity.
|
||||
|
||||
### Masking
|
||||
|
||||
```javascript
|
||||
<FontAwesomeIcon icon="mug-saucer" mask={['far', 'circle']} />
|
||||
```
|
||||
|
||||
[More on masking...](https://fontawesome.com/v6/docs/web/style/mask#contentHeader)
|
||||
|
||||
### Power Transforms
|
||||
|
||||
```javascript
|
||||
<FontAwesomeIcon icon="arrows-up-down-left-right" transform="shrink-6 left-4" />
|
||||
<FontAwesomeIcon icon="arrow-right" transform={{ rotate: 42 }} />
|
||||
```
|
||||
|
||||
[More on power transforms...](https://fontawesome.com/v6/docs/web/style/power-transform#contentHeader)
|
||||
|
||||
## Frequent questions
|
||||
|
||||
### How do I import the same icon from two different styles?
|
||||
|
||||
With ES modules and `import` statements we can rename:
|
||||
|
||||
```javascript
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faStroopwafel as fasFaStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel'
|
||||
import { faStroopwafel as farFaStroopwafel } from '@fortawesome/pro-regular-svg-icons/faStroopwafel'
|
||||
|
||||
library.add(fasFaStroopwafel, farFaStroopwafel)
|
||||
```
|
||||
|
||||
### I don't think tree-shaking is working; got any advice?
|
||||
|
||||
Check out our [docs here](https://fontawesome.com/v6/docs/apis/javascript/tree-shaking).
|
||||
|
||||
If you find that your build times are taking forever, check the way that you are importing icons.
|
||||
|
||||
In past versions of `react-native-fontawesome` we've documented importing icons like this:
|
||||
|
||||
```javascript
|
||||
import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons'
|
||||
```
|
||||
|
||||
This can cause build times for your project to skyrocket because React Native is trying to tree shake. The Font Awesome
|
||||
packages are so large that we _highly_ recommend that you avoid this.
|
||||
|
||||
Instead, use "deep imports" by default.
|
||||
|
||||
```javascript
|
||||
import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel' // <- notice the additional module here?
|
||||
```
|
||||
|
||||
By directly importing from the `faStroopwafel.js` module there is no additional work that tree shaking needs to do in order to
|
||||
reduce your bundle size.
|
||||
Official documentation is hosted at fontawesome.com: [Check it out here](https://fontawesome.com/docs/web/use-with/react-native/)
|
||||
|
||||
## How to Help
|
||||
|
||||
Review the following docs before diving in:
|
||||
1. Review the following docs before diving in:
|
||||
|
||||
- [CONTRIBUTING.md](CONTRIBUTING.md)
|
||||
- [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
|
||||
|
||||
And then:
|
||||
|
||||
1. Check the existing issues and see if you can help!
|
||||
2. Check the existing issues and see if you can help!
|
||||
|
||||
## Contributors
|
||||
|
||||
|
|
@ -467,4 +40,5 @@ Community:
|
|||
| Jeremey | [@puremana](https://github.com/puremana) |
|
||||
| Michael Schonfeld | [@schonfeld](https://github.com/schonfeld) |
|
||||
| Ádám Gólya | [@golya](https://github.com/golya) |
|
||||
| Greg Marut | [@gregmarut](https://github.com/gregmarut) |
|
||||
| Font Awesome Team | [@FortAwesome](https://github.com/orgs/FortAwesome/people)|
|
||||
|
|
|
|||
|
|
@ -74,17 +74,29 @@ function normalizeIconArgs(icon) {
|
|||
}
|
||||
|
||||
function FontAwesomeIcon(props) {
|
||||
var iconArgs = props.icon,
|
||||
maskArgs = props.mask,
|
||||
maskId = props.maskId,
|
||||
height = props.height,
|
||||
width = props.width,
|
||||
size = props.size;
|
||||
var _props = _objectSpread({
|
||||
icon: null,
|
||||
mask: null,
|
||||
maskId: null,
|
||||
transform: null,
|
||||
style: {},
|
||||
color: null,
|
||||
secondaryColor: null,
|
||||
secondaryOpacity: null,
|
||||
size: DEFAULT_SIZE
|
||||
}, props);
|
||||
|
||||
var style = _reactNative.StyleSheet.flatten(props.style);
|
||||
var iconArgs = _props.icon,
|
||||
maskArgs = _props.mask,
|
||||
maskId = _props.maskId,
|
||||
height = _props.height,
|
||||
width = _props.width,
|
||||
size = _props.size;
|
||||
|
||||
var style = _reactNative.StyleSheet.flatten(_props.style);
|
||||
|
||||
var iconLookup = normalizeIconArgs(iconArgs);
|
||||
var transform = objectWithKey('transform', typeof props.transform === 'string' ? _fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
|
||||
var transform = objectWithKey('transform', typeof _props.transform === 'string' ? _fontawesomeSvgCore.parse.transform(_props.transform) : _props.transform);
|
||||
var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
|
||||
var renderedIcon = (0, _fontawesomeSvgCore.icon)(iconLookup, _objectSpread(_objectSpread(_objectSpread({}, transform), mask), {}, {
|
||||
maskId: maskId
|
||||
|
|
@ -97,17 +109,18 @@ function FontAwesomeIcon(props) {
|
|||
|
||||
var _abstract = renderedIcon["abstract"]; // This is the color that will be passed to the "fill" prop of the Svg element
|
||||
|
||||
var color = props.color || style.color || DEFAULT_COLOR; // This is the color that will be passed to the "fill" prop of the secondary Path element child (in Duotone Icons)
|
||||
var color = _props.color || (style || {}).color || DEFAULT_COLOR; // This is the color that will be passed to the "fill" prop of the secondary Path element child (in Duotone Icons)
|
||||
// `null` value will result in using the primary color, at 40% opacity
|
||||
|
||||
var secondaryColor = props.secondaryColor || color; // Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given
|
||||
var secondaryColor = _props.secondaryColor || color; // Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given
|
||||
|
||||
var secondaryOpacity = props.secondaryOpacity || DEFAULT_SECONDARY_OPACITY; // To avoid confusion down the line, we'll remove properties from the StyleSheet, like color, that are being overridden
|
||||
var secondaryOpacity = _props.secondaryOpacity || DEFAULT_SECONDARY_OPACITY; // To avoid confusion down the line, we'll remove properties from the StyleSheet, like color, that are being overridden
|
||||
// or resolved in other ways, to avoid ambiguity as to which inputs cause which outputs in the underlying rendering process.
|
||||
// In other words, we don't want color (for example) to be specified via two different inputs.
|
||||
|
||||
var styleColor = style.color,
|
||||
modifiedStyle = _objectWithoutProperties(style, _excluded);
|
||||
var _ref2 = style || {},
|
||||
styleColor = _ref2.color,
|
||||
modifiedStyle = _objectWithoutProperties(_ref2, _excluded);
|
||||
|
||||
var resolvedHeight, resolvedWidth;
|
||||
|
||||
|
|
@ -141,17 +154,6 @@ FontAwesomeIcon.propTypes = {
|
|||
maskId: _propTypes["default"].string,
|
||||
transform: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])
|
||||
};
|
||||
FontAwesomeIcon.defaultProps = {
|
||||
icon: null,
|
||||
mask: null,
|
||||
maskId: null,
|
||||
transform: null,
|
||||
style: {},
|
||||
color: null,
|
||||
secondaryColor: null,
|
||||
secondaryOpacity: null,
|
||||
size: DEFAULT_SIZE
|
||||
};
|
||||
|
||||
var convertCurry = _converter["default"].bind(null, _react["default"].createElement);
|
||||
|
||||
|
|
|
|||
|
|
@ -37,9 +37,8 @@
|
|||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
|
||||
"react": ">= 17.x",
|
||||
"react-native": "> 0.68.0",
|
||||
"react-native-svg": "> 7.0"
|
||||
"react-native": ">= 0.67",
|
||||
"react-native-svg": ">= 11.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@fortawesome/react-native-fontawesome",
|
||||
"version": "0.3.0",
|
||||
"version": "0.3.2",
|
||||
"description": "Official React Native component for Font Awesome",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
@ -26,7 +26,8 @@
|
|||
"Michael Schonfeld <github.com/schonfeld>",
|
||||
"Ádám Gólya <github.com/golya>",
|
||||
"Edward Emanuel <github.com/ej2>",
|
||||
"Jason Lundien <github.com/jasonlundien>"
|
||||
"Jason Lundien <github.com/jasonlundien>",
|
||||
"Greg Marut <github.com/gregmarut>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
|
|
@ -52,7 +53,7 @@
|
|||
"eslint-plugin-react": "^7.30.0",
|
||||
"jest": "^28.1.0",
|
||||
"metro-react-native-babel-preset": "^0.57.0",
|
||||
"react": "^17",
|
||||
"react": "^17 || ^18",
|
||||
"react-native": "^0.68.0",
|
||||
"react-native-svg": "^12.3.0",
|
||||
"react-test-renderer": "^17"
|
||||
|
|
|
|||
|
|
@ -39,15 +39,28 @@ function normalizeIconArgs (icon) {
|
|||
}
|
||||
|
||||
export default function FontAwesomeIcon (props) {
|
||||
const { icon: iconArgs, mask: maskArgs, maskId, height, width, size } = props
|
||||
const style = StyleSheet.flatten(props.style)
|
||||
const _props = {
|
||||
icon: null,
|
||||
mask: null,
|
||||
maskId: null,
|
||||
transform: null,
|
||||
style: {},
|
||||
color: null,
|
||||
secondaryColor: null,
|
||||
secondaryOpacity: null,
|
||||
size: DEFAULT_SIZE,
|
||||
...props
|
||||
}
|
||||
|
||||
const { icon: iconArgs, mask: maskArgs, maskId, height, width, size } = _props
|
||||
const style = StyleSheet.flatten(_props.style)
|
||||
|
||||
const iconLookup = normalizeIconArgs(iconArgs)
|
||||
const transform = objectWithKey(
|
||||
'transform',
|
||||
typeof props.transform === 'string'
|
||||
? parse.transform(props.transform)
|
||||
: props.transform
|
||||
typeof _props.transform === 'string'
|
||||
? parse.transform(_props.transform)
|
||||
: _props.transform
|
||||
)
|
||||
const mask = objectWithKey('mask', normalizeIconArgs(maskArgs))
|
||||
|
||||
|
|
@ -65,19 +78,19 @@ export default function FontAwesomeIcon (props) {
|
|||
const { abstract } = renderedIcon
|
||||
|
||||
// This is the color that will be passed to the "fill" prop of the Svg element
|
||||
const color = props.color || style.color || DEFAULT_COLOR
|
||||
const color = _props.color || (style || {}).color || DEFAULT_COLOR
|
||||
|
||||
// This is the color that will be passed to the "fill" prop of the secondary Path element child (in Duotone Icons)
|
||||
// `null` value will result in using the primary color, at 40% opacity
|
||||
const secondaryColor = props.secondaryColor || color
|
||||
const secondaryColor = _props.secondaryColor || color
|
||||
|
||||
// Secondary layer opacity should default to 0.4, unless a specific opacity value or a specific secondary color was given
|
||||
const secondaryOpacity = props.secondaryOpacity || DEFAULT_SECONDARY_OPACITY
|
||||
const secondaryOpacity = _props.secondaryOpacity || DEFAULT_SECONDARY_OPACITY
|
||||
|
||||
// To avoid confusion down the line, we'll remove properties from the StyleSheet, like color, that are being overridden
|
||||
// or resolved in other ways, to avoid ambiguity as to which inputs cause which outputs in the underlying rendering process.
|
||||
// In other words, we don't want color (for example) to be specified via two different inputs.
|
||||
const { color: styleColor, ...modifiedStyle } = style
|
||||
const { color: styleColor, ...modifiedStyle } = (style || {})
|
||||
|
||||
let resolvedHeight, resolvedWidth
|
||||
|
||||
|
|
@ -137,18 +150,6 @@ FontAwesomeIcon.propTypes = {
|
|||
transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
|
||||
}
|
||||
|
||||
FontAwesomeIcon.defaultProps = {
|
||||
icon: null,
|
||||
mask: null,
|
||||
maskId: null,
|
||||
transform: null,
|
||||
style: {},
|
||||
color: null,
|
||||
secondaryColor: null,
|
||||
secondaryOpacity: null,
|
||||
size: DEFAULT_SIZE
|
||||
}
|
||||
|
||||
const convertCurry = convert.bind(null, React.createElement)
|
||||
|
||||
function replaceCurrentColor (obj, primaryColor, secondaryColor, secondaryOpacity) {
|
||||
|
|
|
|||
|
|
@ -145,6 +145,26 @@ describe('snapshots', () => {
|
|||
})
|
||||
})
|
||||
|
||||
describe('using defaultProps', () => {
|
||||
const UNDEFINED_DEFAULT_PROPS = {
|
||||
icon: undefined,
|
||||
mask: undefined,
|
||||
maskId: undefined,
|
||||
transform: undefined,
|
||||
style: undefined,
|
||||
color: undefined,
|
||||
secondaryColor: undefined,
|
||||
secondaryOpacity: undefined,
|
||||
size: undefined
|
||||
}
|
||||
|
||||
test('undefined props passed', () => {
|
||||
expect(() =>
|
||||
renderer.create(<FontAwesomeIcon {...UNDEFINED_DEFAULT_PROPS} icon={ faCoffee } />).toJSON()
|
||||
).not.toThrow(TypeError)
|
||||
})
|
||||
})
|
||||
|
||||
describe('when icon prop', () => {
|
||||
beforeEach(() => {
|
||||
fontawesome.library.add(faCoffee, faCircle, faSquare, faAcorn)
|
||||
|
|
|
|||
Loading…
Reference in New Issue