custom icon for each option

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!

[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 }}
/>

[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”;