-
Notifications
You must be signed in to change notification settings - Fork 1.4k
chore: migrate from react-native-vector-icons to @expo/vector-icons #6620
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
base: develop
Are you sure you want to change the base?
Changes from 7 commits
2d9a000
45b9c00
6636071
a83db97
e880f58
738108d
28b75f0
d343466
1cb0e7e
25c2c98
8347ce0
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,21 +1,30 @@ | ||||||||||||||||||||||||||
| import React, { memo } from 'react'; | ||||||||||||||||||||||||||
| import { createIconSetFromIcoMoon } from 'react-native-vector-icons'; | ||||||||||||||||||||||||||
| import type { IconProps } from 'react-native-vector-icons/Icon'; | ||||||||||||||||||||||||||
| import { createIconSetFromIcoMoon } from '@expo/vector-icons'; | ||||||||||||||||||||||||||
| import { StyleProp, TextStyle } from 'react-native'; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| import { mappedIcons } from './mappedIcons'; | ||||||||||||||||||||||||||
| import { useTheme } from '../../theme'; | ||||||||||||||||||||||||||
| import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout'; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| const icoMoonConfig = require('./selection.json'); | ||||||||||||||||||||||||||
| import icoMoonConfig from './selection.json'; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| export const IconSet = createIconSetFromIcoMoon(icoMoonConfig, 'custom', 'custom.ttf'); | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| const glyphMap = IconSet.getRawGlyphMap | ||||||||||||||||||||||||||
| ? IconSet.getRawGlyphMap() | ||||||||||||||||||||||||||
| : icoMoonConfig.icons?.reduce((map: Record<string, string | number>, glyph: any) => { | ||||||||||||||||||||||||||
| map[glyph.icon.name] = glyph.icon.code; | ||||||||||||||||||||||||||
| return map; | ||||||||||||||||||||||||||
| }, {}) || {}; | ||||||||||||||||||||||||||
|
Comment on lines
+14
to
+17
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix glyphMap fallback to read metadata from
- : icoMoonConfig.icons?.reduce((map: Record<string, string | number>, glyph: any) => {
- map[glyph.icon.name] = glyph.icon.code;
- return map;
- }, {}) || {};
+ : icoMoonConfig.icons?.reduce((map: Record<string, string | number>, glyph: any) => {
+ const name = glyph?.properties?.name;
+ const code = glyph?.properties?.code;
+ if (typeof name === 'string') {
+ map[name] = code ?? mappedIcons[name];
+ }
+ return map;
+ }, {}) || {};📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| export const hasIcon = (name: string) => Object.prototype.hasOwnProperty.call(glyphMap, name); | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| export type TIconsName = keyof typeof mappedIcons; | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| export interface ICustomIcon extends IconProps { | ||||||||||||||||||||||||||
| export interface ICustomIcon extends React.ComponentProps<typeof IconSet> { | ||||||||||||||||||||||||||
| name: TIconsName; | ||||||||||||||||||||||||||
| size: number; | ||||||||||||||||||||||||||
| color?: string; | ||||||||||||||||||||||||||
| style?: StyleProp<TextStyle>; | ||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| const CustomIcon = memo(({ name, size, color, style, ...props }: ICustomIcon): React.ReactElement => { | ||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| # Icons | ||
|
|
||
| Icons are generated using IcoMoon and react-native-vector-icons https://github.com/oblador/react-native-vector-icons#createiconsetfromicomoonconfig-fontfamily-fontfile | ||
| Icons are generated using IcoMoon and `@expo/vector-icons` https://docs.expo.dev/guides/icons/#createiconsetfromicomoon | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Wrap bare URL for markdownlint compliance. Markdown lint (MD034) flags this bare URL; wrap it like 🧰 Tools🪛 markdownlint-cli2 (0.18.1)3-3: Bare URL used (MD034, no-bare-urls) 🤖 Prompt for AI Agents
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Wrap the link to satisfy markdownlint. markdownlint (MD034) flags the bare URL. Please wrap it in angle brackets or convert it into markdown link syntax to keep docs lint passing. 🧰 Tools🪛 markdownlint-cli2 (0.18.1)3-3: Bare URL used (MD034, no-bare-urls) 🤖 Prompt for AI Agents |
||
|
|
||
| # Typescript | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix fallback glyph map extraction.
icoMoonConfig.iconsstores metadata underproperties, noticon, so the fallback map is always empty. IfIconSet.getRawGlyphMapis unavailable,hasIconwill return false for every name and regress status icons. Please pull the name/code fromglyph.properties.Apply this diff:
📝 Committable suggestion
🤖 Prompt for AI Agents