如何在antdPro中使用自定义SVG图标?

1、项目使用的是svg图片,一般这样调用:

import CustomIcon from './aa.svg';

render(){
  return()
}

或者是这样:
使用 js 文件来存储 svg,并能直接在组件中使用:

dd.js:

import React from 'react';
const cc = props => (
  
    
      
    
  
);

export default bb;

使用:

import bb from './dd'
render(){
  return()
}

但是!不能直接将svg作为Icon的component:
ee.svg:



    
    

ff.js:

import Ee from './ee.svg'
render(){
  return()
}

这样程序报错


2、将自定义SVG直接作为Icon组件的注意点如下:

以上截图出自antd的Icon组件


3、但是我使用的antdPro框架,配置文件是config.jsplugin.config.js,没有webpack.config.js文件,所以不知道怎么配置webpack,如何解决?

解决方案:
(1)在config.js中添加这行代码:

urlLoaderExcludes: [/.svg$/],

(2)在plugin.config.js中添加

    config.module
      .rule('svg')
      .test(/\.svg(\?v=\d+\.\d+\.\d+)?$/)
      .use([
        {
          loader: 'babel-loader',
        },
        {
          loader: '@svgr/webpack',
          options: {
            babel: false,
            icon: true,
          },
        },
      ])
      .loader(require.resolve('@svgr/webpack'));

参考:umirc 配置支持 ant-design Icon 自定义 svg 图标 #1078

(3)安装svgr/webpack

npm install @svgr/webpack

参考:@svgr/webpack

(4)直接在Icon中使用自定义SVG,并使用 component的属性

import Gggg from './gggg.svg'
}
/>

这样就能使用了。

4、但是,这样会导致项目之前使用标签来调用svg的方法失效!

import CustomIcon from './aa.svg';

render(){
  return()
}

项目会报一个错误:
Invalid value for prop src on tag. Either remove it from the element
也就是说会让无效,导致图裂

目前还没有兼容性的办法去解决,如果有读者有了兼容性的解决方法,欢迎告知!


(完)

你可能感兴趣的:(ant-design,antdesign)