heskeybaozi / reduce-antd-icons-bundle-demo

How to reduce your umi project with ant-design icons.

Reduce Antd icons bundle size

See related issue.

Before	After

Config alias

See the whole file src/icons.js

// src/icons.js

// export what you need
export {
  default as SmileOutline
} from '@ant-design/icons/lib/outline/SmileOutline';
export {
  default as MehOutline
} from '@ant-design/icons/lib/outline/MehOutline';

// export what antd other components need
export {
  default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';
// and other icons...

// .umirc.js
export default {
  alias: {
    '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js')
  }
};

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
      }
    }
  }
};

reduce-antd-icons-bundle-demo's Issues

没用到umi的可以用吗

项目中没用到umi的可以用这个解决方案吗

icons的名字填错，错误抛不出来

rt

Tree

export {
default as CaretRightFill
} from '@ant-design/icons/lib/fill/CaretRightFill'
export {
default as CaretDownFill
} from '@ant-design/icons/lib/fill/CaretDownFill'

是否只有icons.js 这些图标，文件里面没有的怎么使用？

moment.js没有被干掉。。

Upload组件少了DownloadOutline

export {
default as DownloadOutlined
} from '@ant-design/icons/lib/outline/DownloadOutline';

icon 路径更新了，如何配置

如题，按之前的模式去配置出错了。应该是 icon 路径改了吧？
antd 版本3.23.3

 alias: {
    '@ant-design/icons/lib/dist$': resolve(__dirname, '../src/icons.ts'),
  },

// icons.ts

export { default as Dashboard } from '@ant-design/icons/lib/icons/Dashboard';
export { default as transaction } from '@ant-design/icons/lib/icons/Transaction';

confirm缺少QuestionCircleOutline

export {
default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline'

vue-cli Ant Design Vue 里怎麼配置？

如題，vue-cli Ant Design Vue打包太大，icon有400多K，有配置示例嗎？

.umirc.js 的那个示例有点误导性，不用umi的可以直接在webpack做如下配置即可

// webpack config
module.exports = {
 resolve: {
    ............
    alias: {
      '@ant-design/icons/lib/dist$': path.resolve(__dirname, '../../src/iconLib/index.js')
    }
  },
}

Pagination 组件默认需要 DoubleLeft, DoubleRight

...
export { default as DoubleLeftOutline } from '@ant-design/icons/lib/outline/DoubleLeftOutline'
export { default as DoubleRightOutline } from '@ant-design/icons/lib/outline/DoubleRightOutline'
...

配置alias之后，构建时报：module @ant-design/icons/lib/dist not found

你好，最想用的是你的解决方案，但是如题，构建报错怎么解决，能否指点一下，谢谢🙏