内容简介:或者是这样:使用 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多色图标详解)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
500 Lines or Less
Amy Brown、Michael DiBernardo / 2016-6-28 / USD 35.00
This book provides you with the chance to study how 26 experienced programmers think when they are building something new. The programs you will read about in this book were all written from scratch t......一起来看看 《500 Lines or Less》 这本书的介绍吧!
MD5 加密
MD5 加密工具
HEX HSV 转换工具
HEX HSV 互换工具