```vue
<template>
  <div>
    <div>
      input框
      <sd-icon-picker v-model="icon" />
      <sd-icon :type="icon[0].name" :theme="icon[0].theme" :style="{ fontSize: '30px' }" />
      {{ icon }}
    </div>
    <div>
      <a-button @click="selectIcon">编程方式调用</a-button>
      <sd-icon :type="icon2[0].name" :theme="icon2[0].theme" :style="{ fontSize: '30px' }" />
      {{ icon2 }}
    </div>
  </div>
</template>

<script>
import pickValues from '@/common/services/pick-values'
import sdIconPicker from '@/common/components/sd-icon-picker.vue'

export default {
  data() {
    return {
      icon: [{ id: 'sd-audio-circle/fill', name: 'sd-audio-circle', theme: 'fill' }],
      icon2: [{ id: 'sd-oa/outline', name: 'sd-oa', theme: 'outline' }],
    }
  },
  methods: {
    selectIcon() {
      pickValues(sdIconPicker, {
        value: this.icon2,
      }).then((icons) => (this.icon2 = icons))
    },
  },
}
</script>
```
