feat: Icon component using SVGR (#1609)

* Transfer Icon work to a branch cut from V2

* Export Icon component from index.ts

* Update package.json to effectively pin the version of babel/preset-env, use Storybook controls to eliminate need for 238 storybook examples for Icon

* Regenerate yarn.lock

* Add tests for Icon component

* Remove preset-env

* Update yarn.lock

* Fix serverside test

* Use SVGR to convert icons to inline React components

* Fix Icon component in Storybook

* Fix loading SVG from both JSX and CSS

* Use resource query to use SVG as react component

* Import all icons

* Add stories for icons

* Update example page

* Update docs, remove old fontawesome packages

* Rename svgr resource query

Co-authored-by: Arianna Kellogg <ari@truss.works>

.eslintrc

@@ -26,7 +26,8 @@
   "settings": {
     "react": {
       "version": "detect"
-    }
+    },
+    "import/resolver": "webpack"
   },
   "overrides": [
     {

.storybook/main.ts

@@ -36,6 +36,32 @@ const webpackConfig = (config) => {
     ],
   })
 
+  const fileLoaderRule = config.module.rules.find(
+    (rule) => rule.test && rule.test.test('.svg')
+  )
+  fileLoaderRule.exclude = /\.svg$/
+
+  config.module.rules.push({
+    test: /\.svg$/,
+    oneOf: [
+      {
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: /svgr/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              icon: true,
+            },
+          },
+        ],
+      },
+      {
+        type: 'asset',
+      },
+    ],
+  })
+
   return config
 }
 

__mocks__/svgrMock.js

@@ -0,0 +1 @@
+module.exports = 'svg'

custom.d.ts

@@ -3,6 +3,11 @@ declare module '*.png' {
   export default content
 }
 
+declare module '*.svg?svgr' {
+  const content: any
+  export default content
+}
+
 declare module '*.svg' {
   const content: any
   export default content

docs/styles_and_assets.md

@@ -76,33 +76,4 @@ $theme-hero-image: '~uswds/src/img/hero.png';
 
 ### Icons
 
-> **NOTE:** Newer USWDS versions have implemented [icons as a part of the USWDS](https://designsystem.digital.gov/components/icons/). These are on the `react-uswds` road map via [#992](https://github.com/trussworks/react-uswds/issues/992). This documentation will be updated once the `react-uswds` implementation is complete.
-
-USWDS previously recommended using [Font Awesome](https://fontawesome.com/), which [provides a package for use with React](https://github.com/FortAwesome/react-fontawesome).
-
-To add this to your project, install react-font-awesome and at least one style of icon:
-
-```
-yarn add @fortawesome/fontawesome-svg-core \
-         @fortawesome/free-solid-svg-icons \
-         @fortawesome/react-fontawesome
-```
-
-You can then add Font Awesome icons to your projects using the `FontAwesome` component:
-
-```jsx
-import ReactDOM from 'react-dom'
-import { Button } from '@trussworks/react-uswds'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSave } from '@fortawesome/free-solid-svg-icons'
-
-const button = (
-  <Button type="button">
-    <FontAwesomeIcon icon={faSave} /> Save Changes
-  </Button>
-)
-
-ReactDOM.render(button, document.body)
-```
-
-For more information on working with and configuring react-fontawesome, please see [that project's documentation](https://github.com/FortAwesome/react-fontawesome#installation). To find specific icons for your project, [search on the Font Awesome site](https://fontawesome.com/icons).
+USWDS now includes a defined [set of icons](<(https://designsystem.digital.gov/components/icons/)>). We have implemented these as React components using [React SVGR](https://react-svgr.com/), so that each icon can be rendered using inline SVG instead of loading a sprite file (which is what USWDS does).

example/package.json

@@ -3,10 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
-    "@trussworks/react-uswds": "file:./../",
+    "@trussworks/react-uswds": "file:./..",
     "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",