See related issue:Antd v3.9.0 adds antd-icons which increases bundle size a lot.
// create-react-app config-overrides.js
const { override, fixBabelImports } = require('customize-cra');
const path = require('path');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true
}),
function(config, env) {
const alias = config.resolve.alias || {};
alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons/index.js');
config.resolve.alias = alias;
return config;
}
)
See the whole file src/icons/index.js
// src/icons/index.js
/**
* List all antd icons you want to use in your source code
*/
export {
// star
default as StarFill
} from '@ant-design/icons/lib/fill/StarFill';
export {
// star
default as StarOutline
} from '@ant-design/icons/lib/outline/StarOutline';
// other icons...
note
: Cross-References(Quick Search)
Icon Component <=> Icon type
// src/icons/component_map_type.txt(copy from the node_moudes/antd/dist/antd.js)
// Theme is Filled
exports.AccountBookFill = getIcon('account-book', fill, getNode(newViewBox, ...));
exports.AlertFill = getIcon('alert', fill, getNode(newViewBox, ...));
exports.AliwangwangFill = getIcon('aliwangwang', fill, getNode(newViewBox, ...));
exports.AlipayCircleFill = getIcon('alipay-circle', fill, getNode(newViewBox, ...));
...
// Theme is Outlined
exports.AccountBookOutline = getIcon('account-book', outline, getNode(newViewBox, ...));
exports.AlertOutline = getIcon('alert', outline, getNode(newViewBox, ...));
exports.AliwangwangOutline = getIcon('aliwangwang', outline, getNode(newViewBox, ...));
exports.AlipayCircleOutline = getIcon('alipay-circle', outline, getNode(newViewBox, ...));
...
// Theme Two Tone
...
Before Optimization | After Optimization |
---|---|
// src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Icon } from 'antd';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>The following are ant icons:</p>
theme is outlined(default): <Icon type='star'/>
theme is filled: <Icon type="star" theme="filled" />
</header>
</div>
);
}
export default App;