Icon updates

.eslintignore

@@ -1,3 +1,2 @@
 node_modules/
-.storybook/
 !.eslintrc.js

.storybook/main.js

@@ -1,8 +1,6 @@
 const webpack = require('webpack')
 const ESLintPlugin = require('eslint-webpack-plugin')
 
-const prettierConfig = require('../prettier.config.js');
-
 module.exports = {
   stories: ['../src/components/*.stories.@(js|mdx)'],
   addons: [
@@ -25,6 +23,33 @@ module.exports = {
       require.resolve('@emotion/babel-preset-css-prop')
     )
 
+    //
+    // SVGR
+    //
+
+    // Remove .svgs from default loader
+    const fileLoaderRule = config.module.rules.find(
+      (rule) => rule.test && rule.test.test('.svg')
+    )
+
+    fileLoaderRule.exclude = /\.svg$/
+
+    // Target svgs with fallback to file-loader
+    config.module.rules.push({
+      test: /\.svg$/,
+      enforce: 'pre',
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            ref: true,
+            icon: true,
+          },
+        },
+        'file-loader',
+      ],
+    })
+
     // Enable eslint
     config.plugins.push(
       new ESLintPlugin({

package.json

@@ -23,17 +23,14 @@
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.22.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "framer-motion": "3.3.0",
     "eslint-webpack-plugin": "2.5.2",
-    "fstream": "1.0.12",
     "lodash": "4.17.21",
-    "parse5": "6.0.1",
     "prettier": "2.2.1",
     "prismjs": "1.23.0",
     "react-textarea-autosize": "8.3.2",
     "react-use": "17.2.1",
     "recursive-readdir-sync": "1.0.6",
-    "rsvp": "4.8.5",
-    "svgo": "1.3.2",
     "what-input": "5.2.10",
     "zustand": "3.3.3"
   },
@@ -54,6 +51,7 @@
     "@storybook/addons": "6.1.21",
     "@storybook/react": "6.1.21",
     "@storybook/theming": "6.1.21",
+    "@svgr/webpack": "5.5.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.2",
     "formik": "2.2.6",
@@ -71,6 +69,7 @@
     "@emotion/react": "11.1.5",
     "@reach/portal": "0.13.2",
     "@reach/tabs": "0.13.2",
+    "@svgr/webpack": ">=5.5.0",
     "framer-motion": "3.10.2",
     "react": ">=17.0.1",
     "react-dom": ">=17.0.1"
@@ -79,9 +78,8 @@
   "scripts": {
     "version": "git pull --tags && git add -A",
     "postversion": "git push --tags && git push",
-    "icons": "node utils/build-icons.js",
-    "build": "yarn && yarn run icons && build-storybook -c .storybook",
-    "develop": "yarn && yarn run icons && start-storybook -p 9001 -c .storybook",
+    "build": "yarn && build-storybook -c .storybook",
+    "develop": "yarn && start-storybook -p 9001 -c .storybook",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint ./src ./utils",
     "lint:fix": "eslint ./src ./utils --fix"