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

[Feature]: Export type for the icon names of an icon set #1701

Open
robin-ostertag opened this issue Jan 14, 2025 · 1 comment
Open

[Feature]: Export type for the icon names of an icon set #1701

robin-ostertag opened this issue Jan 14, 2025 · 1 comment

Comments

@robin-ostertag
Copy link

robin-ostertag commented Jan 14, 2025

Is your feature request related to a problem?

First of all: The new monorepo changes are great!
I'm working on a react-native app which contains a component that accepts the icon name as props and renders the icon.

There is currently no exported type for the icon name.

Describe the solution you'd like

I would like the icon name type to be exported in order for my prop to be properly typed to avoid passing invalid values for given icon set.
The corresponding types for the icon name already exist.

Describe alternatives you've considered

My current solution is to use patch-package to add the export of these types.

Additional context

I was wondering if I'm missing something and this is currently possible.
Otherwise, I think this would be beneficial as a feature, since I don't think this is an edge case.

Here's my code:

package.json:

"react-native": "0.76.5",
"@react-native-vector-icons/common": "^11.0.0",
"@react-native-vector-icons/fontawesome6": "^6.7.1",

Component:

import Icon, { SolidIconName } from "@react-native-vector-icons/fontawesome6";

interface Props {
    iconName?: SolidIconName;
}

const Component: FunctionComponent<Props> = ({iconName}) => (
    <Icon name={iconName} size={10}  iconStyle="solid" />
)

My changes to @react-native-vector-icons/fontawesome6/lib/typescript/module/src/index.d.ts:

+export type SolidIconName = Parameters<typeof SolidIcon>[0]['name'];

EDIT:
I found this comment
which proposes

import { ComponentProps } from "react";
import Icon from "@react-native-vector-icons/fontawesome6";


type Props = ComponentProps<typeof Icon>;
export type SolidIconName = Props["name"];

I believe this would work great for other fonts than fontawesome and i would prefer this over a patch file for maintainabilty reasons.

For fontawesome this does not work, as it shows types are incompatible.
I believe the reason for this is, that fontawesome is providing multiple styles ("solid", "regular", etc.)

@johnf
Copy link
Collaborator

johnf commented Jan 24, 2025

@robin-ostertag Thanks for the feedback. This is a great idea and I'll look at working it into a future release

@flixyudh flixyudh marked this as a duplicate of #1709 Feb 2, 2025
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

No branches or pull requests

2 participants