Antd Icon组件使用自己定义图标
2019-11-01 本文已影响0人
kyo_f89f
根据Antd文档Icon组件使用自定义图标，先引入svg文件，然后传入component：
import { Icon } from 'antd';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
但是，在项目中，引入一个svg文件，会被转成base64格式的图片。
因为原先的引入svg文件用的是url-loader，因此会有一些问题。
要解决这个问题也比较简单。
一、原先的svg还是用url-loader
二、需要当字体图标用@svgr/webpack，并命名为 *.nobase64.svg
具体步骤：
- 安装@svgr/webpack
npm i -D @svgr/webpack
- 将配置webpack
{
test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
exclude:/\.nobase64.svg$/,
loader: 'url-loader?limit=10000'
}
- 新增webpack配置
{
test: /\.nobase64.svg$/,
use: [
{
loader: 'babel-loader',
},
{
loader: '@svgr/webpack',
options: {
babel: false,
icon: true,
},
},
]
}
