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

你可能感兴趣的:(react ant-design自定义图标)