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

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介:或者是这样:使用 js 文件来存储 svg,并能直接在

如何在antdPro中使用自定义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组件的注意点如下:

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

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

以上截图出自 antd的Icon组件

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

解决方案:

(1)在 config.js 中添加这行代码:

urlLoaderExcludes: [/.svg$/],

如何在antdPro中使用自定义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'));

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

参考: 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'> 无效,导致图裂

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

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

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

(完)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

推荐系统

推荐系统

[奥地利] Dietmar Jannach、Markus Zanker、Alexander Felfernig、Gerhard Friedrich / 蒋 凡 / 人民邮电出版社 / 2013-6-25 / 59.00元

编辑推荐: 通过对本书的学习,读者不仅可以全面系统地了解该领域的基础原理,还能试验如何搭建一套真正的推荐系统。 —— 百度主任架构师、百度技术委员会主席 廖若雪 本书比较全面地介绍了推荐系统涉及的相关知识点,很适合对于推荐系统感兴趣的相关人员作为入门教程,目前能够系统全面介绍相关技术的中文书籍还显得匮乏,相信这本译著对于缓解这种情况大有裨益。 ——新浪微博数据挖掘技术专家 ......一起来看看 《推荐系统》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具