How to increase Antd Collapse icon size and change it if collapse is expanded

user_16555202 0
Viewed 771

I need to do two things:

  1. Need to increase default icon arrow size
  2. Need to change icon to a different one when the panel is expanded.

I managed to do that this way:

  <Collapse
  expandIconPosition='right'
  className='collapse-container'

  // this works fine
  expandIcon={({isActive}) => isActive
  ? <img src={closeCollapseIcon} />
  : <img src={openCollapseIcon} />}
  >
    <Panel header='Question...' key='3'>
      <p className='help-panel-text'>Some text</p>
    </Panel>
  </Collapse>

My question is: Is there a way to do the same but in a more elegant way? My solution seems to be too straightforward.

antd reactjs
1 Answers

You dont need to render two img tags, you can achieve the same thing with one tag. A more appropriate way would be using the Icon component provided by ant design

    expandIcon={({ isActive }) => (
      <Icon
        component={isActive ? closeCollapseIcon : openCollapseIcon}
        width="2em"
        height="2em"
      />
    )}
user_117513960
Related