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

Monorepo #1679

Merged
merged 601 commits into from
Nov 28, 2024
Merged

Monorepo #1679

merged 601 commits into from
Nov 28, 2024

Conversation

johnf
Copy link
Collaborator

@johnf johnf commented Nov 28, 2024

The major changes are

  • Simple setup - only npm install needed
  • Package per font - Only install the fonts you need for smaller binary sizes
  • Typescript support
  • All fonts updated
  • Font package generator - easily ship new fonts
  • codemod for easy migration

Check out the migration guide in MIGRATION.md

Help Needed! Can someone help make installation for OSX and Windows projects fully automated as well?

More details on all of the changes are below.

Simple setup

Significant effort has gone into automating the entire setup experience. For
a new user adding a font should be as simple as follows:

npm install @react-native-vector-icons/common @react-native-vector-icons/fontisto
cd ios && pod update
npm android
npm ios
import Fontisto from '@react-native-vector-icons/fontisto'

const App = () => <Fontisto name="comments" />

Package per font

Each font has its own npm package, which means you only get the fonts you want in your final build. For example, @react-native-vector-icons/evil-icons. The version numbers for the individual packages will track the upstream versions. This should provide more stability for your projects regarding knowing which glyphs will be supported in the font.

Significant improvements should be made in binary sizes. For example, if you only need the evil icons font, instead of including 2.8MB of fonts, you would only include 14kB.

New npm scope

The npm modules are now hosted under @react-native-vector-icons.

Native typescript support and auto-completion

All packages are now written in typescript and export types.

LSP-based autocompletion should now be significantly improved, with the completion of icon names, including support for multi-style icons like FontAwesome 5 and 6.

Font updates

All fonts have been updated to the very latest versions. In the future, we intend to have automation via GitHub actions to track upstream fonts and release new versions automatically.

Font template generator

We have created a Yeoman generator, @react-native-vector-icons/generator-react-native-vector-icons, that you can use to create packages for your fonts. We use this to generate all the internal font packages. See the documentation for more details. We will also welcome pull requests for new fonts. In the future, we'll write some GitHub actions to auto-update and publish based on upstream changes.

Other changes

Backwards computability with react-vector-icons has been removed.

Icon.Button has been removed.

The following methods have been removed

  • getFontFamily
  • getRawGlyphMap
  • hasIcon
  • getStyledIconSet

Fontawesome 5 & 6 now take an iconStyle prop to switch between icon styles like solid, sharp, etc.

Migration

A migration guide can be found in MIGRATION.md. We have created a codemod to
help with the heavy lifting, and documented all the steps.

 - @react-native-vector-icons/fontawesome-common@0.0.1-alpha.12
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.19
 - @react-native-vector-icons/fontawesome6-pro@6.5.2-alpha.19
 - generator-react-native-vector-icons@0.0.1-alpha.18
 - @react-native-vector-icons/ant-design@4.4.2-alpha.16
 - @react-native-vector-icons/codemod@0.0.1-alpha.17
 - @react-native-vector-icons/common@0.0.1-alpha.11
 - @react-native-vector-icons/entypo@1.0.1-alpha.16
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.16
 - @react-native-vector-icons/feather@4.29.2-alpha.16
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.16
 - @react-native-vector-icons/fontawesome-common@0.0.1-alpha.13
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.19
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.20
 - @react-native-vector-icons/fontawesome6@6.5.2-alpha.19
 - @react-native-vector-icons/fontawesome6-pro@6.5.2-alpha.20
 - @react-native-vector-icons/fontello@0.0.1-alpha.16
 - @react-native-vector-icons/fontisto@3.0.4-alpha.16
 - @react-native-vector-icons/foundation@2.0.0-alpha.15
 - generator-react-native-vector-icons@0.0.1-alpha.19
 - @react-native-vector-icons/icomoon@0.0.1-alpha.16
 - @react-native-vector-icons/ionicons@7.4.0-alpha.16
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.16
 - @react-native-vector-icons/material-icons@0.0.1-alpha.16
 - @react-native-vector-icons/octicons@19.10.0-alpha.16
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.16
 - @react-native-vector-icons/zocial@1.1.1-alpha.16
They haven't released since Jan 2023 and we saw segfaults on ionicons
 - @react-native-vector-icons/ionicons@7.4.0-alpha.17
Spent hours trying to find a better way here.
It feels like converting SVGs to fonts can be a bit of an art.

With this icon fontforge actually imports the original SVGs without any
fixes but it doesn't deal with transforms in svgs properly and breaks
some glyphs.
 - generator-react-native-vector-icons@0.0.1-alpha.20
 - @react-native-vector-icons/ionicons@7.4.0-alpha.18
 - @react-native-vector-icons/ant-design@4.4.2-alpha.17
 - @react-native-vector-icons/common@0.0.1-alpha.12
 - @react-native-vector-icons/entypo@1.0.1-alpha.17
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.17
 - @react-native-vector-icons/feather@4.29.2-alpha.17
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.17
 - @react-native-vector-icons/fontawesome-common@0.0.1-alpha.14
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.20
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.21
 - @react-native-vector-icons/fontawesome6@6.6.0-alpha.20
 - @react-native-vector-icons/fontawesome6-pro@6.6.0-alpha.21
 - @react-native-vector-icons/fontello@0.0.1-alpha.17
 - @react-native-vector-icons/fontisto@3.0.4-alpha.17
 - @react-native-vector-icons/foundation@2.0.0-alpha.16
 - @react-native-vector-icons/icomoon@0.0.1-alpha.17
 - @react-native-vector-icons/ionicons@7.4.0-alpha.19
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.17
 - @react-native-vector-icons/material-icons@0.0.1-alpha.17
 - @react-native-vector-icons/octicons@19.11.0-alpha.17
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.17
 - @react-native-vector-icons/zocial@1.1.1-alpha.17
 - @react-native-vector-icons/ant-design@4.4.2-alpha.18
 - @react-native-vector-icons/common@0.0.1-alpha.13
 - @react-native-vector-icons/entypo@1.0.1-alpha.18
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.18
 - @react-native-vector-icons/feather@4.29.2-alpha.18
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.18
 - @react-native-vector-icons/fontawesome-common@0.0.1-alpha.15
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.21
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.22
 - @react-native-vector-icons/fontawesome6@6.6.0-alpha.21
 - @react-native-vector-icons/fontawesome6-pro@6.6.0-alpha.22
 - @react-native-vector-icons/fontello@0.0.1-alpha.18
 - @react-native-vector-icons/fontisto@3.0.4-alpha.18
 - @react-native-vector-icons/foundation@2.0.0-alpha.17
 - @react-native-vector-icons/icomoon@0.0.1-alpha.18
 - @react-native-vector-icons/ionicons@7.4.0-alpha.20
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.18
 - @react-native-vector-icons/material-icons@0.0.1-alpha.18
 - @react-native-vector-icons/octicons@19.11.0-alpha.18
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.18
 - @react-native-vector-icons/zocial@1.1.1-alpha.18
 - @react-native-vector-icons/ant-design@4.4.2-alpha.19
 - @react-native-vector-icons/common@0.0.1-alpha.14
 - @react-native-vector-icons/entypo@1.0.1-alpha.19
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.19
 - @react-native-vector-icons/feather@4.29.2-alpha.19
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.19
 - @react-native-vector-icons/fontawesome-common@0.0.1-alpha.16
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.22
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.23
 - @react-native-vector-icons/fontawesome6@6.6.0-alpha.22
 - @react-native-vector-icons/fontawesome6-pro@6.6.0-alpha.23
 - @react-native-vector-icons/fontello@0.0.1-alpha.19
 - @react-native-vector-icons/fontisto@3.0.4-alpha.19
 - @react-native-vector-icons/foundation@2.0.0-alpha.18
 - @react-native-vector-icons/icomoon@0.0.1-alpha.19
 - @react-native-vector-icons/ionicons@7.4.0-alpha.21
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.19
 - @react-native-vector-icons/material-icons@0.0.1-alpha.19
 - @react-native-vector-icons/octicons@19.11.0-alpha.19
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.19
 - @react-native-vector-icons/zocial@1.1.1-alpha.19
 - @react-native-vector-icons/ant-design@4.4.2-alpha.20
 - @react-native-vector-icons/common@0.0.1-alpha.15
 - @react-native-vector-icons/entypo@1.0.1-alpha.20
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.20
 - @react-native-vector-icons/feather@4.29.2-alpha.20
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.20
 - @react-native-vector-icons/fontawesome-common@0.0.1-alpha.17
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.23
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.24
 - @react-native-vector-icons/fontawesome6@6.6.0-alpha.23
 - @react-native-vector-icons/fontawesome6-pro@6.6.0-alpha.24
 - @react-native-vector-icons/fontello@0.0.1-alpha.20
 - @react-native-vector-icons/fontisto@3.0.4-alpha.20
 - @react-native-vector-icons/foundation@2.0.0-alpha.19
 - @react-native-vector-icons/icomoon@0.0.1-alpha.20
 - @react-native-vector-icons/ionicons@7.4.0-alpha.22
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.20
 - @react-native-vector-icons/material-icons@0.0.1-alpha.20
 - @react-native-vector-icons/octicons@19.11.0-alpha.20
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.20
 - @react-native-vector-icons/zocial@1.1.1-alpha.20
 - @react-native-vector-icons/ant-design@4.4.2-alpha.33
 - @react-native-vector-icons/common@11.0.0-alpha.3
 - @react-native-vector-icons/entypo@1.0.1-alpha.33
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.33
 - @react-native-vector-icons/feather@4.29.2-alpha.33
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.33
 - @react-native-vector-icons/fontawesome-common@11.0.0-alpha.3
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.36
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.37
 - @react-native-vector-icons/fontawesome6@6.6.0-alpha.36
 - @react-native-vector-icons/fontawesome6-pro@6.6.0-alpha.37
 - @react-native-vector-icons/fontello@0.0.1-alpha.33
 - @react-native-vector-icons/fontisto@3.0.4-alpha.33
 - @react-native-vector-icons/foundation@2.0.0-alpha.32
 - generator-react-native-vector-icons@11.0.0-alpha.2
 - @react-native-vector-icons/icomoon@0.0.1-alpha.33
 - @react-native-vector-icons/ionicons@7.4.0-alpha.35
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.33
 - @react-native-vector-icons/material-icons@0.0.1-alpha.33
 - @react-native-vector-icons/octicons@19.11.0-alpha.33
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.33
 - @react-native-vector-icons/zocial@1.1.1-alpha.33
 - @react-native-vector-icons/ant-design@4.4.2-alpha.34
 - @react-native-vector-icons/codemod@11.0.0-alpha.1
 - @react-native-vector-icons/common@11.0.0-alpha.4
 - @react-native-vector-icons/entypo@1.0.1-alpha.34
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.34
 - @react-native-vector-icons/feather@4.29.2-alpha.34
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.34
 - @react-native-vector-icons/fontawesome-common@11.0.0-alpha.4
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.37
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.38
 - @react-native-vector-icons/fontawesome6@6.6.0-alpha.37
 - @react-native-vector-icons/fontawesome6-pro@6.6.0-alpha.38
 - @react-native-vector-icons/fontello@0.0.1-alpha.34
 - @react-native-vector-icons/fontisto@3.0.4-alpha.34
 - @react-native-vector-icons/foundation@2.0.0-alpha.33
 - generator-react-native-vector-icons@11.0.0-alpha.3
 - @react-native-vector-icons/icomoon@0.0.1-alpha.34
 - @react-native-vector-icons/ionicons@7.4.0-alpha.36
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.34
 - @react-native-vector-icons/material-icons@0.0.1-alpha.34
 - @react-native-vector-icons/octicons@19.11.0-alpha.34
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.34
 - @react-native-vector-icons/zocial@1.1.1-alpha.34
 - @react-native-vector-icons/ant-design@4.4.2-alpha.35
 - @react-native-vector-icons/codemod@11.0.0-alpha.2
 - @react-native-vector-icons/common@11.0.0-alpha.5
 - @react-native-vector-icons/entypo@1.0.1-alpha.35
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.35
 - @react-native-vector-icons/feather@4.29.2-alpha.35
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.35
 - @react-native-vector-icons/fontawesome-common@11.0.0-alpha.5
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.38
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.39
 - @react-native-vector-icons/fontawesome6@6.6.0-alpha.38
 - @react-native-vector-icons/fontawesome6-pro@6.6.0-alpha.39
 - @react-native-vector-icons/fontello@0.0.1-alpha.35
 - @react-native-vector-icons/fontisto@3.0.4-alpha.35
 - @react-native-vector-icons/foundation@2.0.0-alpha.34
 - generator-react-native-vector-icons@11.0.0-alpha.4
 - @react-native-vector-icons/icomoon@0.0.1-alpha.35
 - @react-native-vector-icons/ionicons@7.4.0-alpha.37
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.35
 - @react-native-vector-icons/material-icons@0.0.1-alpha.35
 - @react-native-vector-icons/octicons@19.12.0-alpha.35
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.35
 - @react-native-vector-icons/zocial@1.1.1-alpha.35
 - @react-native-vector-icons/ant-design@4.4.2-alpha.36
 - @react-native-vector-icons/common@11.0.0-alpha.6
 - @react-native-vector-icons/entypo@1.0.1-alpha.36
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.36
 - @react-native-vector-icons/feather@4.29.2-alpha.36
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.36
 - @react-native-vector-icons/fontawesome-common@11.0.0-alpha.6
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.39
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.40
 - @react-native-vector-icons/fontawesome6@6.7.1-alpha.39
 - @react-native-vector-icons/fontawesome6-pro@6.7.1-alpha.40
 - @react-native-vector-icons/fontello@0.0.1-alpha.36
 - @react-native-vector-icons/fontisto@3.0.4-alpha.36
 - @react-native-vector-icons/foundation@2.0.0-alpha.35
 - generator-react-native-vector-icons@11.0.0-alpha.5
 - @react-native-vector-icons/icomoon@0.0.1-alpha.36
 - @react-native-vector-icons/ionicons@7.4.0-alpha.38
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.36
 - @react-native-vector-icons/material-icons@0.0.1-alpha.36
 - @react-native-vector-icons/octicons@19.12.0-alpha.36
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.36
 - @react-native-vector-icons/zocial@1.1.1-alpha.36
 - generator-react-native-vector-icons@11.0.0-alpha.6
 - @react-native-vector-icons/ant-design@4.4.2-alpha.37
 - @react-native-vector-icons/common@11.0.0-alpha.7
 - @react-native-vector-icons/entypo@1.0.1-alpha.37
 - @react-native-vector-icons/evil-icons@1.10.1-alpha.37
 - @react-native-vector-icons/feather@4.29.2-alpha.37
 - @react-native-vector-icons/fontawesome@4.7.0-alpha.37
 - @react-native-vector-icons/fontawesome-common@11.0.0-alpha.7
 - @react-native-vector-icons/fontawesome5@5.15.4-alpha.40
 - @react-native-vector-icons/fontawesome5-pro@5.15.4-alpha.41
 - @react-native-vector-icons/fontawesome6@6.7.1-alpha.40
 - @react-native-vector-icons/fontawesome6-pro@6.7.1-alpha.41
 - @react-native-vector-icons/fontello@0.0.1-alpha.37
 - @react-native-vector-icons/fontisto@3.0.4-alpha.37
 - @react-native-vector-icons/foundation@2.0.0-alpha.36
 - @react-native-vector-icons/icomoon@0.0.1-alpha.37
 - @react-native-vector-icons/ionicons@7.4.0-alpha.39
 - @react-native-vector-icons/material-design-icons@7.4.47-alpha.37
 - @react-native-vector-icons/material-icons@0.0.1-alpha.37
 - @react-native-vector-icons/octicons@19.12.0-alpha.37
 - @react-native-vector-icons/simple-line-icons@2.5.5-alpha.37
 - @react-native-vector-icons/zocial@1.1.1-alpha.37
 - @react-native-vector-icons/ant-design@4.4.2
 - @react-native-vector-icons/codemod@11.0.0
 - @react-native-vector-icons/common@11.0.0
 - @react-native-vector-icons/entypo@1.0.1
 - @react-native-vector-icons/evil-icons@1.10.1
 - @react-native-vector-icons/feather@4.29.2
 - @react-native-vector-icons/fontawesome@4.7.0
 - @react-native-vector-icons/fontawesome-common@11.0.0
 - @react-native-vector-icons/fontawesome5@5.15.4
 - @react-native-vector-icons/fontawesome5-pro@5.15.4
 - @react-native-vector-icons/fontawesome6@6.7.1
 - @react-native-vector-icons/fontawesome6-pro@6.7.1
 - @react-native-vector-icons/fontello@0.0.1
 - @react-native-vector-icons/fontisto@3.0.4
 - @react-native-vector-icons/foundation@2.0.0
 - generator-react-native-vector-icons@11.0.0
 - @react-native-vector-icons/icomoon@0.0.1
 - @react-native-vector-icons/ionicons@7.4.0
 - @react-native-vector-icons/material-design-icons@7.4.47
 - @react-native-vector-icons/material-icons@0.0.1
 - @react-native-vector-icons/octicons@19.12.0
 - @react-native-vector-icons/simple-line-icons@2.5.5
 - @react-native-vector-icons/zocial@1.1.1
@oblador oblador merged commit 2559338 into master Nov 28, 2024
36 of 40 checks passed
@oblador oblador deleted the monorepo branch November 28, 2024 21:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants