Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@expo/vector-icons

Package Overview
Dependencies
Maintainers
20
Versions
55
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@expo/vector-icons - npm Package Compare versions

Comparing version 10.1.0 to 10.1.1-alpha.0

.now/project.json

15

build/vendor/react-native-vector-icons/AntDesign.js

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;
# Generating Feather icon set
1. Go to [Icomoon Library](https://icomoon.io/app/#/select/library) and press _+ Add_ on the Feather icon set
2. Press _Select all_ in the hamburger menu next to the icon set
3. Press _Generate Font_ in the bottom menu
4. Press _Preferences_ and enter `Feather` as _Font Name_ in the dialog
5. Press _Download_
6. Unzip the file and move the folder to the `react-native-vector-icons` folder
7. Generate the icon set with `yarn build-feather`
### To build the Feather icon Set you will need:
- [Inkscape](https://inkscape.org/)
- [GNU Parallel](https://www.gnu.org/software/parallel/)
- [Font Custom](https://github.com/FontCustom/fontcustom)
- [Xvfb](https://www.x.org/releases/X11R7.6/doc/man/man1/Xvfb.1.xhtml) - Optional, but highly recommended
1. Go to [Font Custom](https://github.com/FontCustom/fontcustom) and follow the installation instructions
2. Generate the icon set with `yarn build-feather`
Before we can build the icon set, you'll need to pre-process the icons. You can do this using Inkscape with help of Parallel.
If you have Xvfb installed, you will see a progress bar in the console; if not, each icon will launch one Inkscape window to adjust the SVG.
The building stage will create a folder called `Feather`. This will be removed at the end of the build.

@@ -11,3 +11,3 @@ # Contributing

If you would like to submit a feature request or report a bug, we encourage you to first look through the [issues](https://github.com/react-native-vector-icons/loki/issues) and [pull requests](https://github.com/oblador/react-native-vector-icons/pulls) before filing a new issue.
If you would like to submit a feature request or report a bug, we encourage you to first look through the [issues](https://github.com/oblador/react-native-vector-icons/issues) and [pull requests](https://github.com/oblador/react-native-vector-icons/pulls) before filing a new issue.

@@ -20,9 +20,9 @@ ## Submitting a Pull Request

* Install [Node.js](https://nodejs.org/) if you have not already. (*We suggest you to use node v6.x.x*)
* Fork the repo
* ```git clone https://github.com/*yourusername*/react-native-vector-icons.git && cd react-native-vector-icons```
* ```yarn install``` OR ```npm install```
* ```npm test```
* Optionally ```brew install fontcustom && npm run build``` if you've updated any icon sets.
- Install [Node.js](https://nodejs.org/) if you have not already. (_We suggest you to use node v6.x.x_)
- Fork the repo
- `git clone https://github.com/*yourusername*/react-native-vector-icons.git && cd react-native-vector-icons`
- `yarn install` OR `npm install`
- `npm test`
- Optionally `brew install fontcustom && npm run build` if you've updated any icon sets.
One you have done this, create a new branch with a name that loosely describes the issue on which you will be working. Once you think you have the addressed the issue in question, submit a pull request to the `master` branch.

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -16,7 +16,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -5,3 +5,3 @@ # FontAwesome 5

harder to use in some cases. The implemented solution should be fairly
straightforward to use after it has been setup.
straightforward to use after it has been setup.
Android and iOS handles fonts differently which is why it could be

@@ -12,4 +12,4 @@ easily implemented without any additional setup.

* [`Usage`](#usage)
* [`Upgrading to Pro`](#upgrading-to-pro)
- [`Usage`](#usage)
- [`Upgrading to Pro`](#upgrading-to-pro)

@@ -23,3 +23,3 @@ # Usage

const icon = (<FontAwesome5 name={'comments'} />);
const icon = <FontAwesome5 name={'comments'} />;
```

@@ -33,4 +33,4 @@

const icon = (<FontAwesome5 name={'comments'} solid />);
const icon = (<FontAwesome5 name={'git'} brand />);
const icon = <FontAwesome5 name={'comments'} solid />;
const icon = <FontAwesome5 name={'git'} brand />;
```

@@ -40,7 +40,7 @@

| Type | Description |
| --- | --- |
| **brand** | Uses the Brands font |
| **light** | Uses the Light font (pro) or Regular (Free) |
| **solid** | Uses the Solid font |
| Type | Description |
| --------- | ------------------------------------------- |
| **brand** | Uses the Brands font |
| **light** | Uses the Light font (pro) or Regular (Free) |
| **solid** | Uses the Solid font |

@@ -54,4 +54,4 @@ No specified type indicates Regular font.

const regular_icon_btn = (<FontAwesome5.Button name={'comments'} />);
const solid_icon_btn = (<FontAwesome5.Button name={'comments'} solid />);
const regular_icon_btn = <FontAwesome5.Button name={'comments'} />;
const solid_icon_btn = <FontAwesome5.Button name={'comments'} solid />;
```

@@ -61,3 +61,3 @@

```getImageSource``` works a little different due to its native backend and how
`getImageSource` works a little different due to its native backend and how
the font is separated into different files. Therefore, the enum FA5Style is

@@ -80,3 +80,8 @@ defined to help setting the style of the font:

FontAwesome5.getImageSource("comments", 30, '#000', FA5Style.solid).then(source => this.setState({ image: source }));
FontAwesome5.getImageSource(
'comments',
30,
'#000',
FA5Style.solid
).then(source => this.setState({ image: source }));
```

@@ -89,5 +94,5 @@

You need your FontAwesome npm token which can be obtained by logging into your
account and then access the ```Services``` tab.
account and then access the `Services` tab.
Run ```./node_modules/.bin/fa5-upgrade``` and enter the token when asked to in order to
Run `./node_modules/.bin/fa5-upgrade` and enter the token when asked to in order to
upgrade to the Pro version.

@@ -97,3 +102,3 @@

If the shell script does not work you can install the Pro version manually.
If the shell script does not work you can install the Pro version manually.
All you really need to do is adding the Pro fonts to your project, there is

@@ -105,6 +110,7 @@ instructions on how to do this in main README.md.

Just as easy as using the Free icons, just include the icon set like this:
```javascript
import FontAwesome5Pro from 'react-native-vector-icons/FontAwesome5Pro';
const icon = (<FontAwesome5Pro name={'comments'} light/>);
const icon = <FontAwesome5Pro name={'comments'} light />;
```

@@ -16,7 +16,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;
/**
* Feather icon set component.
* Usage: <Feather name="icon-name" size={20} color="#4F8EF7" />
* Fontisto icon set component.
* Usage: <Fontisto name="icon-name" size={20} color="#4F8EF7" />
*/
import createIconSet from "./createIconSet";
import font from "./vendor/react-native-vector-icons/Fonts/Fontisto.ttf";
import glyphMap from "./vendor/react-native-vector-icons/glyphmaps/Fontisto.json";
const iconSet = createIconSet(glyphMap, "Fontisto", font);
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Fontisto.json';
const iconSet = createIconSet(glyphMap, 'Fontisto', 'Fontisto.ttf');
export default iconSet;

@@ -16,4 +18,3 @@ export const {

getImageSource,
getImageSourceSync
getImageSourceSync,
} = iconSet;
//# sourceMappingURL=Fontisto.js.map

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;
{
"activity": 59648,
"airplay": 59649,
"alert-circle": 59650,
"alert-octagon": 59651,
"alert-triangle": 59652,
"align-center": 59653,
"align-justify": 59654,
"align-left": 59655,
"align-right": 59656,
"anchor": 59657,
"aperture": 59658,
"archive": 59659,
"arrow-down": 59660,
"arrow-down-circle": 59661,
"arrow-down-left": 59662,
"arrow-down-right": 59663,
"arrow-left": 59664,
"arrow-left-circle": 59665,
"arrow-right": 59666,
"arrow-right-circle": 59667,
"arrow-up": 59668,
"arrow-up-circle": 59669,
"arrow-up-left": 59670,
"arrow-up-right": 59671,
"at-sign": 59672,
"award": 59673,
"bar-chart": 59674,
"bar-chart-2": 59675,
"battery": 59676,
"battery-charging": 59677,
"bell": 59678,
"bell-off": 59679,
"bluetooth": 59680,
"bold": 59681,
"book": 59682,
"book-open": 59683,
"bookmark": 59684,
"box": 59685,
"briefcase": 59686,
"calendar": 59687,
"camera": 59688,
"camera-off": 59689,
"cast": 59690,
"check": 59691,
"check-circle": 59692,
"check-square": 59693,
"chevron-down": 59694,
"chevron-left": 59695,
"chevron-right": 59696,
"chevron-up": 59697,
"chevrons-down": 59698,
"chevrons-left": 59699,
"chevrons-right": 59700,
"chevrons-up": 59701,
"chrome": 59702,
"circle": 59703,
"clipboard": 59704,
"clock": 59705,
"cloud": 59706,
"cloud-drizzle": 59707,
"cloud-lightning": 59708,
"cloud-off": 59709,
"cloud-rain": 59710,
"cloud-snow": 59711,
"code": 59712,
"codepen": 59713,
"command": 59714,
"compass": 59715,
"copy": 59716,
"corner-down-left": 59717,
"corner-down-right": 59718,
"corner-left-down": 59719,
"corner-left-up": 59720,
"corner-right-down": 59721,
"corner-right-up": 59722,
"corner-up-left": 59723,
"corner-up-right": 59724,
"cpu": 59725,
"credit-card": 59726,
"crop": 59727,
"crosshair": 59728,
"database": 59729,
"delete": 59730,
"disc": 59731,
"dollar-sign": 59732,
"download": 59733,
"download-cloud": 59734,
"droplet": 59735,
"edit": 59736,
"edit-2": 59737,
"edit-3": 59738,
"external-link": 59739,
"eye": 59740,
"eye-off": 59741,
"facebook": 59742,
"fast-forward": 59743,
"feather": 59744,
"file": 59745,
"file-minus": 59746,
"file-plus": 59747,
"file-text": 59748,
"film": 59749,
"filter": 59750,
"flag": 59751,
"folder": 59752,
"folder-minus": 59753,
"folder-plus": 59754,
"gift": 59755,
"git-branch": 59756,
"git-commit": 59757,
"git-merge": 59758,
"git-pull-request": 59759,
"github": 59760,
"gitlab": 59761,
"globe": 59762,
"grid": 59763,
"hard-drive": 59764,
"hash": 59765,
"headphones": 59766,
"heart": 59767,
"help-circle": 59768,
"home": 59769,
"image": 59770,
"inbox": 59771,
"info": 59772,
"instagram": 59773,
"italic": 59774,
"layers": 59775,
"layout": 59776,
"life-buoy": 59777,
"link": 59778,
"link-2": 59779,
"linkedin": 59780,
"list": 59781,
"loader": 59782,
"lock": 59783,
"log-in": 59784,
"log-out": 59785,
"mail": 59786,
"map": 59787,
"map-pin": 59788,
"maximize": 59789,
"maximize-2": 59790,
"menu": 59791,
"message-circle": 59792,
"message-square": 59793,
"mic": 59794,
"mic-off": 59795,
"minimize": 59796,
"minimize-2": 59797,
"minus": 59798,
"minus-circle": 59799,
"minus-square": 59800,
"monitor": 59801,
"moon": 59802,
"more-horizontal": 59803,
"more-vertical": 59804,
"move": 59805,
"music": 59806,
"navigation": 59807,
"navigation-2": 59808,
"octagon": 59809,
"package": 59810,
"paperclip": 59811,
"pause": 59812,
"pause-circle": 59813,
"percent": 59814,
"phone": 59815,
"phone-call": 59816,
"phone-forwarded": 59817,
"phone-incoming": 59818,
"phone-missed": 59819,
"phone-off": 59820,
"phone-outgoing": 59821,
"pie-chart": 59822,
"play": 59823,
"play-circle": 59824,
"plus": 59825,
"plus-circle": 59826,
"plus-square": 59827,
"pocket": 59828,
"power": 59829,
"printer": 59830,
"radio": 59831,
"refresh-ccw": 59832,
"refresh-cw": 59833,
"repeat": 59834,
"rewind": 59835,
"rotate-ccw": 59836,
"rotate-cw": 59837,
"rss": 59838,
"save": 59839,
"scissors": 59840,
"search": 59841,
"send": 59842,
"server": 59843,
"settings": 59844,
"share": 59845,
"share-2": 59846,
"shield": 59847,
"shield-off": 59848,
"shopping-bag": 59849,
"shopping-cart": 59850,
"shuffle": 59851,
"sidebar": 59852,
"skip-back": 59853,
"skip-forward": 59854,
"slack": 59855,
"slash": 59856,
"sliders": 59857,
"smartphone": 59858,
"speaker": 59859,
"square": 59860,
"star": 59861,
"stop-circle": 59862,
"sun": 59863,
"sunrise": 59864,
"sunset": 59865,
"tablet": 59866,
"tag": 59867,
"target": 59868,
"terminal": 59869,
"thermometer": 59870,
"thumbs-down": 59871,
"thumbs-up": 59872,
"toggle-left": 59873,
"toggle-right": 59874,
"trash": 59875,
"trash-2": 59876,
"trending-down": 59877,
"trending-up": 59878,
"triangle": 59879,
"truck": 59880,
"tv": 59881,
"twitter": 59882,
"type": 59883,
"umbrella": 59884,
"underline": 59885,
"unlock": 59886,
"upload": 59887,
"upload-cloud": 59888,
"user": 59889,
"user-check": 59890,
"user-minus": 59891,
"user-plus": 59892,
"user-x": 59893,
"users": 59894,
"video": 59895,
"video-off": 59896,
"voicemail": 59897,
"volume": 59898,
"volume-1": 59899,
"volume-2": 59900,
"volume-x": 59901,
"watch": 59902,
"wifi": 59903,
"wifi-off": 59904,
"wind": 59905,
"x": 59906,
"x-circle": 59907,
"x-square": 59908,
"youtube": 59909,
"zap": 59910,
"zap-off": 59911,
"zoom-in": 59912,
"zoom-out": 59913
"activity": 61696,
"airplay": 61697,
"alert-circle": 61698,
"alert-octagon": 61699,
"alert-triangle": 61700,
"align-center": 61701,
"align-justify": 61702,
"align-left": 61703,
"align-right": 61704,
"anchor": 61705,
"aperture": 61706,
"archive": 61707,
"arrow-down": 61708,
"arrow-down-circle": 61709,
"arrow-down-left": 61710,
"arrow-down-right": 61711,
"arrow-left": 61712,
"arrow-left-circle": 61713,
"arrow-right": 61714,
"arrow-right-circle": 61715,
"arrow-up": 61716,
"arrow-up-circle": 61717,
"arrow-up-left": 61718,
"arrow-up-right": 61719,
"at-sign": 61720,
"award": 61721,
"bar-chart": 61722,
"bar-chart-2": 61723,
"battery": 61724,
"battery-charging": 61725,
"bell": 61726,
"bell-off": 61727,
"bluetooth": 61728,
"bold": 61729,
"book": 61730,
"book-open": 61731,
"bookmark": 61732,
"box": 61733,
"briefcase": 61734,
"calendar": 61735,
"camera": 61736,
"camera-off": 61737,
"cast": 61738,
"check": 61739,
"check-circle": 61740,
"check-square": 61741,
"chevron-down": 61742,
"chevron-left": 61743,
"chevron-right": 61744,
"chevron-up": 61745,
"chevrons-down": 61746,
"chevrons-left": 61747,
"chevrons-right": 61748,
"chevrons-up": 61749,
"chrome": 61750,
"circle": 61751,
"clipboard": 61752,
"clock": 61753,
"cloud": 61754,
"cloud-drizzle": 61755,
"cloud-lightning": 61756,
"cloud-off": 61757,
"cloud-rain": 61758,
"cloud-snow": 61759,
"code": 61760,
"codepen": 61761,
"codesandbox": 61972,
"coffee": 61762,
"columns": 61973,
"command": 61763,
"compass": 61764,
"copy": 61765,
"corner-down-left": 61766,
"corner-down-right": 61767,
"corner-left-down": 61768,
"corner-left-up": 61769,
"corner-right-down": 61770,
"corner-right-up": 61771,
"corner-up-left": 61772,
"corner-up-right": 61773,
"cpu": 61774,
"credit-card": 61775,
"crop": 61776,
"crosshair": 61777,
"database": 61778,
"delete": 61779,
"disc": 61780,
"dollar-sign": 61781,
"download": 61782,
"download-cloud": 61783,
"droplet": 61784,
"edit": 61785,
"edit-2": 61786,
"edit-3": 61787,
"external-link": 61788,
"eye": 61789,
"eye-off": 61790,
"facebook": 61791,
"fast-forward": 61792,
"feather": 61793,
"figma": 61970,
"file": 61794,
"file-minus": 61795,
"file-plus": 61796,
"file-text": 61797,
"film": 61798,
"filter": 61799,
"flag": 61800,
"folder": 61801,
"folder-minus": 61802,
"folder-plus": 61803,
"frown": 61804,
"gift": 61805,
"git-branch": 61806,
"git-commit": 61807,
"git-merge": 61808,
"git-pull-request": 61809,
"github": 61810,
"gitlab": 61811,
"globe": 61812,
"grid": 61813,
"hard-drive": 61814,
"hash": 61815,
"headphones": 61816,
"heart": 61817,
"help-circle": 61818,
"hexagon": 61974,
"home": 61819,
"image": 61820,
"inbox": 61821,
"info": 61822,
"instagram": 61823,
"italic": 61824,
"key": 61967,
"layers": 61825,
"layout": 61826,
"life-buoy": 61827,
"link": 61828,
"link-2": 61829,
"linkedin": 61830,
"list": 61831,
"loader": 61832,
"lock": 61833,
"log-in": 61834,
"log-out": 61835,
"mail": 61836,
"map": 61837,
"map-pin": 61838,
"maximize": 61839,
"maximize-2": 61840,
"meh": 61841,
"menu": 61842,
"message-circle": 61843,
"message-square": 61844,
"mic": 61845,
"mic-off": 61846,
"minimize": 61847,
"minimize-2": 61848,
"minus": 61849,
"minus-circle": 61850,
"minus-square": 61851,
"monitor": 61852,
"moon": 61853,
"more-horizontal": 61854,
"more-vertical": 61855,
"mouse-pointer": 61968,
"move": 61856,
"music": 61857,
"navigation": 61858,
"navigation-2": 61859,
"octagon": 61860,
"package": 61861,
"paperclip": 61862,
"pause": 61863,
"pause-circle": 61864,
"pen-tool": 61969,
"percent": 61865,
"phone": 61866,
"phone-call": 61867,
"phone-forwarded": 61868,
"phone-incoming": 61869,
"phone-missed": 61870,
"phone-off": 61871,
"phone-outgoing": 61872,
"pie-chart": 61873,
"play": 61874,
"play-circle": 61875,
"plus": 61876,
"plus-circle": 61877,
"plus-square": 61878,
"pocket": 61879,
"power": 61880,
"printer": 61881,
"radio": 61882,
"refresh-ccw": 61883,
"refresh-cw": 61884,
"repeat": 61885,
"rewind": 61886,
"rotate-ccw": 61887,
"rotate-cw": 61888,
"rss": 61889,
"save": 61890,
"scissors": 61891,
"search": 61892,
"send": 61893,
"server": 61894,
"settings": 61895,
"share": 61896,
"share-2": 61897,
"shield": 61898,
"shield-off": 61899,
"shopping-bag": 61900,
"shopping-cart": 61901,
"shuffle": 61902,
"sidebar": 61903,
"skip-back": 61904,
"skip-forward": 61905,
"slack": 61906,
"slash": 61907,
"sliders": 61908,
"smartphone": 61909,
"smile": 61910,
"speaker": 61911,
"square": 61912,
"star": 61913,
"stop-circle": 61914,
"sun": 61915,
"sunrise": 61916,
"sunset": 61917,
"tablet": 61975,
"tag": 61919,
"target": 61920,
"terminal": 61921,
"thermometer": 61922,
"thumbs-down": 61923,
"thumbs-up": 61924,
"toggle-left": 61925,
"toggle-right": 61926,
"trash": 61927,
"trash-2": 61928,
"trello": 61929,
"trending-down": 61930,
"trending-up": 61931,
"triangle": 61932,
"truck": 61933,
"tv": 61934,
"twitter": 61935,
"type": 61936,
"umbrella": 61937,
"underline": 61938,
"unlock": 61939,
"upload": 61940,
"upload-cloud": 61941,
"user": 61942,
"user-check": 61943,
"user-minus": 61944,
"user-plus": 61945,
"user-x": 61946,
"users": 61947,
"video": 61948,
"video-off": 61949,
"voicemail": 61950,
"volume": 61951,
"volume-1": 61952,
"volume-2": 61953,
"volume-x": 61954,
"watch": 61955,
"wifi": 61956,
"wifi-off": 61957,
"wind": 61958,
"x": 61959,
"x-circle": 61960,
"x-octagon": 61971,
"x-square": 61961,
"youtube": 61962,
"zap": 61963,
"zap-off": 61964,
"zoom-in": 61965,
"zoom-out": 61966
}
export { default as createIconSet } from './lib/create-icon-set';
export {
default as createIconSetFromFontello,
} from './lib/create-icon-set-from-fontello';
export {
default as createIconSetFromIcoMoon,
} from './lib/create-icon-set-from-icomoon';
export {
default as createMultiStyleIconSet,
} from './lib/create-multi-style-icon-set';
export { default as createMultiStyleIconSet } from './lib/create-multi-style-icon-set';
export { default as createIconSetFromFontello } from './lib/create-icon-set-from-fontello';
export { default as createIconSetFromIcoMoon } from './lib/create-icon-set-from-icomoon';

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -0,1 +1,2 @@

import { Platform } from './react-native';
import createMultiStyleIconSet from './create-multi-style-icon-set';

@@ -31,6 +32,8 @@

function createFontAwesomeStyle(styleName, fontWeight, family = fontFamily) {
function createFontAwesomeStyle(style, fontWeight, family = fontFamily) {
let styleName = style;
let fontFile = `FontAwesome5_${pro ? `Pro_${styleName}` : styleName}.ttf`;
if (styleName === 'Brands') {
styleName = 'Regular';
fontFile = 'FontAwesome5_Brands.ttf';

@@ -42,5 +45,8 @@ }

fontFile,
fontStyle: {
fontWeight,
},
fontStyle: Platform.select({
ios: {
fontWeight,
},
default: {},
}),
glyphMap,

@@ -51,9 +57,9 @@ };

const brandIcons = createFontAwesomeStyle(
'Regular',
'Brands',
'400',
'FontAwesome5Brands',
'FontAwesome5Brands'
);
const lightIcons = createFontAwesomeStyle('Light', '100');
const lightIcons = createFontAwesomeStyle('Light', '300');
const regularIcons = createFontAwesomeStyle('Regular', '400');
const solidIcons = createFontAwesomeStyle('Solid', '700');
const solidIcons = createFontAwesomeStyle('Solid', '900');
const Icon = createMultiStyleIconSet(

@@ -70,3 +76,3 @@ {

glyphValidator,
},
}
);

@@ -73,0 +79,0 @@

@@ -6,3 +6,3 @@ import createIconSet from './create-icon-set';

fontFamilyArg,
fontFile,
fontFile
) {

@@ -9,0 +9,0 @@ const glyphMap = {};

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { NativeModules, Platform, PixelRatio, processColor, Text } from 'react-native';
import {
NativeModules,
Platform,
PixelRatio,
processColor,
Text,
} from './react-native';
import ensureNativeModuleAvailable from './ensure-native-module-available';
import createIconSourceCache from './create-icon-source-cache';
import createIconButtonComponent from './icon-button';

@@ -28,3 +35,3 @@ import createTabBarItemIOSComponent from './tab-bar-item-ios';

const fontReference = Platform.select({
windows: `Assets/${fontFile}#${fontFamily}`,
windows: `/Assets/${fontFile}#${fontFamily}`,
android: fontBasename,

@@ -38,2 +45,4 @@ web: fontBasename,

class Icon extends PureComponent {
root = null;
static propTypes = {

@@ -53,4 +62,2 @@ allowFontScaling: PropTypes.bool,

root = null;
setNativeProps(nativeProps) {

@@ -97,5 +104,13 @@ if (this.root) {

const imageSourceCache = {};
const imageSourceCache = createIconSourceCache();
function getImageSource(
function resolveGlyph(name) {
const glyph = glyphMap[name] || '?';
if (typeof glyph === 'number') {
return String.fromCharCode(glyph);
}
return glyph;
}
function getImageSourceSync(
name,

@@ -107,50 +122,63 @@ size = DEFAULT_ICON_SIZE,

let glyph = glyphMap[name] || '?';
if (typeof glyph === 'number') {
glyph = String.fromCharCode(glyph);
const glyph = resolveGlyph(name);
const processedColor = processColor(color);
const cacheKey = `${glyph}:${size}:${processedColor}`;
if (imageSourceCache.has(cacheKey)) {
return imageSourceCache.get(cacheKey);
}
try {
const imagePath = NativeIconAPI.getImageForFontSync(
fontReference,
glyph,
size,
processedColor
);
const value = { uri: imagePath, scale: PixelRatio.get() };
imageSourceCache.setValue(cacheKey, value);
return value;
} catch (error) {
imageSourceCache.setError(cacheKey, error);
throw error;
}
}
async function getImageSource(
name,
size = DEFAULT_ICON_SIZE,
color = DEFAULT_ICON_COLOR
) {
ensureNativeModuleAvailable();
const glyph = resolveGlyph(name);
const processedColor = processColor(color);
const cacheKey = `${glyph}:${size}:${processedColor}`;
const scale = PixelRatio.get();
return new Promise((resolve, reject) => {
const cached = imageSourceCache[cacheKey];
if (typeof cached !== 'undefined') {
if (!cached || cached instanceof Error) {
reject(cached);
} else {
resolve({ uri: cached, scale });
}
} else {
NativeIconAPI.getImageForFont(
fontReference,
glyph,
size,
processedColor,
(err, image) => {
const error = typeof err === 'string' ? new Error(err) : err;
imageSourceCache[cacheKey] = image || error || false;
if (!error && image) {
resolve({ uri: image, scale });
} else {
reject(error);
}
}
);
}
});
if (imageSourceCache.has(cacheKey)) {
return imageSourceCache.get(cacheKey);
}
try {
const imagePath = await NativeIconAPI.getImageForFont(
fontReference,
glyph,
size,
processedColor
);
const value = { uri: imagePath, scale: PixelRatio.get() };
imageSourceCache.setValue(cacheKey, value);
return value;
} catch (error) {
imageSourceCache.setError(cacheKey, error);
throw error;
}
}
function loadFont(file = fontFile) {
async function loadFont(file = fontFile) {
if (Platform.OS === 'ios') {
ensureNativeModuleAvailable();
if (!file) {
return Promise.reject(
new Error('Unable to load font, because no file was specified. ')
);
throw new Error('Unable to load font, because no file was specified. ');
}
return NativeIconAPI.loadFontWithFileName(...file.split('.'));
await NativeIconAPI.loadFontWithFileName(...file.split('.'));
}
return Promise.resolve();
}

@@ -181,2 +209,3 @@

Icon.getImageSource = getImageSource;
Icon.getImageSourceSync = getImageSourceSync;
Icon.loadFont = loadFont;

@@ -183,0 +212,0 @@ Icon.hasIcon = hasIcon;

@@ -30,3 +30,3 @@ import React, { PureComponent } from 'react';

style.fontFile || '',
style.fontStyle || {},
style.fontStyle || {}
);

@@ -43,3 +43,3 @@

: result,
options.defaultStyle,
options.defaultStyle
);

@@ -91,3 +91,3 @@ }

color = DEFAULT_ICON_COLOR,
style = options.defaultStyle,
style = options.defaultStyle
) {

@@ -94,0 +94,0 @@ return getStyledIconSet(style, name).getImageSource(name, size, color);

@@ -1,2 +0,2 @@

import { Platform, NativeModules } from 'react-native';
import { Platform, NativeModules } from './react-native';

@@ -3,0 +3,0 @@ const NativeIconAPI =

@@ -55,3 +55,3 @@ const _ = require('lodash');

if (template) {
return _.template(template)(Object.assign({ glyphMap: content }, data));
return _.template(template)({ glyphMap: content, ...data });
}

@@ -58,0 +58,0 @@ return content;

@@ -6,3 +6,3 @@ import isString from 'lodash/isString';

import PropTypes from 'prop-types';
import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import { StyleSheet, Text, TouchableHighlight, View } from './react-native';

@@ -9,0 +9,0 @@ const styles = StyleSheet.create({

@@ -6,3 +6,3 @@ /* eslint-disable react/no-unused-prop-types */

import PropTypes from 'prop-types';
import { TabBarIOS } from 'react-native';
import { TabBarIOS } from './react-native';

@@ -9,0 +9,0 @@ const ICON_PROP_NAMES = ['iconName', 'iconSize', 'iconColor'];

@@ -6,3 +6,3 @@ /* eslint-disable react/no-unused-prop-types */

import PropTypes from 'prop-types';
import { ToolbarAndroid } from 'react-native';
import ToolbarAndroid from '@react-native-community/toolbar-android';

@@ -9,0 +9,0 @@ const ICON_PROP_NAMES = ['iconSize', 'iconColor', 'titleColor'];

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;

@@ -12,8 +12,9 @@ /**

export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
export const {
Button,
TabBarItem,
TabBarItemIOS,
ToolbarAndroid,
getImageSource,
getImageSourceSync,
} = iconSet;
{
"name": "@expo/vector-icons",
"sideEffects": false,
"version": "10.1.0",
"version": "10.1.1-alpha.0",
"description": "Built-in support for popular icon fonts and the tooling to create your own Icon components from your font and glyph map. This is a wrapper around react-native-vector-icons to make it compatible with Expo.",

@@ -6,0 +6,0 @@ "main": "build/IconsLazy.js",

@@ -29,2 +29,2 @@ # @expo/vector-icons

for more usage see [Expo icons documentation](https://docs.expo.io/versions/latest/guides/icons/)
for more usage see [Expo icons documentation](https://docs.expo.io/guides/icons/)

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc