[Beta] Better imports for icon components

[Rec0iL99]

resolves #4874

[github-actions[bot]]

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
global	84.67 KB (-2 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Hundred Ninety-two Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/	49.92 KB (🟡 +1.95 KB)	134.58 KB
/404	49.02 KB (🟡 +1.95 KB)	133.68 KB
/apis	49.8 KB (🟡 +1.94 KB)	134.47 KB
/apis/createcontext	51.55 KB (🟡 +1.95 KB)	136.22 KB
/apis/reactdom	49.74 KB (🟡 +1.95 KB)	134.41 KB
/apis/render	51.78 KB (🟡 +1.95 KB)	136.45 KB
/apis/usecontext	57.51 KB (🟡 +1.95 KB)	142.17 KB
/apis/usereducer	57.14 KB (🟡 +1.95 KB)	141.81 KB
/apis/useref	54.84 KB (🟡 +1.95 KB)	139.5 KB
/apis/usestate	60.78 KB (🟡 +1.95 KB)	145.45 KB
/blog	46.24 KB (🔴 +5.82 KB)	130.91 KB
/blog/2013/06/02/jsfiddle-integration	59.83 KB (🟡 +1.95 KB)	144.5 KB
/blog/2013/06/05/why-react	61.56 KB (🟡 +1.95 KB)	146.22 KB
/blog/2013/06/12/community-roundup	61.26 KB (🟡 +1.95 KB)	145.93 KB
/blog/2013/06/19/community-roundup-2	61.92 KB (🟡 +1.94 KB)	146.59 KB
/blog/2013/06/21/react-v0-3-3	59.97 KB (🟡 +1.94 KB)	144.64 KB
/blog/2013/06/27/community-roundup-3	62.29 KB (🟡 +1.95 KB)	146.96 KB
/blog/2013/07/02/react-v0-4-autobind-by-default	60.59 KB (🟡 +1.95 KB)	145.26 KB
/blog/2013/07/03/community-roundup-4	61.66 KB (🟡 +1.95 KB)	146.33 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values	60.47 KB (🟡 +1.95 KB)	145.13 KB
/blog/2013/07/17/react-v0-4-0	61.18 KB (🟡 +1.95 KB)	145.84 KB
/blog/2013/07/23/community-roundup-5	62.05 KB (🟡 +1.95 KB)	146.72 KB
/blog/2013/07/26/react-v0-4-1	59.94 KB (🟡 +1.95 KB)	144.61 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails	60.54 KB (🟡 +1.95 KB)	145.21 KB
/blog/2013/08/05/community-roundup-6	61.35 KB (🟡 +1.95 KB)	146.02 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications	60.56 KB (🟡 +1.95 KB)	145.22 KB
/blog/2013/08/26/community-roundup-7	61.52 KB (🟡 +1.95 KB)	146.18 KB
/blog/2013/09/24/community-roundup-8	62.95 KB (🟡 +1.94 KB)	147.61 KB
/blog/2013/10/03/community-roundup-9	61.88 KB (🟡 +1.95 KB)	146.55 KB
/blog/2013/10/16/react-v0.5.0	61.57 KB (🟡 +1.95 KB)	146.24 KB
/blog/2013/10/29/react-v0-5-1	59.93 KB (🟡 +1.95 KB)	144.6 KB
/blog/2013/11/06/community-roundup-10	63.55 KB (🟡 +1.95 KB)	148.21 KB
/blog/2013/11/18/community-roundup-11	62.63 KB (🟡 +1.95 KB)	147.29 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2	60.4 KB (🟡 +1.95 KB)	145.07 KB
/blog/2013/12/19/react-v0.8.0	60.82 KB (🟡 +1.95 KB)	145.49 KB
/blog/2013/12/23/community-roundup-12	62.28 KB (🟡 +1.95 KB)	146.95 KB
/blog/2013/12/30/community-roundup-13	62.06 KB (🟡 +1.95 KB)	146.73 KB
/blog/2014/01/02/react-chrome-developer-tools	60.32 KB (🟡 +1.95 KB)	144.99 KB
/blog/2014/01/06/community-roundup-14	61.66 KB (🟡 +1.95 KB)	146.32 KB
/blog/2014/02/05/community-roundup-15	62.88 KB (🟡 +1.95 KB)	147.54 KB
/blog/2014/02/15/community-roundup-16	62.58 KB (🟡 +1.95 KB)	147.25 KB
/blog/2014/02/16/react-v0.9-rc1	62.99 KB (🟡 +1.94 KB)	147.66 KB
/blog/2014/02/20/react-v0.9	63.44 KB (🟡 +1.95 KB)	148.1 KB
/blog/2014/02/24/community-roundup-17	62.3 KB (🟡 +1.95 KB)	146.97 KB
/blog/2014/03/14/community-roundup-18	63.27 KB (🟡 +1.95 KB)	147.93 KB
/blog/2014/03/19/react-v0.10-rc1	61.58 KB (🟡 +1.95 KB)	146.24 KB
/blog/2014/03/21/react-v0.10	61.6 KB (🟡 +1.95 KB)	146.26 KB
/blog/2014/03/28/the-road-to-1.0	61.71 KB (🟡 +1.95 KB)	146.38 KB
/blog/2014/04/04/reactnet	60.35 KB (🟡 +1.95 KB)	145.02 KB
/blog/2014/05/06/flux	60.48 KB (🟡 +1.95 KB)	145.15 KB
/blog/2014/05/29/one-year-of-open-source-react	60.7 KB (🟡 +1.95 KB)	145.37 KB
/blog/2014/06/27/community-roundup-19	62.25 KB (🟡 +1.95 KB)	146.91 KB
/blog/2014/07/13/react-v0.11-rc1	62.63 KB (🟡 +1.94 KB)	147.29 KB
/blog/2014/07/17/react-v0.11	63.89 KB (🟡 +1.95 KB)	148.55 KB
/blog/2014/07/25/react-v0.11.1	60.83 KB (🟡 +1.95 KB)	145.5 KB
/blog/2014/07/28/community-roundup-20	62.39 KB (🟡 +1.95 KB)	147.05 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher	62.02 KB (🟡 +1.95 KB)	146.69 KB
/blog/2014/08/03/community-roundup-21	62.06 KB (🟡 +1.95 KB)	146.72 KB
/blog/2014/09/03/introducing-the-jsx-specification	60.06 KB (🟡 +1.95 KB)	144.73 KB
/blog/2014/09/12/community-round-up-22	62.54 KB (🟡 +1.95 KB)	147.2 KB
/blog/2014/09/16/react-v0.11.2	60.83 KB (🟡 +1.95 KB)	145.5 KB
/blog/2014/09/24/testing-flux-applications	64.01 KB (🟡 +1.95 KB)	148.68 KB
/blog/2014/10/14/introducing-react-elements	62.97 KB (🟡 +1.95 KB)	147.63 KB
/blog/2014/10/16/react-v0.12-rc1	62.93 KB (🟡 +1.95 KB)	147.6 KB
/blog/2014/10/17/community-roundup-23	63.5 KB (🟡 +1.95 KB)	148.17 KB
/blog/2014/10/27/react-js-conf	60.11 KB (🟡 +1.95 KB)	144.77 KB
/blog/2014/10/28/react-v0.12	62.88 KB (🟡 +1.95 KB)	147.54 KB
/blog/2014/11/24/react-js-conf-updates	60.49 KB (🟡 +1.95 KB)	145.16 KB
/blog/2014/11/25/community-roundup-24	63.73 KB (🟡 +1.95 KB)	148.4 KB
/blog/2014/12/18/react-v0.12.2	60.52 KB (🟡 +1.95 KB)	145.19 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship	60.92 KB (🟡 +1.95 KB)	145.58 KB
/blog/2015/01/27/react-v0.13.0-beta-1	61.88 KB (🟡 +1.95 KB)	146.55 KB
/blog/2015/02/18/react-conf-roundup-2015	63.87 KB (🟡 +1.95 KB)	148.53 KB
/blog/2015/02/20/introducing-relay-and-graphql	63.02 KB (🟡 +1.95 KB)	147.69 KB
/blog/2015/02/24/react-v0.13-rc1	61.92 KB (🟡 +1.95 KB)	146.59 KB
/blog/2015/02/24/streamlining-react-elements	64.47 KB (🟡 +1.95 KB)	149.14 KB
/blog/2015/03/03/react-v0.13-rc2	61.26 KB (🟡 +1.95 KB)	145.92 KB
/blog/2015/03/04/community-roundup-25	62.22 KB (🟡 +1.95 KB)	146.88 KB
/blog/2015/03/10/react-v0.13	62.54 KB (🟡 +1.95 KB)	147.2 KB
/blog/2015/03/16/react-v0.13.1	60.36 KB (🟡 +1.95 KB)	145.02 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay	63.11 KB (🟡 +1.95 KB)	147.78 KB
/blog/2015/03/26/introducing-react-native	60.25 KB (🟡 +1.95 KB)	144.92 KB
/blog/2015/03/30/community-roundup-26	62.18 KB (🟡 +1.95 KB)	146.85 KB
/blog/2015/04/17/react-native-v0.4	61.1 KB (🟡 +1.95 KB)	145.76 KB
/blog/2015/04/18/react-v0.13.2	60.43 KB (🟡 +1.94 KB)	145.1 KB
/blog/2015/05/01/graphql-introduction	64.93 KB (🟡 +1.95 KB)	149.59 KB
/blog/2015/05/08/react-v0.13.3	60.32 KB (🟡 +1.95 KB)	144.99 KB
/blog/2015/05/22/react-native-release-process	60.48 KB (🟡 +1.95 KB)	145.14 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools	60.93 KB (🟡 +1.95 KB)	145.59 KB
/blog/2015/07/03/react-v0.14-beta-1	62.43 KB (🟡 +1.95 KB)	147.1 KB
/blog/2015/08/03/new-react-devtools-beta	61.04 KB (🟡 +1.95 KB)	145.7 KB
/blog/2015/08/11/relay-technical-preview	61.1 KB (🟡 +1.95 KB)	145.77 KB
/blog/2015/08/13/reacteurope-roundup	62.69 KB (🟡 +1.95 KB)	147.36 KB
/blog/2015/09/02/new-react-developer-tools	60.45 KB (🟡 +1.95 KB)	145.12 KB
/blog/2015/09/10/react-v0.14-rc1	66.14 KB (🟡 +1.95 KB)	150.81 KB
/blog/2015/09/14/community-roundup-27	62.61 KB (🟡 +1.95 KB)	147.28 KB
/blog/2015/10/01/react-render-and-top-level-api	61.59 KB (🟡 +1.95 KB)	146.25 KB
/blog/2015/10/07/react-v0.14	66.62 KB (🟡 +1.95 KB)	151.29 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord	62.34 KB (🟡 +1.95 KB)	147 KB
/blog/2015/10/28/react-v0.14.1	60.35 KB (🟡 +1.95 KB)	145.01 KB
/blog/2015/11/02/react-v0.14.2	60.38 KB (🟡 +1.95 KB)	145.04 KB
/blog/2015/11/18/react-v0.14.3	60.5 KB (🟡 +1.95 KB)	145.17 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship	61.37 KB (🟡 +1.95 KB)	146.04 KB
/blog/2015/12/16/ismounted-antipattern	60.97 KB (🟡 +1.95 KB)	145.64 KB
/blog/2015/12/18/react-components-elements-and-instances	64.89 KB (🟡 +1.95 KB)	149.56 KB
/blog/2015/12/29/react-v0.14.4	60.17 KB (🟡 +1.95 KB)	144.83 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A	61.19 KB (🟡 +1.95 KB)	145.85 KB
/blog/2016/01/12/discontinuing-ie8-support	60 KB (🟡 +1.95 KB)	144.66 KB
/blog/2016/02/19/new-versioning-scheme	61.38 KB (🟡 +1.95 KB)	146.04 KB
/blog/2016/03/07/react-v15-rc1	64.13 KB (🟡 +1.95 KB)	148.79 KB
/blog/2016/03/16/react-v15-rc2	60.99 KB (🟡 +1.95 KB)	145.66 KB
/blog/2016/03/29/react-v0.14.8	60.13 KB (🟡 +1.95 KB)	144.79 KB
/blog/2016/04/07/react-v15	68.32 KB (🟡 +1.95 KB)	152.98 KB
/blog/2016/04/08/react-v15.0.1	60.88 KB (🟡 +1.95 KB)	145.55 KB
/blog/2016/07/11/introducing-reacts-error-code-system	60.59 KB (🟡 +1.95 KB)	145.26 KB
/blog/2016/07/13/mixins-considered-harmful	68.75 KB (🟡 +1.95 KB)	153.41 KB
/blog/2016/07/22/create-apps-with-no-configuration	64.07 KB (🟡 +1.95 KB)	148.74 KB
/blog/2016/08/05/relay-state-of-the-state	64.11 KB (🟡 +1.95 KB)	148.78 KB
/blog/2016/09/28/our-first-50000-stars	65.56 KB (🟡 +1.95 KB)	150.23 KB
/blog/2016/11/16/react-v15.4.0	63.51 KB (🟡 +1.95 KB)	148.18 KB
/blog/2017/04/07/react-v15.5.0	64.08 KB (🟡 +1.95 KB)	148.75 KB
/blog/2017/05/18/whats-new-in-create-react-app	63.48 KB (🟡 +1.95 KB)	148.14 KB
/blog/2017/06/13/react-v15.6.0	62.1 KB (🟡 +1.95 KB)	146.76 KB
/blog/2017/07/26/error-handling-in-react-16	62.45 KB (🟡 +1.95 KB)	147.11 KB
/blog/2017/09/08/dom-attributes-in-react-16	62.88 KB (🟡 +1.95 KB)	147.54 KB
/blog/2017/09/25/react-v15.6.2	61.21 KB (🟡 +1.95 KB)	145.88 KB
/blog/2017/09/26/react-v16.0	66.34 KB (🟡 +1.95 KB)	151.01 KB
/blog/2017/11/28/react-v16.2.0-fragment-support	64.27 KB (🟡 +1.95 KB)	148.94 KB
/blog/2017/12/07/introducing-the-react-rfc-process	60.8 KB (🟡 +1.95 KB)	145.46 KB
/blog/2017/12/15/improving-the-repository-infrastructure	76.58 KB (🟡 +1.95 KB)	161.25 KB
/blog/2018/03/01/sneak-peek-beyond-react-16	60.75 KB (🟡 +1.95 KB)	145.42 KB
/blog/2018/03/27/update-on-async-rendering	65.99 KB (🟡 +1.95 KB)	150.66 KB
/blog/2018/03/29/react-v-16-3	62.81 KB (🟡 +1.95 KB)	147.48 KB
/blog/2018/05/23/react-v-16-4	62.95 KB (🟡 +1.95 KB)	147.62 KB
/blog/2018/06/07/you-probably-dont-need-derived-state	66.61 KB (🟡 +1.95 KB)	151.28 KB
/blog/2018/08/01/react-v-16-4-2	61.6 KB (🟡 +1.95 KB)	146.27 KB
/blog/2018/09/10/introducing-the-react-profiler	63.21 KB (🟡 +1.95 KB)	147.88 KB
/blog/2018/10/01/create-react-app-v2	63.69 KB (🟡 +1.95 KB)	148.36 KB
/blog/2018/10/23/react-v-16-6	62.89 KB (🟡 +1.95 KB)	147.55 KB
/blog/2018/11/13/react-conf-recap	60.6 KB (🟡 +1.95 KB)	145.27 KB
/blog/2018/11/27/react-16-roadmap	66.79 KB (🟡 +1.95 KB)	151.46 KB
/blog/2018/12/19/react-v-16-7	61.72 KB (🟡 +1.95 KB)	146.39 KB
/blog/2019/02/06/react-v16.8.0	63.99 KB (🟡 +1.95 KB)	148.66 KB
/blog/2019/02/23/is-react-translated-yet	63.55 KB (🟡 +1.95 KB)	148.22 KB
/blog/2019/08/08/react-v16.9.0	66.48 KB (🟡 +1.95 KB)	151.15 KB
/blog/2019/08/15/new-react-devtools	61.09 KB (🟡 +1.95 KB)	145.76 KB
/blog/2019/10/22/react-release-channels	62.91 KB (🟡 +1.95 KB)	147.58 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense	67.61 KB (🟡 +1.95 KB)	152.28 KB
/blog/2020/02/26/react-v16.13.0	63.83 KB (🟡 +1.95 KB)	148.5 KB
/blog/2020/08/10/react-v17-rc	70.11 KB (🟡 +1.95 KB)	154.78 KB
/blog/all	62.27 KB (🟡 +5.82 KB)	146.93 KB
/community	49.61 KB (🟡 +1.94 KB)	134.28 KB
/community/acknowledgements	50.8 KB (🟡 +1.95 KB)	135.46 KB
/community/meet-the-team	51.49 KB (🟡 +1.94 KB)	136.16 KB
/learn	54.57 KB (🟡 +1.95 KB)	139.24 KB
/learn/add-react-to-a-website	54.69 KB (🟡 +1.95 KB)	139.35 KB
/learn/adding-interactivity	56.26 KB (🟡 +1.95 KB)	140.92 KB
/learn/choosing-the-state-structure	61.98 KB (🟡 +1.95 KB)	146.64 KB
/learn/conditional-rendering	54.21 KB (🟡 +1.95 KB)	138.88 KB
/learn/describing-the-ui	53.42 KB (🟡 +1.95 KB)	138.09 KB
/learn/editor-setup	50.89 KB (🟡 +1.95 KB)	135.55 KB
/learn/escape-hatches	48.94 KB (🟡 +1.94 KB)	133.6 KB
/learn/extracting-state-logic-into-a-reducer	59.62 KB (🟡 +1.95 KB)	144.28 KB
/learn/importing-and-exporting-components	52.61 KB (🟡 +1.95 KB)	137.27 KB
/learn/installation	50.22 KB (🟡 +1.95 KB)	134.88 KB
/learn/javascript-in-jsx-with-curly-braces	52.68 KB (🟡 +1.95 KB)	137.35 KB
/learn/keeping-components-pure	56.81 KB (🟡 +1.95 KB)	141.48 KB
/learn/lifecycle-of-reactive-effects	64.01 KB (🟡 +1.95 KB)	148.67 KB
/learn/managing-state	55.53 KB (🟡 +1.95 KB)	140.2 KB
/learn/manipulating-the-dom-with-refs	57.78 KB (🟡 +1.95 KB)	142.45 KB
/learn/passing-data-deeply-with-context	57.33 KB (🟡 +1.95 KB)	141.99 KB
/learn/passing-props-to-a-component	56.38 KB (🟡 +1.95 KB)	141.05 KB
/learn/preserving-and-resetting-state	60.35 KB (🟡 +1.95 KB)	145.02 KB
/learn/queueing-a-series-of-state-updates	54.18 KB (🟡 +1.95 KB)	138.85 KB
/learn/react-developer-tools	50.17 KB (🟡 +1.95 KB)	134.84 KB
/learn/reacting-to-input-with-state	58.79 KB (🟡 +1.95 KB)	143.46 KB
/learn/referencing-values-with-refs	55.7 KB (🟡 +1.95 KB)	140.36 KB
/learn/render-and-commit	52.68 KB (🟡 +1.95 KB)	137.34 KB
/learn/rendering-lists	56.77 KB (🟡 +1.95 KB)	141.43 KB
/learn/responding-to-events	55.7 KB (🟡 +1.95 KB)	140.37 KB
/learn/scaling-up-with-reducer-and-context	53.75 KB (🟡 +1.95 KB)	138.42 KB
/learn/sharing-state-between-components	54.83 KB (🟡 +1.95 KB)	139.49 KB
/learn/start-a-new-react-project	51.25 KB (🟡 +1.95 KB)	135.91 KB
/learn/state-a-components-memory	59.91 KB (🟡 +1.95 KB)	144.57 KB
/learn/state-as-a-snapshot	53.48 KB (🟡 +1.95 KB)	138.15 KB
/learn/synchronizing-with-effects	66.58 KB (🟡 +1.95 KB)	151.25 KB
/learn/thinking-in-react	55.54 KB (🟡 +1.95 KB)	140.21 KB
/learn/updating-arrays-in-state	57.78 KB (🟡 +1.95 KB)	142.44 KB
/learn/updating-objects-in-state	57.51 KB (🟡 +1.94 KB)	142.17 KB
/learn/writing-markup-with-jsx	52.92 KB (🟡 +1.94 KB)	137.59 KB
/learn/you-might-not-need-an-effect	66 KB (🟡 +1.95 KB)	150.66 KB
/learn/your-first-component	53.52 KB (🟡 +1.95 KB)	138.18 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.