ant design vue createFromIconfontCN中的scriptUrl引入本地文件方案

背景说明：本项目使用vue 3，ant design vue v5，vite 构建。

本篇博客实现ant design vue中提供的createFromIconfontCN方法引入本地文件的方案。
官方文档如下：

import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});

export default defineComponent({
  setup() {
    return () => <MyIcon type="icon-dianzan" />;
  },
});

如果你想要直接了解解决方案，那么你可以将上文中的//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js替换成import('...')来实现，这样就可以导入本地的文件。下面是详细的解决方案

项目结构

src
|-- assets
|   |-- font_xxx.js
|-- common
|   |-- iconfont.js
|-- components
    |-- nav.vue

文件详情：

font_xxx.js

// 这个文件就是从iconfont.cn下载的文件，下载的文件大概是这样子的：at.alicdn.com/t/c/font_xxxxxxxx.js
// 具体内容省略

iconfont.js

import { createFromIconfontCN } from '@ant-design/icons-vue';

export const Iconfont = createFromIconfontCN({
  scriptUrl: import('@/assets/font_xxx'),  // 这里是上面那个 font_xxx.js 文件的引用
});

nav.vue 这个文件告诉你如何使用

<template>
  <iconfont type="icon-xxx" />
</template>

<script setup>
import {Iconfont} from "@/common/iconfont";  // 引用上面的 iconfont.js 文件
</script>