Add SVG Support and Import Icons From Figma

packages/components/.storybook/main.js

@@ -1,35 +1,53 @@
+const path = require("path")
+
+const AssetsDir = path.join(__dirname, "..", "assets")
+
 module.exports = {
-  stories: ["../stories/**/*.stories.(js|jsx|ts|tsx|mdx)"],
-  addons: [
-    "@storybook/addon-actions",
-    "@storybook/addon-links",
-    "@storybook/addon-knobs",
-    "@storybook/addon-storysource",
-    "storybook-addon-jsx/register",
-    "@storybook/addon-docs",
-  ],
-  webpackFinal: async config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve("babel-loader"),
-          options: {
-            presets: [
-              "@babel/preset-env",
-              "@babel/preset-typescript",
-              "@babel/preset-react",
-              "@emotion/babel-preset-css-prop",
-            ],
-          },
-        },
-        // Optional
-        {
-          loader: require.resolve("react-docgen-typescript-loader"),
-        },
-      ],
-    });
-    config.resolve.extensions.push(".ts", ".tsx");
-    return config;
-  },
-};
+	stories: ["../stories/**/*.stories.(js|jsx|ts|tsx|mdx)"],
+	addons: [
+		"@storybook/addon-actions",
+		"@storybook/addon-links",
+		"@storybook/addon-knobs",
+		"@storybook/addon-storysource",
+		"storybook-addon-jsx/register",
+		"@storybook/addon-docs"
+	],
+	webpackFinal: async config => {
+		// Disable the Storybook internal-`.svg`-rule for components loaded from our app.
+		const svgRule = config.module.rules.find(rule => "test.svg".match(rule.test))
+		svgRule.exclude = [AssetsDir]
+		config.module.rules.push({
+			test: /\.svg$/i,
+			include: [AssetsDir],
+			use: [
+				{
+					loader: "@svgr/webpack",
+					options: {}
+				}
+			]
+		})
+
+		config.module.rules.push({
+			test: /\.(ts|tsx)$/,
+			use: [
+				{
+					loader: require.resolve("babel-loader"),
+					options: {
+						presets: [
+							"@babel/preset-env",
+							"@babel/preset-typescript",
+							"@babel/preset-react",
+							"@emotion/babel-preset-css-prop"
+						]
+					}
+				},
+				// Optional
+				{
+					loader: require.resolve("react-docgen-typescript-loader")
+				}
+			]
+		})
+		config.resolve.extensions.push(".ts", ".tsx")
+		return config
+	}
+}

packages/components/assets/bars-play.svg

@@ -0,0 +1 @@
+<svg width="20" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 4H0v2h17V4zm0-4H0v2h17V0zM0 10h13V8H0v2zm15-2v6l5-3-5-3z" fill="#7B8A95"/></svg>

packages/components/assets/bars-plus.svg

@@ -0,0 +1 @@
+<svg width="20" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4H0v2h12V4zm0-4H0v2h12V0zm4 8V4h-2v4h-4v2h4v4h2v-4h4V8h-4zM0 10h8V8H0v2z" fill="#7B8A95"/></svg>

packages/components/assets/bars.svg

@@ -0,0 +1 @@
+<svg width="18" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12h18v-2H0v2zm0-5h18V5H0v2zm0-7v2h18V0H0z" fill="#7B8A95"/></svg>

packages/components/assets/block-large.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L14.9 16.31A7.902 7.902 0 0110 18zm6.31-3.1L5.1 3.69A7.902 7.902 0 0110 2c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="#7B8A95"/></svg>

packages/components/assets/block.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/><path d="M4 4l8 8" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/check.svg

@@ -0,0 +1 @@
+<svg width="12" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L3.5 9l7-8" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron-down-big.svg

@@ -0,0 +1 @@
+<svg width="12" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l5 5 5-5" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron-left-big.svg

@@ -0,0 +1 @@
+<svg width="8" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 11.5l-5-5 5-5" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron-right-big.svg

@@ -0,0 +1 @@
+<svg width="8" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 11.5l5-5-5-5" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron-up-big.svg

@@ -0,0 +1 @@
+<svg width="12" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7l5-5 5 5" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron.svg

@@ -0,0 +1 @@
+<svg width="8" height="6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l3 3 3-3" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/dash.svg

@@ -0,0 +1 @@
+<svg width="12" height="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1h10" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/error.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 00-8 8 8 8 0 008 8 8 8 0 008-8 8 8 0 00-8-8z" fill="#FF3861"/><rect x="7" y="3" width="2" height="7" rx="1" fill="#fff"/><path d="M8 13c-.553 0-1-.447-1-1 0-.553.447-1 1-1a1 1 0 010 2z" fill="#fff"/></svg>

packages/components/assets/eyes.svg

@@ -0,0 +1 @@
+<svg width="22" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 2.5A9.77 9.77 0 0119.82 8 9.76 9.76 0 0111 13.5 9.76 9.76 0 012.18 8 9.77 9.77 0 0111 2.5zm0-2C6 .5 1.73 3.61 0 8c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C20.27 3.61 16 .5 11 .5zm0 5a2.5 2.5 0 010 5 2.5 2.5 0 010-5zm0-2C8.52 3.5 6.5 5.52 6.5 8s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5-2.02-4.5-4.5-4.5z" fill="#7B8A95"/></svg>

packages/components/assets/info.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 00-8 8 8 8 0 008 8 8 8 0 008-8 8 8 0 00-8-8z" fill="#7B8A95"/><rect x="7" y="6" width="2" height="7" rx="1" fill="#fff"/><path d="M8 5c-.553 0-1-.447-1-1 0-.553.447-1 1-1a1 1 0 010 2z" fill="#fff"/></svg>

packages/components/assets/pencil.svg

@@ -0,0 +1 @@
+<svg width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.778 11.449v2.773H3.55l7.893-7.893-2.773-2.773-7.893 7.893zm13.12-7.564a.735.735 0 000-1.05l-1.733-1.733a.735.735 0 00-1.05 0L9.668 2.56l2.773 2.773 1.458-1.448z" fill="#7B8A95"/></svg>

packages/components/assets/play.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.5l6-4.5-6-4.5v9zM10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="#7B8A95"/></svg>

packages/components/assets/plus.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 8H8v6H6V8H0V6h6V0h2v6h6v2z" fill="#7B8A95"/></svg>

packages/components/assets/success-check.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 00-8 8 8 8 0 008 8 8 8 0 008-8 8 8 0 00-8-8z" fill="#00DBB0"/><path d="M5 8.938L6.579 10.5 11 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/package.json

@@ -49,6 +49,8 @@
     "@storybook/addon-storysource": "^5.3.17",
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.17",
+    "@svgr/rollup": "^5.4.0",
+    "@svgr/webpack": "^5.4.0",
     "babel-jest": "^25.4.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-transform-export-extensions": "^6.22.0",

packages/components/rollup.config.js

@@ -1,44 +1,46 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "rollup-plugin-typescript2";
-import babel from "rollup-plugin-babel";
-import { DEFAULT_EXTENSIONS } from "@babel/core";
-import react from "react";
-import reactDom from "react-dom";
+import resolve from "@rollup/plugin-node-resolve"
+import commonjs from "@rollup/plugin-commonjs"
+import typescript from "rollup-plugin-typescript2"
+import babel from "rollup-plugin-babel"
+import svgr from "@svgr/rollup"
+import { DEFAULT_EXTENSIONS } from "@babel/core"
+import react from "react"
+import reactDom from "react-dom"
 
-import pkg from "./package.json";
+import pkg from "./package.json"
 
 export default {
-  input: "src/index.ts",
-  output: [
-    {
-      file: pkg.main,
-      format: "cjs",
-      file: pkg.main,
-    },
-    {
-      format: "esm",
-      file: pkg.module,
-    },
-  ],
-  plugins: [
-    resolve({
-      extensions: [".js", ".jsx", ".ts", ".tsx"],
-      preferBuiltins: true,
-    }),
-    commonjs({
-      exclude: "../../node_modules",
-      namedExports: {
-        react: Object.keys(react),
-        "react-dom": Object.keys(reactDom),
-      },
-    }),
-    typescript({
-      useTsconfigDeclarationDir: true,
-    }),
-    babel({
-      exclude: ["../../node_modules/**", "node_modules/**"],
-      extensions: [...DEFAULT_EXTENSIONS, ".ts", ".tsx"],
-    }),
-  ],
-};
+	input: "src/index.ts",
+	output: [
+		{
+			file: pkg.main,
+			format: "cjs",
+			file: pkg.main
+		},
+		{
+			format: "esm",
+			file: pkg.module
+		}
+	],
+	plugins: [
+		svgr(),
+		resolve({
+			extensions: [".js", ".jsx", ".ts", ".tsx"],
+			preferBuiltins: true
+		}),
+		commonjs({
+			exclude: "../../node_modules",
+			namedExports: {
+				react: Object.keys(react),
+				"react-dom": Object.keys(reactDom)
+			}
+		}),
+		typescript({
+			useTsconfigDeclarationDir: true
+		}),
+		babel({
+			exclude: ["../../node_modules/**", "node_modules/**"],
+			extensions: [...DEFAULT_EXTENSIONS, ".ts", ".tsx"]
+		})
+	]
+}

packages/components/src/components/Checkbox/Checkbox.style.tsx

@@ -1,92 +0,0 @@
-import { css } from "@emotion/core"
-import { colors } from "../../theme"
-
-type CheckboxState = "error" | "selected" | "unselected"
-
-export type CheckboxStyleProps = {
-	labelPosition?: "end" | "start" | "top" | "bottom"
-	caption?: string
-	state?: CheckboxState
-	pressed?: boolean
-	disabled?: boolean
-}
-
-let colorFromState = (state: CheckboxState, disabled: boolean) => {
-	switch (state) {
-		case "error": {
-			return {
-				border: colors.error.second,
-				shadow: "transparent",
-				fill: colors.error.second
-			}
-		}
-		case "selected": {
-			return {
-				shadow: disabled ? "transparent" : colors.blue[900],
-				border: disabled ? colors.gray[700] : colors.blue[500],
-				fill: disabled ? colors.gray[700] : colors.blue[500]
-			}
-		}
-		case "unselected": {
-			return {
-				border: disabled ? colors.gray[400] : colors.gray[300],
-				fill: "transparent",
-				shadow: disabled ? "transparent" : colors.gray[800]
-			}
-		}
-	}
-}
-
-export let makeStyles = ({ labelPosition, caption, state = "selected", pressed, disabled }: CheckboxStyleProps) => {
-	let { fill, border, shadow } = colorFromState(state, disabled)
-	return {
-		outerContainer: css`
-			border-radius: 999px;
-			color: ${disabled ? colors.gray[400] : colors.white};
-			max-width: 2rem;
-			max-height: 2rem;
-			width: 2rem;
-			height: 2rem;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-
-			&:focus-within {
-				background-color: ${shadow};
-			}
-			&:hover {
-				${disabled ? "" : `background-color: ${shadow}`}
-			}
-		`,
-		innerContainer: css`
-			position: relative;
-			border-color: ${border};
-			border-width: 1px;
-			border-style: solid;
-			background-color: ${pressed ? fill : "transparent"};
-			width: 1.065rem;
-			height: 1.065rem;
-			max-height: 1.065rem;
-			max-width: 1.065rem;
-			text-align: center;
-
-			& > input[type="checkbox"]:checked {
-				border-color: ${state === "unselected" ? colors.white : border};
-				background-color: ${fill};
-			}
-		`,
-		input: css`
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			opacity: 0;
-			width: 100%;
-			height: 100%;
-			padding: unset;
-			border: unset;
-			margin: unset;
-		`
-	}
-}

packages/components/src/components/Checkbox/Checkbox.tsx

@@ -1,41 +0,0 @@
-import React, { useState } from "react"
-import { makeStyles, CheckboxStyleProps } from "./Checkbox.style"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faCheck, faGripHorizontal } from "@fortawesome/free-solid-svg-icons"
-
-type CheckboxProps = {
-	label?: string
-	disabled?: boolean
-	icon?: "check" | "dash"
-	onChange?: (e: React.ChangeEvent) => void
-} & CheckboxStyleProps
-
-export default function Checkbox({
-	label = "",
-	disabled = false,
-	icon = "check",
-	onChange = () => {},
-	...styleProps
-}: CheckboxProps) {
-	const [pressed, setPressed] = useState(false)
-	const styles = makeStyles({ ...styleProps, pressed, disabled })
-	return (
-		<div css={styles.outerContainer}>
-			<div css={styles.innerContainer}>
-				<input
-					css={styles.input}
-					type="checkbox"
-					checked={pressed}
-					disabled={disabled}
-					onChange={e => {
-						onChange(e)
-						setPressed(!pressed)
-					}}
-				/>
-				{pressed && styleProps.state !== "unselected" && (
-					<FontAwesomeIcon icon={icon === "check" ? faCheck : faGripHorizontal} />
-				)}
-			</div>
-		</div>
-	)
-}

packages/components/src/components/Checkbox/index.ts

@@ -1,3 +0,0 @@
-//import { memo } from "react";
-import Checkbox from "./Checkbox"
-export default Checkbox

packages/components/src/index.ts

@@ -4,6 +4,5 @@ export { default as TagButton } from "./components/TagButton"
 export { default as Header } from "./components/Header"
 export { default as Tag } from "./components/Tag"
 export { default as TextField } from "./components/TextField"
-export { default as Checkbox } from "./components/Checkbox"
 export { default as Typography } from "./components/Typography"
 export { default as Grid } from "./components/Grid"

packages/components/src/theme/colors.ts

@@ -23,6 +23,6 @@ export default {
 		100: "#B4BBFF",
 		50: "#E0E1FF"
 	},
-	success: "#B00020",
-	error: { first: "#1CCB00", second: "#FF3861" }
+	success: "#00DBB0",
+	error: "#FF3861"
 }

packages/components/stories/07-Checkbox.stories.tsx

@@ -1,37 +0,0 @@
-import React from "react"
-import { Checkbox } from "../src"
-
-export default {
-	title: "Checkbox",
-	component: Checkbox
-}
-
-export const Unselected = () => (
-	<div style={{ background: "black", padding: "4rem", display: "flex", justifyContent: "space-around" }}>
-		<Checkbox state="unselected" />
-		<Checkbox state="unselected" icon="dash" />
-		<Checkbox state="unselected" />
-	</div>
-)
-export const Selected = () => (
-	<div style={{ background: "black", padding: "4rem", display: "flex", justifyContent: "space-around" }}>
-		<Checkbox state="selected" />
-		<Checkbox state="selected" icon="dash" />
-		<Checkbox state="selected" />
-	</div>
-)
-export const Error = () => (
-	<div style={{ background: "black", padding: "4rem", display: "flex", justifyContent: "space-around" }}>
-		<Checkbox state="error" />
-		<Checkbox state="error" />
-		<Checkbox state="error" />
-	</div>
-)
-
-export const Disabled = () => (
-	<div style={{ background: "black", padding: "4rem", display: "flex", justifyContent: "space-around" }}>
-		<Checkbox disabled state="error" />
-		<Checkbox disabled state="selected" pressed />
-		<Checkbox disabled state="unselected" />
-	</div>
-)

packages/components/tsconfig.json

@@ -1,14 +1,15 @@
 {
-  "extends": "../../tsconfig.json",
+	"extends": "../../tsconfig.json",
 
-  "compilerOptions": {
-    "module": "esnext",
-    "rootDirs": ["src", "stories"],
-    "baseUrl": "src",
-    "jsx": "preserve",
-    "declaration": true,
-    "declarationDir": "dist/types"
-  },
+	"compilerOptions": {
+		"module": "esnext",
+		"rootDirs": ["src", "stories"],
+		"baseUrl": "src",
+		"jsx": "preserve",
+		"declaration": true,
+		"declarationDir": "dist/types",
+		"typeRoots": ["./@types", "node_modules/@types"]
+	},
 
-  "exclude": ["node_modules", "dist", "stories"]
+	"exclude": ["node_modules", "dist", "stories"]
 }

yarn.lock

@@ -47,7 +47,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.5", "@babel/core@^7.7.5", "@babel/core@^7.8.7":
+"@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.5", "@babel/core@^7.7.5", "@babel/core@^7.8.7", "@babel/core@^7.9.0":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.6.tgz#d9aa1f580abf3b2286ef40b6904d390904c63376"
   integrity sha512-nD3deLvbsApbHAHttzIssYqgb883yU/d9roe4RZymBCDaZryMJDbptVpEpeQuRh4BJ+SYI8le9YGxKvFEvl1Wg==
@@ -743,7 +743,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.2.0", "@babel/plugin-transform-react-constant-elements@^7.6.3":
+"@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.2.0", "@babel/plugin-transform-react-constant-elements@^7.6.3", "@babel/plugin-transform-react-constant-elements@^7.7.4", "@babel/plugin-transform-react-constant-elements@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.9.0.tgz#a75abc936a3819edec42d3386d9f1c93f28d9d9e"
   integrity sha512-wXMXsToAUOxJuBBEHajqKLFWcCkOSLshTI2ChCFFj1zDd7od4IOxiwLCOObNUvOpkxLpjIuaIdBMmNt6ocCPAw==
@@ -869,7 +869,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.8.7":
+"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.8.7", "@babel/preset-env@^7.9.5":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.6.tgz#df063b276c6455ec6fcfc6e53aacc38da9b0aea6"
   integrity sha512-0gQJ9RTzO0heXOhzftog+a/WyOuqMrAIugVYxMYf83gh1CQaQDjMtsOpqOwXyDL/5JcWsrCm8l4ju8QC97O7EQ==
@@ -954,7 +954,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.8.3":
+"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.8.3", "@babel/preset-react@^7.9.4":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.4.tgz#c6c97693ac65b6b9c0b4f25b948a8f665463014d"
   integrity sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==
@@ -2756,41 +2756,81 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
   integrity sha512-j7KnilGyZzYr/jhcrSYS3FGWMZVaqyCG0vzMCwzvei0coIkczuYMcniK07nI0aHJINciujjH11T72ICW5eL5Ig==
 
+"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
+  integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
+
 "@svgr/babel-plugin-remove-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.2.0.tgz#297550b9a8c0c7337bea12bdfc8a80bb66f85abc"
   integrity sha512-3XHLtJ+HbRCH4n28S7y/yZoEQnRpl0tvTZQsHqvaeNXPra+6vE5tbRliH3ox1yZYPCxrlqaJT/Mg+75GpDKlvQ==
 
+"@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
+  integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
+
 "@svgr/babel-plugin-remove-jsx-empty-expression@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.2.0.tgz#c196302f3e68eab6a05e98af9ca8570bc13131c7"
   integrity sha512-yTr2iLdf6oEuUE9MsRdvt0NmdpMBAkgK8Bjhl6epb+eQWk6abBaX3d65UZ3E3FWaOwePyUgNyNCMVG61gGCQ7w==
 
+"@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
+  integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
+
 "@svgr/babel-plugin-replace-jsx-attribute-value@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz#310ec0775de808a6a2e4fd4268c245fd734c1165"
   integrity sha512-U9m870Kqm0ko8beHawRXLGLvSi/ZMrl89gJ5BNcT452fAjtF2p4uRzXkdzvGJJJYBgx7BmqlDjBN/eCp5AAX2w==
 
+"@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
+  integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
+
 "@svgr/babel-plugin-svg-dynamic-title@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.3.tgz#2cdedd747e5b1b29ed4c241e46256aac8110dd93"
   integrity sha512-w3Be6xUNdwgParsvxkkeZb545VhXEwjGMwExMVBIdPQJeyMQHqm9Msnb2a1teHBqUYL66qtwfhNkbj1iarCG7w==
 
+"@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
+  integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
+
 "@svgr/babel-plugin-svg-em-dimensions@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.2.0.tgz#9a94791c9a288108d20a9d2cc64cac820f141391"
   integrity sha512-C0Uy+BHolCHGOZ8Dnr1zXy/KgpBOkEUYY9kI/HseHVPeMbluaX3CijJr7D4C5uR8zrc1T64nnq/k63ydQuGt4w==
 
+"@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
+  integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
+
 "@svgr/babel-plugin-transform-react-native-svg@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.2.0.tgz#151487322843359a1ca86b21a3815fd21a88b717"
   integrity sha512-7YvynOpZDpCOUoIVlaaOUU87J4Z6RdD6spYN4eUb5tfPoKGSF9OG2NuhgYnq4jSkAxcpMaXWPf1cePkzmqTPNw==
 
+"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
+  integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
+
 "@svgr/babel-plugin-transform-svg-component@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz#5f1e2f886b2c85c67e76da42f0f6be1b1767b697"
   integrity sha512-hYfYuZhQPCBVotABsXKSCfel2slf/yvJY8heTVX1PCTaq/IgASq1IyxPPKJ0chWREEKewIU/JMSsIGBtK1KKxw==
 
+"@svgr/babel-plugin-transform-svg-component@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.4.0.tgz#a2212b4d018e6075a058bb7e220a66959ef7a03c"
+  integrity sha512-zLl4Fl3NvKxxjWNkqEcpdSOpQ3LGVH2BNFQ6vjaK6sFo2IrSznrhURIPI0HAphKiiIwNYjAfE0TNoQDSZv0U9A==
+
 "@svgr/babel-preset@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.3.3.tgz#a75d8c2f202ac0e5774e6bfc165d028b39a1316c"
@@ -2805,6 +2845,20 @@
     "@svgr/babel-plugin-transform-react-native-svg" "^4.2.0"
     "@svgr/babel-plugin-transform-svg-component" "^4.2.0"
 
+"@svgr/babel-preset@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.4.0.tgz#da21854643e1c4ad2279239baa7d5a8b128c1f15"
+  integrity sha512-Gyx7cCxua04DBtyILTYdQxeO/pwfTBev6+eXTbVbxe4HTGhOUW6yo7PSbG2p6eJMl44j6XSequ0ZDP7bl0nu9A==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^5.0.1"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
+    "@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
+    "@svgr/babel-plugin-transform-svg-component" "^5.4.0"
+
 "@svgr/core@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.3.3.tgz#b37b89d5b757dc66e8c74156d00c368338d24293"
@@ -2814,6 +2868,15 @@
     camelcase "^5.3.1"
     cosmiconfig "^5.2.1"
 
+"@svgr/core@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.4.0.tgz#655378ee43679eb94fee3d4e1976e38252dff8e7"
+  integrity sha512-hWGm1DCCvd4IEn7VgDUHYiC597lUYhFau2lwJBYpQWDirYLkX4OsXu9IslPgJ9UpP7wsw3n2Ffv9sW7SXJVfqQ==
+  dependencies:
+    "@svgr/plugin-jsx" "^5.4.0"
+    camelcase "^6.0.0"
+    cosmiconfig "^6.0.0"
+
 "@svgr/hast-util-to-babel-ast@^4.3.2":
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.2.tgz#1d5a082f7b929ef8f1f578950238f630e14532b8"
@@ -2821,6 +2884,13 @@
   dependencies:
     "@babel/types" "^7.4.4"
 
+"@svgr/hast-util-to-babel-ast@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.4.0.tgz#bb5d002e428f510aa5b53ec0a02377a95b367715"
+  integrity sha512-+U0TZZpPsP2V1WvVhqAOSTk+N+CjYHdZx+x9UBa1eeeZDXwH8pt0CrQf2+SvRl/h2CAPRFkm+Ey96+jKP8Bsgg==
+  dependencies:
+    "@babel/types" "^7.9.5"
+
 "@svgr/plugin-jsx@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz#e2ba913dbdfbe85252a34db101abc7ebd50992fa"
@@ -2831,6 +2901,16 @@
     "@svgr/hast-util-to-babel-ast" "^4.3.2"
     svg-parser "^2.0.0"
 
+"@svgr/plugin-jsx@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.4.0.tgz#ab47504c55615833c6db70fca2d7e489f509787c"
+  integrity sha512-SGzO4JZQ2HvGRKDzRga9YFSqOqaNrgLlQVaGvpZ2Iht2gwRp/tq+18Pvv9kS9ZqOMYgyix2LLxZMY1LOe9NPqw==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@svgr/babel-preset" "^5.4.0"
+    "@svgr/hast-util-to-babel-ast" "^5.4.0"
+    svg-parser "^2.0.2"
+
 "@svgr/plugin-svgo@^4.3.1":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz#daac0a3d872e3f55935c6588dd370336865e9e32"
@@ -2840,6 +2920,29 @@
     merge-deep "^3.0.2"
     svgo "^1.2.2"
 
+"@svgr/plugin-svgo@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.4.0.tgz#45d9800b7099a6f7b4d85ebac89ab9abe8592f64"
+  integrity sha512-3Cgv3aYi1l6SHyzArV9C36yo4kgwVdF3zPQUC6/aCDUeXAofDYwE5kk3e3oT5ZO2a0N3lB+lLGvipBG6lnG8EA==
+  dependencies:
+    cosmiconfig "^6.0.0"
+    merge-deep "^3.0.2"
+    svgo "^1.2.2"
+
+"@svgr/rollup@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/rollup/-/rollup-5.4.0.tgz#b1946c8d2c13870397af014a105d40945b7371e5"
+  integrity sha512-hwYjrTddW6mFU9vwqRr1TULNvxiIxGdIbqrD5J7vtoATSfWazq/2JSnT4BmiH+/4kFXLEtjKuSKoDUotkOIAkg==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@babel/plugin-transform-react-constant-elements" "^7.7.4"
+    "@babel/preset-env" "^7.9.5"
+    "@babel/preset-react" "^7.9.4"
+    "@svgr/core" "^5.4.0"
+    "@svgr/plugin-jsx" "^5.4.0"
+    "@svgr/plugin-svgo" "^5.4.0"
+    rollup-pluginutils "^2.8.2"
+
 "@svgr/webpack@^4.0.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.3.3.tgz#13cc2423bf3dff2d494f16b17eb7eacb86895017"
@@ -2854,6 +2957,20 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@svgr/webpack@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.4.0.tgz#b68bc86e29cf007292b96ced65f80971175632e0"
+  integrity sha512-LjepnS/BSAvelnOnnzr6Gg0GcpLmnZ9ThGFK5WJtm1xOqdBE/1IACZU7MMdVzjyUkfFqGz87eRE4hFaSLiUwYg==
+  dependencies:
+    "@babel/core" "^7.9.0"
+    "@babel/plugin-transform-react-constant-elements" "^7.9.0"
+    "@babel/preset-env" "^7.9.5"
+    "@babel/preset-react" "^7.9.4"
+    "@svgr/core" "^5.4.0"
+    "@svgr/plugin-jsx" "^5.4.0"
+    "@svgr/plugin-svgo" "^5.4.0"
+    loader-utils "^2.0.0"
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -4760,6 +4877,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelcase@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
+  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
+
 can-use-dom@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
@@ -11788,7 +11910,7 @@ rollup-plugin-typescript2@^0.26.0:
     rollup-pluginutils "2.8.2"
     tslib "1.10.0"
 
-rollup-pluginutils@2.8.2, rollup-pluginutils@^2.8.1:
+rollup-pluginutils@2.8.2, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
@@ -12685,7 +12807,7 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svg-parser@^2.0.0:
+svg-parser@^2.0.0, svg-parser@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==