如何在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图标?

(完)


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

查看所有标签

猜你喜欢:

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

500 Lines or Less

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 加密

MD5 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具