Intenta agregar un ícono a la opción en reaccionar-seleccionar. england.svg iconos svg de los archivos inglaterra.svg, germany.svg . customSingleValue y lo puse en
<Select components={{ SingleValue: customSingleValue }} />Se muestran las etiquetas, pero no los iconos.
Demostración aquí: 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'));Creo que el problema es que en realidad no estás importando los SVG. Si intenta usar <IconFlagGermany/> directamente en su código en cualquier lugar, se bloqueará con este mensaje:
El tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.
Actualmente no se bloquea porque creo que su función customSingleValue no funciona como usted pretende (no lo he investigado, pero estoy bastante seguro de que tiene errores).
Si desea poder importar archivos SVG de esta manera, debe configurar un cargador adecuado en Webpack (o en el paquete que elija). Tal vez algo como esto: https://www.npmjs.com/package/react-svg-loader
Sin embargo, otra solución es exportar correctamente sus SVG como componentes, como en esta demostración bifurcada de su código: https://stackblitz.com/edit/react-5gvytm
Encontré una solución para resolverlo. Mi técnica es similar a @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"));En caso de que alguien quiera usar íconos con selección múltiple en react-select , se puede usar el siguiente código:
const { MultiValue } = components; const MultiValueOption = (props) => { return ( <MultiValue {...props}> <img src={require("./" + props.data.icon)} style={{ width: 36 }} alt={props.data.label} /> <span>{props.data.value}</span> </MultiValue> ); }; <Select options={options} components={{ Option: IconOption, MultiValue: MultiValueOption, }} isMulti={true} ></Select>;