React Collapsible - Add an icon

Question

I'm using React-Collapsible like this :

<Collapsible trigger="Fiche de référencement"  >
<h2>Hello world</h2>
</Collapsible >

I want to put an icon wit the text "Fiche de référencement", but I don't know how can I do that ? Can you help me ? Thank you

Answer 1

You aren't going to pass an icon to this thing. What you can do is look at what it returns, https://github.com/glennflanagan/react-collapsible/blob/develop/src/Collapsible.js#L248

In any case, this is handled by the span element with the class Collapsible__trigger . Information on it can be found in the example here: https://github.com/glennflanagan/react-collapsible/blob/develop/example/_src/sass/components/_Collapsible.scss#L37

Answer 2

Here is an example-

import { BsChevronDown } from "react-icons/bs"; //react-icon
.
.
<Collapsible trigger={["Serial No.", <BsChevronDown />]}>
  <div/> //children
</Collapsible>

Css-

.Collapsible__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Collapsible__trigger.is-open svg {
  transform: rotate(180deg);
}

Answer 3

<Collapsible trigger={[Fiche de référencement, <Icon name="remove"]} >

Hello world

 <Collapsible trigger="Fiche de référencement" > <h2>Hello world</h2> </Collapsible >