```vue
<template>
  <a-collapse>
    <a-collapse-panel key="1" header="点击展开自定义图标">
      <a-card>
        <a-card-grid v-for="icon in allIcons" :key="icon.name + icon.theme">
          <a-icon :type="icon.name" :theme="getTheme(icon.theme)" :style="{ fontSize: '32px' }" />
          {{ icon.name }}
          <div v-if="icon.theme === 'outline'">&lt;a-icon type="{{ icon.name }}" /&gt;</div>
          <div v-else
            >&lt;a-icon type="{{ icon.name }}" theme="{{ getTheme(icon.theme) }}" /&gt;</div
          >
        </a-card-grid>
      </a-card>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import { allIcons } from '@/common/components/sd-icon-library'
import { getTheme } from '@/common/components/sd-icon.vue'

export default {
  data() {
    return {
      allIcons: allIcons.sort((a, b) => {
        if (a.theme < b.theme) {
          return -1
        }
        if (a.theme > b.theme) {
          return 1
        }
        return 0
      }),
    }
  },
  methods: {
    getTheme,
  },
}
</script>
```