Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FontAwesome 5 #776

Merged
merged 23 commits into from
Jul 20, 2018
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
5340877
FontAwesome5 implementation
hampustagerud Jul 16, 2018
8e789bf
Update README.md
hampustagerud Jul 17, 2018
13e644a
Easier way to use FontAwesome5 Pro
hampustagerud Jul 17, 2018
c682035
FontAwesome 5 instructions
hampustagerud Jul 17, 2018
a698fe1
Automatic build and upgrading, also added to directory and IconExplorer
hampustagerud Jul 17, 2018
5d2dae1
Buttons and TabBarItems should be working on iOS too now
hampustagerud Jul 17, 2018
b144027
Updated build flow
hampustagerud Jul 18, 2018
5c1e203
Upgrading FontAwesome is automatic and occurs locally
hampustagerud Jul 18, 2018
0f9b2a5
Create FontAwesome 5 iconSet with factory
hampustagerud Jul 18, 2018
f1ef199
Setup FontAwesome 5 automatically
hampustagerud Jul 18, 2018
8a8a1d1
Bug fixes with FontAwesome 5 loading
hampustagerud Jul 18, 2018
569473f
getImageSource() implementation for FontAwesome 5
hampustagerud Jul 18, 2018
47cece2
Export all types in FontAwesome5 iconSets
hampustagerud Jul 18, 2018
6fd8697
Changed name on FA5Type to FA5Style
hampustagerud Jul 18, 2018
50942b8
Update docs to reflect changes to FontAwesome 5
hampustagerud Jul 18, 2018
d952755
Some final iOS fixes for FontAwesome 5 PR
hampustagerud Jul 18, 2018
f6d6365
Updated scripts
hampustagerud Jul 19, 2018
6bd1e49
Name changes and minor fixes
hampustagerud Jul 19, 2018
8c3189e
ensureNativeModuleAvailable() in its own file
hampustagerud Jul 19, 2018
7eb5d31
Removed add-font-assets from user binaries
hampustagerud Jul 19, 2018
4d1503a
Edited package.json ends with blank line now
hampustagerud Jul 19, 2018
068dc30
Cleaner code
hampustagerud Jul 19, 2018
d8763ee
Docs update
hampustagerud Jul 19, 2018
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Upgrading FontAwesome is automatic and occurs locally
  • Loading branch information
hampustagerud committed Jul 18, 2018
commit 5c1e20351af35038894aa565d608c7f814d4cff0
23 changes: 5 additions & 18 deletions FONTAWESOME5.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,27 +91,14 @@ const solid_icon_btn = (<FontAwesome5.Solid.Button name={'comments'} />);
You need your FontAwesome npm token which can be obtained by logging into your
account and then access the ```Services``` tab.

Run ```npm run fa5upgrade``` in the ```node_modules/react-native-vector-icons```
folder and enter the token when asked to in order to
upgrade to the Pro version. Note that you need to link and rebuild the app
after this.
Run ```fa5upgrade``` and enter the token when asked to in order to
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

npm run fa5-upgrade or ./node_modules/.bin/fa5-upgrade, yeah?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

npm run fa5-upgrade results in npm ERR! missing script: fa5-upgrade for me. ./node_modules/.bin/fa5-upgrade works but so does fa5-upgrade?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe that only works with yarn, let’s change to full bin path (current name is wrong now anyway). Not everybody has set up their path to include node_modules.

upgrade to the Pro version.

## Manually

If the shell script does not work you can install the Pro version manually
by replacing the font files in ```Fonts/```. First you need to download the
Pro pack from the FontAwesome website (use the web version). Then rename
the font files in the ```webfonts/``` folder like this:

* fa-brands-400.ttf > FontAwesome5_Brands.ttf
* fa-light-300.ttf > FontAwesome5_Light.ttf
* fa-regular-400.ttf > FontAwesome5_Regular.ttf
* fa-solid-900.ttf > FontAwesome5_Solid.ttf

Place these in the ```Fonts/``` folder and replace the Free font files in the
process.

Link and rebuild the project.
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
instructions on how to do this in main README.md.

## Using the Pro version

Expand Down
23 changes: 23 additions & 0 deletions bin/add-font-assets.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
#!/usr/bin/env node
/* eslint-disable no-console */

const fs = require('fs');

const json = fs.readFileSync('package.json', 'utf8');

const pack = JSON.parse(json);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if it's better but I would do a require('package.json') to save me some typing.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried it at first because it does look a lot cleaner but then node can't seem to find the file, it only works when I use the fs module. Maybe there is something wrong with my env?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think fs is relative to pwd and require to the file. Try require(path.resolve(’package.json’))

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, require is relative to the file... I forgot about that!


if (!pack.rnpm) {
pack.rnpm = {
assets: [],
};
} else if (!pack.rnpm.assets) {
pack.rnpm.assets = [];
}

for (let i = 0; i < pack.rnpm.assets.length; i += 1)
if (pack.rnpm.assets[i] === './assets/fonts') process.exit();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels like includes() or an old school pack.rnpm.assets.indexOf('./assets/fonts') !== -1 would be prettier somehow

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Total blackout here, of course that's what it should be!


pack.rnpm.assets.push('./assets/fonts');

fs.writeFileSync('package.json', JSON.stringify(pack, null, 2), 'utf8');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very small detail, but most prefer files ending with a new line and many editors will add it by just saving. To avoid diffs, could you add one?

Copy link
Collaborator Author

@hampustagerud hampustagerud Jul 19, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do too, I don't know if it's git or my editor (currently JetBrains) but I have to have two blank lines at the end to make one blank line in the saved file.

It seems like yarn test complains on the blank line though?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant in the generated package.json

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, got it!

43 changes: 43 additions & 0 deletions bin/fa5-upgrade.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
#!/bin/sh

echo "Please enter your FontAwesome5 npm token:"

read fa5_token

echo "Setting up npm config"

npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" $fa5_token
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm assuming that this might already have been done before. Maybe we should check whether the setting already exists and not ask for token in that case.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure how to implement this, I can read the first variable and only set it to a new value if it is undefined. However, the second one is secret and I can't read anything from checking npm config get "//npm.fontawesome.com/:_authToken". Is there a way to extract the value? The documentation doesn't seem to mention anything about it or the error thrown ("--- sekretz ---").


echo "Creating temporary folder"

TEMP_DIR=`mktemp -d -t rnvi`
echo "Created folder $TEMP_DIR"
pushd $TEMP_DIR

echo "Downloading FontAwesome5 Pro"

npm pack @fortawesome/fontawesome-pro
tar -xzf fortawesome-fontawesome-pro*
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK npm pack will output the file name, so you can use that instead of globing.

mv package pro

popd
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Learned a new command today, thanks!


echo "Copying font files"

mkdir -p assets/fonts

cp $TEMP_DIR/pro/webfonts/fa-brands-400.ttf assets/fonts/FontAwesome5_Pro_Brands.ttf
cp $TEMP_DIR/pro/webfonts/fa-light-300.ttf assets/fonts/FontAwesome5_Pro_Light.ttf
cp $TEMP_DIR/pro/webfonts/fa-regular-400.ttf assets/fonts/FontAwesome5_Pro_Regular.ttf
cp $TEMP_DIR/pro/webfonts/fa-solid-900.ttf assets/fonts/FontAwesome5_Pro_Solid.ttf

echo "Modifying package.json"

add-font-assets
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This assumes $PATH variable to include ./node_modules/.bin correct? Maybe better to be explicit here.


echo "Linking project"

react-native link
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is potentially dangerous, can we be explicit with only linking the current project? Didn't try but was thinking like this:

react-native link `basename "$PWD"`

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran with react-native link react-native-vector-icons which I intended first but I guess I forgot it later.


echo "Done"
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
"description": "Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.",
"main": "dist/index.js",
"bin": {
"add-font-assets": "./bin/add-font-assets.js",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to expose this script to the user? If so maybe document it.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really, it is only useful when running fa5-upgrade.

"fa5-upgrade": "./bin/fa5-upgrade.sh",
Copy link
Owner

@oblador oblador Jul 19, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it make sense to prefix this somehow? I know generate-icon doesn't, but that doesn't mean it's correct hehe.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know, looking through some .bin folders it doesn't seem conventional to have some common prefix.

"generate-icon": "./bin/generate-icon.js"
},
"scripts": {
Expand All @@ -23,8 +25,7 @@
"build-materialcommunityicons": "./scripts/materialcommunityicons.sh",
"build-octicons": "./scripts/octicons.sh",
"build-zocial": "./scripts/zocial.sh",
"build-simplelineicons": "./scripts/simplelineicons.sh",
"fa5upgrade": "./scripts/fa5upgrade.sh"
"build-simplelineicons": "./scripts/simplelineicons.sh"
},
"keywords": [
"react-native",
Expand Down
23 changes: 0 additions & 23 deletions scripts/fa5upgrade.sh

This file was deleted.