Ant Design Vue自定义图标

来源：13-1 课程总结

Ark_One

2021-04-18

如果使用 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} />;
  },
});

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

写回答

2回答

甲蛙

2021-04-19

已采纳

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

Ark_One

非常感谢！

2021-04-22

共2条回复

Ark_One

提问者

2021-04-19

<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`.

甲蛙

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

2021-04-21

共1条回复

Spring Boot+Vue3前后端分离，实战wiki知识库系统

一课掌握前后端最火框架，更有职场竞争力

2524 学习 · 1671 问题

查看课程

相似问题