Reduce bundle size fortawesome (#1289)

.eslintrc

@@ -173,6 +173,22 @@
         "ts": "never",
         "tsx": "never"
       }
-   ]
+   ],
+    "no-restricted-imports": ["error", {
+      "patterns": [
+        {
+          "group": ["@fortawesome/free-brands-svg-icons/*", "@fortawesome/free-brands-svg-icons"],
+          "message": "Direct imports from @fortawesome/free-brands-svg-icons is not allowed. Import from src/ib/font_awesome/brands instead."
+        },
+        {
+          "group": ["@fortawesome/pro-regular-svg-icons/*", "@fortawesome/pro-regular-svg-icons"],
+          "message": "Direct imports from @fortawesome/pro-regular-svg-icons is not allowed. Import from src/lib/font_awesome/regular instead."
+        },
+        {
+          "group": ["@fortawesome/pro-solid-svg-icons/*", "@fortawesome/pro-solid-svg-icons"],
+          "message": "Direct imports from @fortawesome/pro-solid-svg-icons is not allowed. Import from src/lib/font_awesome/solid instead."
+        }
+      ]
+    }]
   }
 }

src/Accordion/Accordion.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { faCreditCard } from '@fortawesome/pro-regular-svg-icons';
+import { faCreditCard } from '../font_awesome/regular';
 import Card from '../Card';
 
 import {

src/Accordion/AccordionToggle.tsx

@@ -7,8 +7,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useAccordionButton } from 'react-bootstrap/AccordionButton';
 import AccordionContext from 'react-bootstrap/AccordionContext';
 
+import { faChevronUp } from '../font_awesome/solid';
+
 import './AccordionToggle.scss';
-import { faChevronUp } from '@fortawesome/pro-solid-svg-icons';
 
 import { isEventKeyActive } from './utils';
 

src/Alert/Alert.tsx

@@ -10,7 +10,7 @@ import {
   faExclamationTriangle,
   faInfo,
   faTimes,
-} from '@fortawesome/pro-solid-svg-icons';
+} from '../font_awesome/solid';
 
 import './Alert.scss';
 

src/Button/Button.mdx

@@ -37,8 +37,8 @@ import * as ComponentStories from './Button.stories';
 ### Iconography
 - Font Awesome library
   - We utilize the Regular and Solid Font Awesome icons
-  - Only use Solid icons on icon-only buttons. import `@fortawesome/pro-solid-svg-icons`
-  - Use Regular icons for all other buttons. import `@fortawesome/pro-regular-svg-icons`
+  - Only use Solid icons on icon-only buttons. import relatively from `src/font_awesome/solid`
+  - Use Regular icons for all other buttons. import relatively from `src/font_awesome/regular`
 - Use a leading icon alongside a label if there is a primary action verb (e.g. Edit, Share, Copy)
 - Icon-only buttons should only be permitted if
 	- Space is limited (e.g. too small for text alone)

src/Button/Button.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { faFileAlt, faCaretDown, faPaperPlane } from '@fortawesome/pro-regular-svg-icons';
+import { faFileAlt, faCaretDown, faPaperPlane } from '../font_awesome/regular';
 import {
  faGoogle, faFacebook, faLinkedin, faTwitter,
-} from '@fortawesome/free-brands-svg-icons';
+} from '../font_awesome/brands';
 import Button from '.';
 import mdx from './Button.mdx';
 

src/Button/Button.tsx

@@ -2,13 +2,13 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSpinnerThird } from '@fortawesome/pro-regular-svg-icons';
-
 import {
   Button as RBButton,
   type ButtonProps as RBButtonProps,
 } from 'react-bootstrap';
 
+import { faSpinnerThird } from '../font_awesome/regular';
+
 import './Button.scss';
 
 export enum ButtonSizes {

src/Container/Col.tsx

@@ -4,7 +4,7 @@ import {
   type ColProps as ReactBootstrapColProps,
 } from 'react-bootstrap';
 
-import { useDeprecationWarning } from 'src/utils';
+import { useDeprecationWarning } from '../utils';
 
 export type ColProps = {
   /**

src/Container/Container.tsx

@@ -4,7 +4,7 @@ import {
   type ContainerProps as ReactBootstrapContainerProps,
 } from 'react-bootstrap';
 
-import { useDeprecationWarning } from 'src/utils';
+import { useDeprecationWarning } from '../utils';
 
 export type ContainerProps = {
   /**

src/Container/Row.tsx

@@ -4,7 +4,7 @@ import {
   type RowProps as ReactBootstrapRowProps,
 } from 'react-bootstrap';
 
-import { useDeprecationWarning } from 'src/utils';
+import { useDeprecationWarning } from '../utils';
 
 export type RowProps = {
   /**

src/CopyToClipboardButton/CopyToClipboardButton.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
 import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCopy } from '@fortawesome/pro-regular-svg-icons';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+import { faCopy } from '../font_awesome/regular';
 
 import TrackedButton from '../TrackedButton';
 import Popper from '../Popper';

src/DateTimePicker/PickerEnforcedInput.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { isValid } from 'date-fns';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCalendarAlt } from '@fortawesome/pro-regular-svg-icons';
+import { faCalendarAlt } from '../font_awesome/regular';
 
 type PickerEnforcedInputProps = {
   disabled?: boolean;

src/Drawer/Drawer.stories.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faEnvelope, faChevronLeft, faChevronRight, faTrash,
-} from '@fortawesome/pro-solid-svg-icons';
+} from '../font_awesome/solid';
 import {
  Drawer, DrawerBody, DrawerFooter, DrawerHeader,
 } from '.';

src/Drawer/DrawerHeader.tsx

@@ -5,7 +5,7 @@ import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faTimes, faCompressAlt, faExpandAlt,
-} from '@fortawesome/pro-solid-svg-icons';
+} from '../font_awesome/solid';
 
 import './DrawerHeader.scss';
 

src/Dropdown/Dropdown.stories.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
  faEllipsisV, faFileAlt, faChevronDown, faTag, faEnvelope, faTrashAlt,
-} from '@fortawesome/pro-regular-svg-icons';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+} from '../font_awesome/regular';
 import {
  Dropdown, DropdownDivider, DropdownToggle, DropdownItem, DropdownMenu,
 } from '.';

src/EmptyState/EmptyState.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { faPlus } from '@fortawesome/pro-regular-svg-icons';
+import { faPlus } from '../font_awesome/regular';
 
 import Button from '../Button';
 

src/Flex/Flex.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, ElementType, createElement } from 'react';
 import classNames from 'classnames';
 
-import { useDeprecationWarning } from 'src/utils';
+import { useDeprecationWarning } from '../utils';
 
 import styles from './Flex.module.scss';
 

src/FormGroup/FormGroup.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { faSearch } from '@fortawesome/pro-solid-svg-icons';
 
 import { FlexContainer } from 'src/FlexContainer';
+import { faSearch } from '../font_awesome/solid';
 import FormGroup from '.';
 import Input from '../Input';
 import FormControlLabel from '../FormControlLabel';

src/IconButton/IconButton.tsx

@@ -12,7 +12,7 @@ import {
   faPencil,
   faTimes,
   faExpandAlt,
-} from '@fortawesome/pro-regular-svg-icons';
+} from '../font_awesome/regular';
 import Button, { type ButtonProps } from '../Button/Button';
 
 export const IconButtonActions = {

src/IconCell/IconCell.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
  faGlobe, faMailbox, faPaperPlane, faStar, faUser,
-} from '@fortawesome/pro-regular-svg-icons';
+} from '../font_awesome/regular';
 
 import IconCell from '.';
 import mdx from './IconCell.mdx';

src/IconCell/IconCell.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { useDeprecationWarning } from 'src/utils';
+import { useDeprecationWarning } from '../utils';
 
 import './IconCell.scss';
 

src/LoadingOverlay/LoadingOverlay.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSpinnerThird } from '@fortawesome/pro-solid-svg-icons';
+import { faSpinnerThird } from '../font_awesome/solid';
 
 import './LoadingOverlay.scss';
 

src/Modal/ModalHeader.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import './ModalHeader.scss';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExclamationTriangle } from '@fortawesome/pro-solid-svg-icons';
+import { faExclamationTriangle } from '../font_awesome/solid';
 
 type ModalHeaderProps = {
   children?: React.ReactNode;

src/Pill/Pill.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import {
  faClock, faGiftCard, faGlobe, faMicrophone, faUsers,
-} from '@fortawesome/pro-solid-svg-icons';
+} from '../font_awesome/solid';
 
 import { Pill, Pills, PILL_COLORS } from '.';
 import mdx from './Pill.mdx';

src/Pill/Pill.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
-import { type IconDefinition } from '@fortawesome/pro-solid-svg-icons';
+import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/pro-solid-svg-icons';
+import { faTimes } from '../font_awesome/solid';
 
 import './Pill.scss';
 

src/ProfileCell/ProfileCell.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { faShieldCheck } from '@fortawesome/pro-solid-svg-icons';
+import { faShieldCheck } from '../font_awesome/solid';
 import ProfileCell from '.';
 import ProfileCellSkeleton from './ProfileCellSkeleton';
 import mdx from './ProfileCell.mdx';

src/RichTextEditor/RichTextEditorMenuBar.tsx

@@ -12,7 +12,7 @@ import {
   faListOl,
   faListUl,
   faUnlink,
-} from '@fortawesome/pro-regular-svg-icons';
+} from '../font_awesome/regular';
 import IconButton from '../IconButton';
 
 import { RichTextEditorActions } from './richTextEditorActions';

src/Table/Table.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
-import { faFileAlt, faEllipsisV, faThumbtack } from '@fortawesome/pro-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { faFileAlt, faEllipsisV, faThumbtack } from '../font_awesome/solid';
 import Button from '../Button';
 import Card from '../Card';
 import CheckboxButton from '../CheckboxButton';

src/Table/TableSortLabel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSort } from '@fortawesome/pro-solid-svg-icons';
+import { faSort } from '../font_awesome/solid';
 
 import './TableSortLabel.scss';
 

src/Tooltip/Tooltip.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faQuestionCircle } from '@fortawesome/pro-solid-svg-icons';
+import { faQuestionCircle } from '../font_awesome/solid';
 
 import Popper from '../Popper';
 

src/Tooltip/Tooltip.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { faExclamationTriangle } from '@fortawesome/pro-solid-svg-icons';
+import { faExclamationTriangle } from '../font_awesome/solid';
 
 import Tooltip from '.';
 import mdx from './Tooltip.mdx';

src/font_awesome/brands.ts

@@ -0,0 +1,19 @@
+// Keep this eslint-disable here. FontAwesome imports should only be happening
+// in this file and nowhere else in the codebase.
+//
+// Any direct import from '@fortawesome/free-brands-svg-icons' will create bloat in
+// our overall bundle size.
+
+/* eslint-disable no-restricted-imports */
+
+import { faGoogle } from '@fortawesome/free-brands-svg-icons/faGoogle';
+import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
+
+export {
+  faGoogle,
+  faFacebook,
+  faLinkedin,
+  faTwitter,
+};