@ant-design/icons-vue not working in vue3 yet?

[yellow13441]

I built my vue project with vue/cli(version: @vue/cli 4.5.11) with vue3 default config, and installed both ant-design-vue@next and @ant-design/icons-vue with npm. When I try to use an icon such as UserOutlined or StarOutlined in my main.js with code below:

import { UserOutlined } from '@ant-design/icons-vue';
const app = createApp(App).use(StarOutlined).mount('#app')

The brower throws a warn as below with nothing rendering in the page.

log.js?1afd:24 [HMR] Waiting for update signal from WDS...
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn @ runtime-core.esm-bundler.js?5c40:38
StarOutlined.js?11ca:13 Uncaught TypeError: Cannot read property 'attrs' of undefined
    at StarOutlined (webpack-internal:///./node_modules/@ant-design/icons-vue/es/icons/StarOutlined.js:17)
    at Object.use (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3095)
    at eval (webpack-internal:///./src/main.js:65)
    at Module../src/main.js (app.js:1124)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1233)
    at __webpack_require__ (app.js:849)
    at checkDeferredModules (app.js:46)
    at app.js:925

No message from the console side BTW.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import { Button, message, Input, Form, Select, Space, Layout, Breadcrumb, Menu } from 'ant-design-vue';
// import { UserOutlined } from '@ant-design/icons-vue';
import { StarOutlined } from '@ant-design/icons-vue';
import 'ant-design-vue/dist/antd.css'

const app = createApp(App).use(router).use(Button).use(message).use(Input).use(Form).use(Select).use(Space).use(Layout)
app.use(Breadcrumb)
app.use(Menu)
app.use(StarOutlined)
app.mount('#app')

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^6.0.1",
    "ant-design-vue": "^2.0.1",
    "axios": "^0.21.1",
    "babel-plugin-import": "^1.13.3",
    "core-js": "^3.6.5",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[yellow13441]

I'm a noob of front-end framework and just want to figure out it's my issue only or @ant-design/icons-vue does not support vue3 yet.

[yellow13441]

It turns out icons work well if I import and use it in one single component instead of use it in main.js with 'app.use(UploadOutlined)'

code like below works: upload.vue

<template>
    <a-button>
        <upload-outlined></upload-outlined>
        Click to Upload
    </a-button>
</template>
<script>
import { UploadOutlined } from '@ant-design/icons-vue';
export default {
  components: {
    UploadOutlined,
  },
}
</script>

Forgive my ignorance :smile:

To answer my own question,

I'm a noob of front-end framework and just want to figure out it's my issue only or @ant-design/icons-vue does not support vue3 yet.

@ant-design/icons-vue works just fine in vue3