React-select: Can i change arrow (dropdown indicator) to my svg,png icon

Created on 31 Mar 2019 · 3Comments · Source: JedWatson/react-select

in example : https://codesandbox.io/s/jz33xx66q9?module=/example.js

i want to use image (.svg , .png) instance emoji

how to use that

Source

bonusbb

Most helpful comment

In the example you sent you just have to replace the EmojiIcon with the link of the image you want.

const DropdownIndicator = (
  props: ElementConfig<typeof components.DropdownIndicator>
) => {
  return (
    <components.DropdownIndicator {...props}>
      <img src="https://via.placeholder.com/30x30"/>
    </components.DropdownIndicator>
  );
};

And then on your component:

  <Select
    closeMenuOnSelect={false}
    components={{ DropdownIndicator }}
    defaultValue={[colourOptions[4], colourOptions[5]]}
    isMulti
    options={colourOptions}
  />

michaelmota on 2 Apr 2019

👍12 ❤2

All 3 comments

@bonusbb Please don't post questions to Github. Keep questions over at StackOverflow as per request by the maintainers in the issue template.

Rall3n on 1 Apr 2019

👎23 😄3

In the example you sent you just have to replace the EmojiIcon with the link of the image you want.

const DropdownIndicator = (
  props: ElementConfig<typeof components.DropdownIndicator>
) => {
  return (
    <components.DropdownIndicator {...props}>
      <img src="https://via.placeholder.com/30x30"/>
    </components.DropdownIndicator>
  );
};

And then on your component:

  <Select
    closeMenuOnSelect={false}
    components={{ DropdownIndicator }}
    defaultValue={[colourOptions[4], colourOptions[5]]}
    isMulti
    options={colourOptions}
  />

michaelmota on 2 Apr 2019

👍12 ❤2

how do you change for ?
components is not exported in react-select/async