Attempts to add an icon to option in react-select. I imported svg icons from the files england.svg, germany.svg. I created customSingleValue and put it in

<Select components={{ SingleValue: customSingleValue }} />

Labels are displayed, but the icons are not.

Demo here: https://stackblitz.com/edit/react-q19sor

import Select from 'react-select'

import { ReactComponent as IconFlagEngland } from "./england.svg";

import { ReactComponent as IconFlagGermany } from "./germany.svg";



const options = [

  { value: 'England', label: 'England', icon: <IconFlagEngland/> },

  { value: 'Germany', label: 'Germany', icon: <IconFlagGermany/> }

]



const customSingleValue = ({ options }) => (

    <div className="input-select">

        <div className="input-select__single-value">

            { options.icon && <span className="input-select__icon">{ options.icon }</span> }

            <span>{ options.label }</span>

        </div>

    </div>

);



class App extends Component {

  constructor() {

    super();

    this.state = {

      name: 'React'

    };

  }



  render() {

    return (

       <Select

            defaultValue={ options [0] }

            options={ options }

            /*styles={ selectCustomStyles }*/

            /*onChange={ changeSelectHandler }*/

            components={ {SingleValue: customSingleValue } }

        />

    );

  }

}



render(<App />, document.getElementById('root'));