diff --git a/README.md b/README.md index 3ca59b2a3..e1e9d2575 100644 --- a/README.md +++ b/README.md @@ -125,28 +125,28 @@ We're using Nativewind, a styling system for React Native based on Tailwind CSS. ## Creating custom icons -1. Download custom icon from Figma as an SVG file. -2. Add new icon to the iNaturalist icon set in Fontastic. Select all relevant iNaturalist icons and download the zip of icons. -3. Create a glyph file from the CSS file you just downloaded, using the following command (be sure to replace /path/to/styles with your path): +We manage our custom font with Fontastic, so these steps can probably only be done by staff. -``` -npx generate-icon /path/to/styles.css --componentName=INatIcon --fontFamily=inaturalisticons > src/components/INatIcon.js -``` +1. `npm install -f react-native-asset`. You'll need this to link assets. +1. Get the new icon as an SVG file. +1. Add new icon to the iNaturalist icon set in Fontastic. Select all iNaturalist icons and download the zip of icons. +1. Create a glyph file from the CSS file you just downloaded, using the following command (be sure to replace /path/to/styles with your path): + ``` + npx generate-icon /path/to/styles.css --componentName=INatIcon --fontFamily=inaturalisticons > src/components/INatIcon.js + ``` +1. When adding new icons, go to `src/components/INatIcon.js` and make two manual changes. First, edit the line `const iconSet = createIconSet( glyphMap, "inaturalisticons", "INatIcon.ttf" );` to `inaturalisticons.ttf` to match the name of the `.ttf` file you downloaded. There's a discrepency here because the `generate-icon` script makes an assumption that the name of the .ttf file is the same as the name of the component. Components need to start with a capital letter, and `inaturalisticons.tff` is likely not a name we want to change, since we're using it on the web too. We'll probably want to write our own `generate-icon` script to do this automatically. Second, add the following to your exports to make sure a user can see all custom iNat icons in the UI library: + ``` + export { + glyphMap + }; + ``` +1. Add `inaturalisticons.ttf`, to `assets/fonts`. +1. Clean build folders for iOS/Android with `rm -rf ios/build && rm -rf android/app/build`. +1. Run `npx react-native-asset` to link the new assets. +1. Add your icon somewhere in the app using `` where name is set to the name of your new custom icon. +1. Build the app on either platform, and you should see your custom icons. -4. When adding new icons, go to `src/components/INatIcon.js` and make two manual changes. First, edit the line `const iconSet = createIconSet( glyphMap, "inaturalisticons", "INatIcon.ttf" );` to `inaturalisticons.ttf` to match the name of the .ttf file you downloaded. There's a discrepency here because the `generate-icon` script makes an assumption that the name of the .ttf file is the same as the name of the component. Components need to start with a capital letter, and `inaturalisticons.tff` is likely not a name we want to change, since we're using it on the web too. We'll probably want to write our own `generate-icon` script to do this automatically. Second, add the following to your exports to make sure a user can see all custom iNat icons in the UI library: - -``` -export { - glyphMap -}; -``` - -5. Add the .ttf file you downloaded, `inaturalisticons.ttf`, to assets/fonts -6. Clean build folders for iOS/Android with `rm -rf ios/build && rm -rf android/app/build` -7. Add your icon somewhere in the app using `` where name is set to the name of your new custom icon. -8. Build the app on either platform, and you should see your custom icons - -If anything goes wrong, check the [troubleshooting steps](https://github.com/oblador/react-native-vector-icons#troubleshooting) from react-native-vector-icons instructions on creating a glyph map. You can use `npx react-native-asset` to automatically link fonts in iOS/Android, but you shouldn't need to do this unless you're adding a .ttf file with a different name. +If anything goes wrong, check the [troubleshooting steps](https://github.com/oblador/react-native-vector-icons#troubleshooting) from `react-native-vector-icons` instructions on creating a glyph map. ## Troubleshooting diff --git a/android/app/build.gradle b/android/app/build.gradle index 0493829b5..8d78483b8 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -96,12 +96,7 @@ apply from: "../../node_modules/react-native/react.gradle" // add vector icons to project project.ext.vectoricons = [ - iconFontsDir: "../../assets/fonts/", - iconFontNames: [ - 'MaterialCommunityIcons.ttf', - 'MaterialIcons.ttf', - 'inaturalisticons.ttf' - ] + iconFontNames: [ 'MaterialCommunityIcons.ttf', 'MaterialIcons.ttf' ] ] apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" diff --git a/android/app/src/main/assets/fonts/inaturalisticons.ttf b/android/app/src/main/assets/fonts/inaturalisticons.ttf new file mode 100644 index 000000000..9404dbf85 Binary files /dev/null and b/android/app/src/main/assets/fonts/inaturalisticons.ttf differ diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json index 43f5b8f97..33d9aa01a 100644 --- a/android/link-assets-manifest.json +++ b/android/link-assets-manifest.json @@ -1,6 +1,10 @@ { "migIndex": 1, "data": [ + { + "path": "assets/fonts/Whitney-BookItalic-Pro.otf", + "sha1": "15854f60175a0e82b794c259431ec45ea4b40103" + }, { "path": "assets/fonts/Whitney-Light-Pro.otf", "sha1": "d15560faea2b18aef9867a1d2b9e2efb54b17b5b" @@ -11,7 +15,7 @@ }, { "path": "assets/fonts/inaturalisticons.ttf", - "sha1": "76435d11edb09f7914ebf9cb388db461c50d7fda" + "sha1": "0830dfea4d6996a890dfe05a1e1a67ae3eaf0ad4" } ] } diff --git a/assets/fonts/MaterialCommunityIcons.ttf b/assets/fonts/MaterialCommunityIcons.ttf deleted file mode 100644 index ba8735957..000000000 Binary files a/assets/fonts/MaterialCommunityIcons.ttf and /dev/null differ diff --git a/assets/fonts/MaterialIcons.ttf b/assets/fonts/MaterialIcons.ttf deleted file mode 100644 index e50801b3b..000000000 Binary files a/assets/fonts/MaterialIcons.ttf and /dev/null differ diff --git a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj index 2b59b6902..4801ccec7 100644 --- a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj +++ b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj @@ -7,7 +7,6 @@ objects = { /* Begin PBXBuildFile section */ - 0085E50460D749DB8D818C1F /* inaturalisticons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 81076C08FFF24C36A0725EEE /* inaturalisticons.ttf */; }; 00E356F31AD99517003FC87E /* iNaturalistReactNativeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* iNaturalistReactNativeTests.m */; }; 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; @@ -15,6 +14,7 @@ 374CB22F29943E63005885ED /* Whitney-BookItalic-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = 374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */; }; 7EBBE0515B6D88FD724A5C47 /* libPods-iNaturalistReactNative.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7DD42FAECED8C66268DDB37F /* libPods-iNaturalistReactNative.a */; }; 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; + 896925E9AF0F4FA497FD25E1 /* inaturalisticons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9E889D9DF17243EC828D2A57 /* inaturalisticons.ttf */; }; A252B2AEA64E47C9AC1D20E8 /* Whitney-Light-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */; }; BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */; }; /* End PBXBuildFile section */ @@ -43,8 +43,8 @@ 27F9BBBBAB49ABBAF88433C9 /* Pods-iNaturalistReactNative.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative.debug.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative/Pods-iNaturalistReactNative.debug.xcconfig"; sourceTree = ""; }; 374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Whitney-BookItalic-Pro.otf"; path = "../assets/fonts/Whitney-BookItalic-Pro.otf"; sourceTree = ""; }; 7DD42FAECED8C66268DDB37F /* libPods-iNaturalistReactNative.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-iNaturalistReactNative.a"; sourceTree = BUILT_PRODUCTS_DIR; }; - 81076C08FFF24C36A0725EEE /* inaturalisticons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = inaturalisticons.ttf; path = ../assets/fonts/inaturalisticons.ttf; sourceTree = ""; }; 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = iNaturalistReactNative/LaunchScreen.storyboard; sourceTree = ""; }; + 9E889D9DF17243EC828D2A57 /* inaturalisticons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = inaturalisticons.ttf; path = ../assets/fonts/inaturalisticons.ttf; sourceTree = ""; }; BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Light-Pro.otf"; path = "../assets/fonts/Whitney-Light-Pro.otf"; sourceTree = ""; }; C544256CF572EB52B9E2B9CB /* Pods-iNaturalistReactNative.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative.release.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative/Pods-iNaturalistReactNative.release.xcconfig"; sourceTree = ""; }; D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Medium-Pro.otf"; path = "../assets/fonts/Whitney-Medium-Pro.otf"; sourceTree = ""; }; @@ -157,7 +157,7 @@ BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */, D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */, 374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */, - 81076C08FFF24C36A0725EEE /* inaturalisticons.ttf */, + 9E889D9DF17243EC828D2A57 /* inaturalisticons.ttf */, ); name = Resources; sourceTree = ""; @@ -258,7 +258,7 @@ 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, A252B2AEA64E47C9AC1D20E8 /* Whitney-Light-Pro.otf in Resources */, BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */, - 0085E50460D749DB8D818C1F /* inaturalisticons.ttf in Resources */, + 896925E9AF0F4FA497FD25E1 /* inaturalisticons.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json index 43f5b8f97..33d9aa01a 100644 --- a/ios/link-assets-manifest.json +++ b/ios/link-assets-manifest.json @@ -1,6 +1,10 @@ { "migIndex": 1, "data": [ + { + "path": "assets/fonts/Whitney-BookItalic-Pro.otf", + "sha1": "15854f60175a0e82b794c259431ec45ea4b40103" + }, { "path": "assets/fonts/Whitney-Light-Pro.otf", "sha1": "d15560faea2b18aef9867a1d2b9e2efb54b17b5b" @@ -11,7 +15,7 @@ }, { "path": "assets/fonts/inaturalisticons.ttf", - "sha1": "76435d11edb09f7914ebf9cb388db461c50d7fda" + "sha1": "0830dfea4d6996a890dfe05a1e1a67ae3eaf0ad4" } ] }