Ant Design Vue自定义图标

Question

如果使用 vue cli 3，可以通过配置 vue-svg-loader 来将 svg 图标作为 Vue 组件导入

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule.use('vue-svg-loader').loader('vue-svg-loader');
  },
};

import { defineComponent } from 'vue';
import Icon from '@ant-design/icons-vue';
import MessageSvg from 'path/to/message.svg'; // '*.svg' 文件的路径

export default defineComponent({
  setup() {
    return () => <Icon type={MessageSvg} />;
  },
});

老师，文档写的方法看不太懂，下面这块代码是怎么用的呢

Answer 1

甲蛙 2021-04-19 13:45:58

上面一个是vue2的，下面一个是vue3的，vue3我们写了很多setup，最下面都是return，你在我们现有的return里面，再加一个() => <Icon type={MessageSvg} />;试试

• 提问者 Ark_One #1

  报错 Warning: [@ant-design/icons-vue] Should have `component` prop/slot or `children`.

• 提问者 Ark_One #2

  非常感谢！

Answer 2

提问者 Ark_One 2021-04-19 14:43:51

<template>
  <component :is="MessageSvg"></component>
</template>

<script>
import Icon from '@ant-design/icons-vue'
import MessageSvg from '@/assets/svg/it.svg'

export default {
  name: 'About',
  setup () {
    return () => <Icon type={MessageSvg} />
  }
}
</script>

代码如上，

报错信息：

Warning: [@ant-design/icons-vue] Should have `component` prop/slot or `children`.

• 甲蛙 #1

  SVG我也没用过，没遇到过你这个问题，MessageSvg是你自己的吗？存在吗？看这篇有没有用：https://blog.csdn.net/weixin_43827462/article/details/106399706