vue3 + element-plus关于icon报Component that was made reactive的问题

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:  {name: 'ChatDotRound', __file: '/home/runner/work/element-plus-icons/element-plus-…ns/packages/vue/src/components/chat-dot-round.vue', render: ƒ} 
  at <ElIcon key=1 > 
  at <ElButton icon= {name: 'ChatDotRound', __file: '/home/runner/work/element-plus-icons/element-plus-…ns/packages/vue/src/components/chat-dot-round.vue', render: ƒ} onClick=fn > 
  at <ElInput placeholder="请输入内容" modelValue="" onUpdate:modelValue=fn  ... > 
  at <UserNav09 key=0 > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {goRoot: ƒ, login: ƒ, logOut: ƒ, getloginUsername: ƒ, clickADD: ƒ, …} > > 
  at <RouterView> 
  at <App>

使用elment-ui的icon出现了这个问题
只需要在用icon的页面加

import {ChatDotRound} from "@element-plus/icons-vue" // 你自己的Icon
import { shallowRef } from 'vue'

然后在data里面声明一下就好了

 data() {
        return {
            talkMesseage:[],
            Messeage:'',
            online:false,
            ChatDotRound:shallowRef(ChatDotRound), // < - - 这里！
        }
    }