ant-design-vue browser import and use icons

[r0zbeh]

How its possible to use icon when Directly import ant design to browser with <script>tag and import css ,js file(ant design v 3.2.2) ?

when import lib by global script ,You should use antd. for use the features ! but how use icons ??? i open the .js file and icons is exist in the file !

[r0zbeh]

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css" rel="stylesheet">
<div id="app">
    <ArrowLeftOutlined />
</div>
<script>
    const { createApp, ref } = Vue
    createApp({
        components:{
        },

  
      setup() {
        return {
          
        }
      }
    }).use(antd).mount('#app')
  </script>

this code not work :
error:

vue.global.js:1516 [Vue warn]: Failed to resolve component: arrowleftoutlined
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App>

[daiwanxing]

Here is a workaround demo, please check it. @r0zbeh

<div id="app">
   <arrow-left-outlined />
</div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js"></script>
  <script type="importmap">
    {
      "imports": {
        "@ant-design/icons-vue": "https://cdn.jsdelivr.net/npm/@ant-design/[email protected]/+esm"
      }
    }
  </script>
  <script type="module">
    import { ArrowLeftOutlined } from "@ant-design/icons-vue";

    const { createApp, ref } = Vue;
    createApp({
      components: {
        ArrowLeftOutlined,
      },

      setup() {
        return {};
      },
    })
      .use(antd)
      .mount("#app");
  </script>

[r0zbeh]

thanks alot ! its work fine ! but i forgot to update ant_design_vue version to https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js why when update it the code dosent work?

[daiwanxing]

It's seems the deliver package with antd3 doesn't export global variable, maybe you can use esm version instead it.

  <script type="importmap">
    {
      "imports": {
        "ant-design-vue": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
        "@ant-design/icons-vue": "https://cdn.jsdelivr.net/npm/@ant-design/[email protected]/+esm"
      }
    }
  </script>

  <script type="module">
    import antd from "ant-design-vue";

    const { createApp } = Vue;
    createApp({})
      .use(antd)
      .mount("#app");
  </script>

[codelzb]

我有一个esm的问题， 可以帮我看看吗#6954