如何增大Antd Collapse图标尺寸并在面板展开时切换对应图标

针对你提出的两个需求，有三种更易维护、更简洁的实现方式，你可以根据项目场景选择：

• 方案1：抽离复用图标逻辑（适合局部少量Collapse使用）
  如果你的项目只在少数页面用到自定义样式的Collapse，可以把图标渲染逻辑单独抽离为公共函数，避免每个组件内写重复的三元判断：

import { Collapse } from 'antd'
// 如果你用自定义本地图片直接替换下面的Icon组件即可
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'

const { Panel } = Collapse

// 可单独抽离到公共utils文件，多组件直接导入使用
const customExpandIcon = ({ isActive }) => {
  const Icon = isActive ? CaretUpOutlined : CaretDownOutlined
  // 直接在style里控制图标尺寸，统一修改也更方便
  return <Icon style={{ fontSize: '18px' }} />
}

// 组件内使用
<Collapse
  expandIconPosition='right'
  className='collapse-container'
  expandIcon={customExpandIcon}
>
  <Panel header='Question...' key='3'>
    <p className='help-panel-text'>Some text</p>
  </Panel>
</Collapse>

• 方案2：全局配置统一生效（适合全项目Collapse共用一套样式）
  如果项目所有Collapse都要使用这套自定义图标和尺寸规则，直接用Antd的ConfigProvider做全局配置，后续业务代码里不需要再给每个Collapse传任何自定义属性：

// 项目根组件App.jsx内配置一次即可
import { ConfigProvider, Collapse } from 'antd'
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'

const App = () => {
  return (
    <ConfigProvider
      collapse={{
        // 全局配置自定义图标、尺寸
        expandIcon: ({ isActive }) => {
          const Icon = isActive ? CaretUpOutlined : CaretDownOutlined
          return <Icon style={{ fontSize: '18px' }} />
        },
        // 全局配置图标默认在右侧，不用每个组件再传
        defaultExpandIconPosition: 'right'
      }}
    >
      {/* 项目其余业务内容 */}
    </ConfigProvider>
  )
}

// 后续业务组件内直接用Collapse就行，不用传任何自定义配置
<Collapse>
  <Panel header='Question...' key='3'>
    <p className='help-panel-text'>Some text</p>
  </Panel>
</Collapse>

• 方案3：纯CSS修改默认图标尺寸（仅适合不需要替换图标、只改大小的场景）
  如果你不需要替换Antd默认的箭头图标，只需要增大尺寸，不需要写任何JS逻辑，直接覆盖CSS即可：

/* 可以加你自定义的collapse-container类名限制作用范围，避免全局污染 */
.collapse-container .ant-collapse-arrow svg {
  font-size: 18px !important;
}

如果你必须使用自定义的本地图片作为图标，也可以给img标签加统一类名控制尺寸，代码更简洁：

.collapse-icon {
  width: 18px;
  height: 18px;
}

const customExpandIcon = ({ isActive }) => (
  <img 
    src={isActive ? closeCollapseIcon : openCollapseIcon}
    className="collapse-icon"
    alt="折叠面板图标"
  />
)

内容的提问来源于stack exchange，提问作者qweezz