Settings icons

[jomis003]

I am attempting to set a custom icon in a TextImageRow setting, but am attempting to link to a local asset instead of a url.

My current code which works with a URL is:

<Toggle
label="Enable Selections"
settingsKey="toggleTextInput"
/>
<Select
label={`Selections`}
disabled={!(props.settings.toggleTextInput === "true")}
settingsKey="multiselection"
options={[
{name:"One", value:"1"},
{name:"Two", value:"2"},
{name:"Three", value:"3"},
{name:"Four", value:"4"},
{name:"Five", value:{icon: 'https://tinyurl.com/ybbmpxxq'} } 
]}
renderItem={
(option) =>
<TextImageRow
label={option.name}
icon={option.value.icon}
/>
}

What I would like to do instead is:

import purple from "../resources/images/purple.png"

<Toggle
label="Enable Selections"
settingsKey="toggleTextInput"
/>
<Select
label={`Selections`}
disabled={!(props.settings.toggleTextInput === "true")}
settingsKey="multiselection"
options={[
{name:"One", value:"1"},
{name:"Two", value:"2"},
{name:"Three", value:"3"},
{name:"Four", value:"4"},
{name:"Five", value:{icon: {purple}} } 
]}
renderItem={
(option) =>
<TextImageRow
label={option.name}
icon={option.value.icon}
/>
}

When I do this, I get a blank place holder instead of the image. 

Also, If I simply render icon={purple} it does work, however the image is the same for all the selections and I wish to have a different image for each selection. 

Any help is appreciated. 

[FlyFrosty · Accepted solution]

I found this in one of my old settings program... I don't know if it is what you are looking for.

import img1 from './Landing.jpg';
import img2 from './Kentucky.jpg';
import img3 from './Canyon.jpg';
import img4 from './Ohio.jpg';
import img5 from './Split.jpg';
import img6 from './Hawaii.jpg';
import img7 from './Bahamas.jpg';
import img8 from './Beach.jpg';

const myIcon = [img1, img2, img3, img4, img5, img6, img7, img8];

function mySettings(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Font Color Settings</Text>}>

        <ColorSelect
          settingsKey="color"
          colors={[
            {color: "black"},
            {color: "white"},
            {color: "lightgray"},
            {color: "darkgray"},
            {color: "blue"},
            {color: "deepskyblue"},
            {color: "purple"},
            {color: "brown"},
            {color: "plum"},
            {color: "red"}
            
          ]}
        />
      </Section>
      <Section>
          <Select
            label={<Text bold align="center">Touch to Select Background Image</Text>}
            
            settingsKey="myPic"
              options={[
              {name: "Landing.png", value: 0},
              {name: "Kentucky.png", value: 1},
              {name: "Canyon.png", value : 2},
              {name: "Ohio.png", value : 3},
              {name: "Split.png", value : 4},
              {name: "Hawaii.png", value : 5},
              {name: "Bahamas.png", value : 6},
              {name: "Beach.png", value : 7}
            ]}
            
           
            renderItem={
              (option) =>
                <TextImageRow
                  label={option.name}
                  sublabel="Location"
                  icon={myIcon[option.value]}
                />
            }       
       />
      </Section>
    </Page>
  );
}

registerSettingsPage(mySettings);