内容简介:或者是这样:使用 js 文件来存储 svg,并能直接在
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组件
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' <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 <img> tag. Either remove it from the element
也就是说会让 <img scr='xxx'>
无效,导致图裂
目前还没有兼容性的办法去解决,如果有读者有了兼容性的解决方法,欢迎告知!
(完)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Echarts3.0 地图自定义图标
- e-icon-picker v1.0.11 已发布,支持 cdn 和自定义 svg 图标
- c# – 如何将两个图标合并在一起? (在另一个图标上叠加一个图标)
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- 9012年了你还在用单色图标?(iconfont多色图标详解)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。