使用 create-react-app 脚手架创建项目后，Ant-Design 图标库默认不支持 import svg file，解决办法
/* config-overrides.js */
const { resolve } = require('path');
const {
override, addWebpackAlias, fixBabelImports, addWebpackModuleRule, addBundleVisualizer, addLessLoader,
} = require('customize-cra');
const { getThemeVariables } = require('antd/dist/theme');
const package = require('./package.json');
module.exports = {
webpack: override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {
...getThemeVariables({
dark: false, // 暗黑模式
}),
},
}),
addWebpackAlias({ // 路径别名
'@': resolve('src'),
}),
addWebpackModuleRule({ // 就是这一行！
test: /\.svg$/, // 也可以指定特定的路径
use: [
{
loader: '@svgr/webpack', // 注意版本，如果是 webpack4 ，请使用 @svgr/webpack: ^4.3.3
options: {
babel: false,
icon: true,
},
},
]
}),
addLessLoader({
javascriptEnabled: true,
}),
config => { // publicPathPlugin 用于设置 cdn 发布，微服务钩子等,
config.output = {
...config.output,
publicPath: process.env.PUBLIC_PATH || '/',
libraryTarget: 'umd',
library: `${package.name}-[name]`,
jsonpFunction: `webpackJsonp_${package.name}`,
};
return config;
},
process.env.ANALYZE && addBundleVisualizer(),
),
devServer: function (configFunction) {
return function (proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
config.headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
};
return config;
};
},
};
import DashboardSVG from '../assets/dashboard.svg';
<Icon component={() => <DashboardSVG />} translate={undefined} />
