react ant-design自定义图标

ant-design给我们提供的图标不够怎么办呢？答案是我们可以自定义图标。
自定义图标也挺简单的，现在图标推荐用svg格式，那么我们就需要制作svg图片。
下面让我们看看如果制作svg图片吧。
1.百度搜索svg在线编辑器
2.打开https://c.runoob.com/more/svgeditor/
3.在右侧调整好canvas宽高，使之和图片宽高相同
4.点击文件->导入图片
5.点击视图->源代码，就可以看到生成的源代码了
6.去掉无用代码，光留下svg和image标签即可
7.自定义svg组件

import { Icon } from 'antd';

const HeartSvg = () => (
  
);

自定义图标组件

const HeartIcon = props => (
  
);

调用

ReactDOM.render(
  

    
  
,
  mountNode
);

完整示例

import { Icon } from 'antd';

const HeartSvg = () => (
  
);

const PandaSvg = () => (
  
);

const HeartIcon = props => (
  
);

const PandaIcon = props => (
  
);

ReactDOM.render(
  

    
    
  
,
  mountNode
);

注意，添加image，xlink:href需要改为xlinkHref，例如

转载于:https://www.cnblogs.com/MyNodeJs/p/9699229.html