2

I'm new to React Native and I'm trying to have icons that are able to have their color changed based on json data received. I've been able to use React Native Vector Icons. However, I have my own icons that I would like to use. On the linked repo page there is something that talks about generating your own icons, but I'm not familiar enough to know how it is supposed to work. My icons are .png files and I'd like to make them so I can give them a color attribute on the fly in my app. I wanted to see what the process was to be able to do that if it was even possible. Can I use the process described in the repo?

Thanks in advance!

pianoman102
  • 541
  • 8
  • 22
  • you could create your own icon component and give it a `color` props that you could pass. Then in your icon component simply use images as a solution – Harrison Jul 31 '18 at 03:01
  • @Harrison I guess I don't get how to provide the image to the icon component. It doesn't look like there is something in the api to do that. – pianoman102 Jul 31 '18 at 03:08
  • Sorry, to clarify, I mean to not specifically use the `React-native-vector-icons` library. What the library basically does is install font packs and icons packs that you can freely use. It also documents customizing the fonts that they provide. What I'm suggesting you do is literally create your own icon component, and because you made your own .png icons, you can supply those to your icon component. If you need help making an icon component I'm happy to help. Or, to make things easier, you could just use the image instead without creating any additional component. – Harrison Jul 31 '18 at 03:20
  • I have been able to just use the image, but like I said, I need to be able to change the color of it based on data that I'm receiving. I'll have multiple icons representing similar items, but I want them to be distinguishable. If making my own icon will do that, I'm happy to learn about it haha. – pianoman102 Jul 31 '18 at 03:26
  • 1
    assume you have an `.svg` and you want to change the color using `color:'yourColor'`, [Follow this guide to get what you need](https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html) – flix Jul 31 '18 at 04:52
  • Awesome! I have been trying to convert my png's to svg's, do you know of a decent way to do that correctly? – pianoman102 Jul 31 '18 at 04:54

1 Answers1

0

So, to create your own icon component, this could be a simple representation: 

import React from 'react'
import { View, Image } from 'react-native'

export default class Example extends React.Component{

  renderIcon = (iconName, color) => {
    iconName = this.props.iconName
    color = this.props.color
    return<Image source={require(`/example/icons/${exampleIcon}${color}.png`)}/>
  }

  render(){
    return(
      <View>
        {this._renderIcon}
      </View>
    )
  }
}

For example, your .png Icon is called IconHomeFocused, and it's an icon of the home icon when it's focused...then you would put, in your component that you want your Icon to be in: <Example iconName = 'IconHome' color = 'Focused'/>. Of course, this requires you to name your icons carefully. I didn't want to write a million if statements so this seemed like the easiest sort of integration for me. I'm sure there are much better interpretations out there though. Good luck.

Harrison
  • 653
  • 3
  • 6
  • 17
  • So for this one, you are simply using the colored image called for in the `Image`, which means I would have to create a different icon for each color I wanted to use. Correct? – pianoman102 Jul 31 '18 at 03:50
  • @pianoman102 correct because that's how I thought you had your images organized. How were you planning to change the color? – Harrison Jul 31 '18 at 03:51
  • I guess I should have clarified more in my initial post. I want to be able to have One icon only that I can simply pass a color prop to. Much like they do in the vector icons module you can install. That's why I wanted to know how I could create my own icon in the same way, if possible. – pianoman102 Jul 31 '18 at 03:53
  • 2
    @pianoman102 I understand but as far as I know there isn't a way to simply change a image's color or tint without hurting performance. To my knowledge, it would be better to simply display different images, and I think that's how the library implements it anyways. Also, what I did does allow you to use one `Icon` component. You simply have to supply a color prop and icon name prop to it. If you just want one icon without making your own component you can simply use an image instead and use conditional render to achieve changing the color(image) – Harrison Jul 31 '18 at 03:57