React-select: custom icon for each option

[glapsable]

Hello I trying to make custom icon for any of option.
http://prntscr.com/n0h6nk

maybe is there possibility to add third key in options array? Or any other possibility?

const statusOptions = [
    { value: 'notStarted', label: 'Nierozpoczęte', icon: 'someIcon' },
    { value: 'started', label: 'Rozpoczęte', icon: 'someIcon' }
];

I need same effect as in home libraby homepage, but my icons will be svg, or jpeg, or png
https://react-select.com/home

pic for view => http://prntscr.com/n0u2p2

Thanks!

[mohsinhere]

Hi,

Were you able to achieve it?

Thanks!

[glapsable]

Hello,
Yes, i made it:

You need to make custom component. I found solution in docs. My solution below:

const customSingleValue = ({ data }) => (
    <div className="input-select">
        <div className="input-select__single-value">
            { data.icon && <span className="input-select__icon">{ data.icon }</span> }
            <span>{ data.label }</span>
        </div>
    </div>
);

const statusOptions = [
    { value: "todo", label: "Nierozpoczęte", icon: <IconToDo/> },
    { value: "in_progress", label: "W toku", icon: <IconProgress/> },
    { value: "done", label: "Zalatwione", icon: <IconDone/> },
    { value: "rejected", label: "Odrzucone", icon: <IconRejected/> },
];

        <Select
            defaultValue={ statusOptions [0] }
            options={ statusOptions }
            styles={ selectCustomStyles }
            onChange={ changeSelectHandler }
            components={ {SingleValue: customSingleValue } }
        />

svg icons upload as React Components:
import { ReactComponent as IconProgress } from "/icon_in_progress.svg";

[mohsinhere]

Thanks mate! 👍

[niteshgrg]

for me this didn't work @glapsable can you also supply what customStyles did you use.

[dgwyer]

I'd be interested in this too. Any chance of seeing a working example?

[cobyrne09]

@niteshgrg @dgwyer https://codesandbox.io/s/friendly-field-y3u33. Maybe some of the confusion here is that the methods to get an icon to show up in the input versus the dropdown are different? This example, and the code above, are for getting an icon (or any html) to show up in the input.

[lossen]

If anybody still looking for a working example please look at this
https://github.com/JedWatson/react-select/issues/2553#issuecomment-390197214

[ozgrozer]

If you want to show custom icons both in options and selected value area you can use something like this.

import Select, { components } from 'react-select'

const { Option } = components
const CustomSelectOption = props => (
  <Option {...props}>
    <i className={`icon icon-${props.data.icon}`} />
    {props.data.label}
  </Option>
)

const CustomSelectValue = props => (
  <div>
    <i className={`icon icon-${props.data.icon}`} />
    {props.data.label}
  </div>
)

const options = [
  { value: 'item1', label: 'Item 1', icon: 'bar' },
  { value: 'item2', label: 'Item 2', icon: 'folder' }
]

<Select
  {...}
  options={options}
  components={{ Option: CustomSelectOption, SingleValue: CustomSelectValue }}
/>

[sebastianpaz]

Thanks mate @ozgrozer works like a charm!!!!