Arco.design的icon-picker组件怎么替换自己的icon

Question

用的是Arco.design的vue版本
用官方的组件实现的修改侧边栏菜单
想问下怎么能在这里面用自己的icon不用官方的

<icon-picker v-model:icon="state.form.icon">
                <template #iconSelect>
                  <a-input v-model="state.form.icon">
                    <template #prefix>
                      <functional-icons
                        :icon="state.form.icon"
                      ></functional-icons>
                    </template>
                  </a-input>
                </template>
              </icon-picker>

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

Arco Design 的 icon-picker 组件提供了一个 icon 属性，可以用来设置自定义的图标。可以通过将 icon 属性设置为一个字符串，字符串中包含要使用的图标的名称。

例如：

<icon-picker v-model:icon="state.for" :icon="customIcon" />

其中，customIcon 是一个字符串，例如 'my-icon'，可以是你自定义的图标名称。

如果你想使用 SVG 图标，可以将 icon 属性设置为一个 SVG 字符串。

<icon-picker v-model:icon="state.for" :icon="svgIcon" />

其中，svgIcon 是一个 SVG 字符串，例如 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2Z"></path></svg>，可以是你自定义的 SVG 图标。

在上面的示例中，我们使用了 :icon 语法来将 customIcon 或 svgIcon 属性绑定到 icon-picker 组件的 icon 属性上。