如何快速在vue3使用antdv创建自定义图标

如果是在vue3，那么非常简单，不需要什么icon-font啥的，只需要有svg代码就可以

不需要下载 loader 什么的，附上package.json图：

1.新建一个自定义图标组件

<script setup>

</script>

<template>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.84002685546875"
       height="21.8399658203125" viewBox="0 0 21.84002685546875 21.8399658203125" fill="none">
    <path
        d="M10.92 0C4.8878 0 0 4.88778 0 10.92C0 16.9544 4.8878 21.8399 10.92 21.8399C16.9544 21.8399 21.84 16.9544 21.84 10.92C21.84 4.88778 16.9544 0 10.92 0Z"
        fill="#F50000">
    </path>
    <path
        d="M18.1701 12.156C18.492 11.9669 18.6947 11.6233 18.6947 11.2461L18.6947 7.05267C18.6947 6.47906 18.226 6.01 17.6441 6.00273L13.4443 6.00273C13.0534 5.97455 12.6743 6.1709 12.4715 6.50634C12.2687 6.84268 12.2687 7.26266 12.4715 7.599C12.6743 7.93444 13.0534 8.13079 13.4443 8.10261L15.0975 8.10261L11.919 11.2733L10.3922 8.98438C10.2173 8.71894 9.93815 8.55077 9.62221 8.52259C9.31509 8.49441 9.0065 8.60622 8.78314 8.83076L4.31006 13.2969C3.89714 13.7096 3.89714 14.3677 4.31006 14.7804C4.71563 15.194 5.38131 15.194 5.79423 14.7804L9.35624 11.2179L10.883 13.5132C11.0579 13.7723 11.3444 13.9405 11.653 13.9687C11.9675 14.0041 12.2761 13.8914 12.4921 13.6678L16.5949 9.57253L16.5949 11.2461C16.5949 11.6233 16.7977 11.9669 17.1195 12.156C17.4413 12.3451 17.8483 12.3451 18.1701 12.156Z"
        fill="#FFFFFF">
    </path>
  </svg>

</template>

<style scoped>

</style>

2.再在需要的页面使用就可以，如下：

<script setup>
//必须先引入antdv的Icon组件
import Icon from '@ant-design/icons-vue';

//引入刚创建的自定义组件
import CustomIcon from "./CustomIcon.vue"

</script>

<template>
<icon :component="CustomIcon"></icon>

</template>

<style scoped>

</style>

然后就可以看到效果了