https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

How to reduce your umi project with ant-design icons.
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo
• Owner: HeskeyBaozi
• Created: 2018-09-10T19:44:21.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-08-10T07:12:22.000Z (over 5 years ago)
• Last Synced: 2024-08-03T09:08:40.904Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 774 KB
• Stars: 106
• Watchers: 5
• Forks: 33
• Open Issues: 9
• Metadata Files:
  • Readme: ReadMe.md

Awesome Lists containing this project

• awesome-github-star - reduce-antd-icons-bundle-demo - design icons. | HeskeyBaozi | 106 | (JavaScript)

README

        
# Reduce Antd icons bundle size

See [related issue](https://github.com/ant-design/ant-design/issues/12011#issuecomment-420038579).

| Before | After |

|:----:|:----:|

|![before](./docs/before.png) | ![after](./docs/after.png)|

|![before](./docs/before-cli.png) | ![after](./docs/after-cli.png)|

## Config `alias`

See the whole file [src/icons.js](./src/icons.js)

```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...

```

```js

// .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")

      }

    }

  }

};

```