question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add iconFamily prop to Icon

See original GitHub issue

The current way Icon handles setting iconFamily makes it impossible if you want to have a one off icon from one of the other icon sets.

I understand that at that point I should just import directly from react-native-vector-icons but, if I do that, then I have to reapply all of the styles that I’ve put on IconNB.

Is there another way to handle this one off case aside from adding a prop to Icon?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
alanbonachellacommented, Nov 7, 2017

Hey guy,

I faced the same problem and the solution is very simple!

You just need to import a tag “StyleProvider” and inside a style property pass a function “getTheme” a object with of the iconFamily you want to change in child components.

After that, you finally set a fontFamily to child components inside <StyleProvider/>

Follow the example:

import { Icon, StyleProvider, getTheme } from 'native-base'

<StyleProvider style={getTheme({ iconFamily: 'MaterialCommunityIcons' })}>
       <Icon  name='account' /> 
</StyleProvider>  

The problem resolved and sorry for my English!

1reaction
SupriyaKalghatgicommented, Nov 15, 2017

#1319 @gdaunton Take a look into this, probably what you are looking for

Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - How to pass an icon as a prop? - Stack Overflow
I'm using props and I want to have "optionText" and "optionIcon" the 1st one I'm able to add but I'm not able to...
Read more >
Build a Flexible React Icon Component | by Fabian Lee
The iconFamilies is a mapper object that each key refers to icons of a family. We can choose whatever icons we want by...
Read more >
react-native-vector-icons: Icons and fonts for React Native apps
Set up a React Native project with TypeScript, configure react-native-vector-icons, and link custom fonts with no native code.
Read more >
React Icon Component - Material UI - MUI
To import the icon component with a theme other than the default, append the ... Optionally, you can apply one of the theme...
Read more >
Icons - Expo Documentation
It includes popular icon sets that you can browse at icons.expo.fyi. ... The source prop takes the relative path to refer the image....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found