如何在antdPro中使用自定义SVG图标？
如何在antdPro中使用自定义SVG图标？
进击的小进进
发布于 2022-03-28 14:55:43
发布于 2022-03-28 14:55:43
1、项目使用的是svg图片，一般这样调用：
import CustomIcon from './aa.svg';
render(){
return(<img src={CustomIcon}/>)
}
或者是这样：
使用 js 文件来存储 svg，并能直接在<Icon>组件中使用：
dd.js：
import React from 'react';
const cc = props => (
<svg width="1em" height="1em" viewBox="0 0 28 28" >
<g stroke="xxx" strokeWidth={2} fill="none" fillRule="evenodd">
<path d="xxx" strokeLinecap="xxx" />
</g>
</svg>
);
export default bb;
使用：
import bb from './dd'
render(){
return(<Icon component={bb} />)
}
但是！不能直接将svg作为Icon的component： ee.svg：
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" xxx>
<desc></desc>
<g xxx></g>
</svg>
ff.js:
import Ee from './ee.svg'
render(){
return(<Icon component={Ee} />)
}
这样程序报错
2、将自定义SVG直接作为Icon组件的注意点如下：
以上截图出自antd的Icon组件（https://ant.design/components/icon-cn/）
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(https://github.com/umijs/umi/issues/1078)
（3）安装svgr/webpack
npm install @svgr/webpack
参考：@svgr/webpack(https://www.npmjs.com/package/@svgr/webpack)
（4）直接在Icon中使用自定义SVG，并使用 component的属性
import Gggg from './gggg.svg'
<Icon
component={()=><Gggg fill="#00CC33" width="100" height='100'/>}
/>
这样就能使用了。
4、但是，这样会导致项目之前使用<img>标签来调用svg的方法失效！
import CustomIcon from './aa.svg';
render(){
return(<img src={CustomIcon}/>)
}
项目会报一个错误：
Invalid value for prop src on tag. Either remove it from the element
也就是说会让<img scr='xxx'>无效，导致图裂
目前还没有兼容性的办法去解决，如果有读者有了兼容性的解决方法，欢迎告知！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-04-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读