ant design vue 折叠面板 自定义左侧图标

要自定义 ant design vue 折叠面板的左侧图标，可以使用 `collapse` 组件的 `expand-icon` 和 `collapse-icon` 属性。

首先，需要引入需要的图标库。例如，要使用 ant design 的图标库，可以在 `main.js` 文件中引入：

import { createFromIconfontCN } from '@ant-design/icons-vue';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1234567_abcd1234.js',
});

Vue.component('IconFont', IconFont);

然后，在折叠面板中使用 `IconFont` 组件，并设置 `expand-icon` 和 `collapse-icon` 属性：

<template>
  <a-collapse>
    <a-collapse-panel :header="header" :key="1">
      Content
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
export default {
  data() {
    return {
      header: {
        slot: 'header',
        expandIcon: <IconFont type="icon-arrow-down" />,
        collapseIcon: <IconFont type="icon-arrow-right" />,
      },
    };
  },
};
</script>

在上面的代码中，我们设置了左侧图标为 ant design 的箭头图标，分别为向下展开和向右折叠。

注意，如果您使用的是其他的图标库，可以根据需要进行调整。