Feat/icon

.storybook/main.js

@@ -27,6 +27,27 @@ module.exports = {
       '@emotion/babel-plugin',
     ]
 
+    // ref: https://stackoverflow.com/a/61706308/11681543
+    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
+    fileLoaderRule.exclude = /\.svg$/;  
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      enforce: "pre",
+      use: [{
+        // because storybook support webpack 5, we can't use latest version of @svgr/webpack. so using @svgr/webpack@5.5.0 
+        loader: "@svgr/webpack",
+        options: {
+          // ref: https://stackoverflow.com/a/71127131/11681543
+          svgoConfig: {
+            plugins: [
+              {removeViewBox: false},
+            ],
+          },
+        },
+      }],
+    });
+
     return config
   },
 }

components/icon/icon.stories.tsx

@@ -0,0 +1,44 @@
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import React from "react";
+
+import {Icon, IconName} from "./icon";
+
+const iconNames: IconName[] = ["arrow-back", "arrow-right", "check-circle", "circle", "close-circle", "close", "eye", "search"]
+
+export default {
+  title: "atoms/Icon",
+  component: Icon,
+  argTypes: {
+    name: {
+      options: iconNames,
+      control: {type: "radio"},
+    },
+  },
+  args: {
+    name: "close",
+  },
+} as ComponentMeta<typeof Icon>;
+
+const Template: ComponentStory<typeof Icon> = (args) => <Icon {...args} />;
+
+export const Close = Template.bind({});
+Close.args = {
+  name: "close",
+};
+
+export const AllIcons: ComponentStory<typeof Icon> = (props) => {
+  return (
+    <div css={{
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+    }}>
+      {iconNames.map(name=>(
+        <div key={name} css={{padding: "4px"}}>
+          <Icon {...props} name={name}/>
+        </div>
+      ))}
+    </div>
+  ) 
+}
+

components/icon/icon.tsx

@@ -0,0 +1,49 @@
+import {useTheme} from "@emotion/react"
+import React, {ReactElement, SVGProps} from "react"
+
+import ArrowBack from "../../public/icons/arrow-back.svg"
+import ArrowRight from "../../public/icons/arrow-right.svg"
+import CheckCircle from "../../public/icons/check-circle.svg"
+import Circle from "../../public/icons/circle.svg"
+import CloseCircle from "../../public/icons/close-circle.svg"
+import Close from "../../public/icons/close.svg"
+import Eye from "../../public/icons/eye.svg"
+import Search from "../../public/icons/search.svg"
+
+const nameIconMap = {
+  "arrow-back": ArrowBack, 
+  "arrow-right": ArrowRight, 
+  "check-circle": CheckCircle, 
+  "circle": Circle, 
+  "close-circle": CloseCircle, 
+  "close": Close, 
+  "eye": Eye, 
+  "search": Search, 
+}
+
+export type IconName = keyof typeof nameIconMap
+
+export type IconProps = {
+  name: IconName
+  color?: string
+  size?: number
+}
+
+export const Icon = ({
+  color,
+  size = 24,
+  name,
+}: IconProps) => {
+  const theme = useTheme()
+
+  const Icon = nameIconMap[name] as (props: SVGProps<SVGElement>) => ReactElement
+
+  return (
+    <span css={{
+      color: color ? color : theme.colors["grey-90"],
+      fontSize: 0,
+    }}>
+      <Icon width={size} height={size}/>
+    </span>
+  )
+}

components/icon/index.ts

@@ -0,0 +1 @@
+export * from "./icon"

next.config.js

@@ -1,6 +1,29 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  webpack(config) {
+    // ref: https://stackoverflow.com/a/61706308/11681543
+    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test(".svg"));
+    fileLoaderRule.exclude = /\.svg$/;  
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      enforce: "pre",
+      use: [{
+        loader: "@svgr/webpack",
+        options: {
+          // ref: https://stackoverflow.com/a/71127131/11681543
+          svgoConfig: {
+            plugins: [
+              {removeViewBox: false},
+            ],
+          },
+        },
+      }],
+    });
+
+    return config;
+  }
 }
 
 module.exports = nextConfig

package.json

@@ -18,7 +18,8 @@
     "fontfaceobserver": "^2.1.0",
     "next": "12.1.4",
     "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react-dom": "18.0.0",
+    "react-svg": "^14.1.18"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
@@ -29,6 +30,7 @@
     "@storybook/addon-links": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "^0.0.9",
+    "@svgr/webpack": "5.5.0",
     "@types/node": "17.0.23",
     "@types/react": "18.0.1",
     "@types/react-dom": "18.0.0",

tsconfig.json

@@ -14,7 +14,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "baseUrl": "./"
+    "baseUrl": "./",
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]