How to add an icon to the options in react-select?

Umbro picture Umbro · Oct 18, 2019 · Viewed 7.3k times · Source

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'));

Answer

Penny Liu picture Penny Liu · Apr 1, 2020

I found a workaround how to solve it. My technique is similar to @canda:

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import Select, { components } from "react-select";

const options = [
  { value: "England", label: "England", icon: "england.svg" },
  { value: "Germany", label: "Germany", icon: "germany.svg" }
];

const { Option } = components;
const IconOption = props => (
  <Option {...props}>
    <img
      src={require('./' + props.data.icon)}
      style={{ width: 36 }}
      alt={props.data.label}
    />
    {props.data.label}
  </Option>
);

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <Select
        defaultValue={options[0]}
        options={options}
        components={{ Option: IconOption }}
      />
    );
  }
}

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