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.js
和 plugin.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
也就是说会让
无效,导致图裂
目前还没有兼容性的办法去解决,如果有读者有了兼容性的解决方法,欢迎告知!
(完)