Add folder Icon component

https://youtrack.weseek.co.jp/issue/GW-7895
- Add component for folder plus icon,  folder  and folder open icon
- Implement FolderPlusIcon component to New Folder button
- Add conditional rendering for folder and folder open
- Implement FolderIcon to folder and children icon list

packages/app/src/components/Icons/FolderIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+type Props = {
+  isOpen: boolean
+}
+const FolderIcon = (props: Props): JSX.Element => {
+  const { isOpen } = props;
+
+  return (
+    <>
+      {!isOpen ? (
+        <svg
+          width ="20"
+          height ="20"
+          viewBox="0 0 24 24"
+        >
+          <path fill="currentColor"
+            d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
+        </svg>
+      ) : (
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,
+            20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z"
+          />
+        </svg>
+      )
+      }
+    </>
+  );
+
+};
+
+export default FolderIcon;

packages/app/src/components/Icons/FolderPlusIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const FolderPlusIcon = (): JSX.Element => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M13 19C13 19.34 13.04 19.67 13.09 20H4C2.9 20 2 19.11 2 18V6C2 4.89 2.89 4 4 4H10L12 6H20C21.1 6 22
+      6.89 22 8V13.81C21.39 13.46 20.72 13.22 20 13.09V8H4V18H13.09C13.04 18.33 13 18.66 13 19M20 18V15H18V18H15V20H18V23H20V20H23V18H20Z"
+    />
+
+  </svg>
+);
+
+export default FolderPlusIcon;

packages/app/src/components/Sidebar/Bookmarks/BookmarkFolder.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'next-i18next';
 
 import ClosableTextInput from '~/components/Common/ClosableTextInput';
+import FolderPlusIcon from '~/components/Icons/FolderPlusIcon';
 
 import BookmarkFolderTree from './BookmarkFolderTree';
 
@@ -27,7 +28,7 @@ const BookmarkFolder = (props: Props): JSX.Element => {
           className="btn btn-block btn-outline-secondary rounded-pill d-flex justify-content-start align-middle"
           onClick={onClickNewFolder}
         >
-          <i className="fa fa fa-folder-o" style={{ fontSize: '1.4em' }}></i>
+          <FolderPlusIcon />
           <span className="mx-2 ">New Folder</span>
         </button>
       </div>

packages/app/src/components/Sidebar/Bookmarks/BookmarkFolderItem.tsx

@@ -5,6 +5,7 @@ import {
 import { useTranslation } from 'next-i18next';
 
 import CountBadge from '~/components/Common/CountBadge';
+import FolderIcon from '~/components/Icons/FolderIcon';
 import TriangleIcon from '~/components/Icons/TriangleIcon';
 import { BookmarkFolderItems } from '~/server/models/bookmark-folder';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
@@ -60,11 +61,11 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
         </div>
         {
           <div>
-            <i className={`fa fa ${isOpen ? 'fa-folder-open-o' : 'fa-folder-o'} pr-2` } style={{ fontSize: '1.4em' }}></i>
+            <FolderIcon isOpen={isOpen} />
           </div>
         }
         {
-          <div className='grw-foldertree-title-anchor flex-grow-1'>
+          <div className='grw-foldertree-title-anchor flex-grow-1 pl-2'>
             <p className={'text-truncate m-auto '}>{bookmarkFolders.bookmarkFolder.name}</p>
           </div>
         }