feat: support dark theme color for search and close icon

package.json

@@ -55,6 +55,7 @@
     "@foray1010/remark-preset": "3.4.0",
     "@foray1010/stylelint-config": "2.2.5",
     "@foray1010/tsconfig": "3.0.1",
+    "@svgr/webpack": "5.4.0",
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "12.1.10",
     "@types/bluebird": "3.5.33",

src/core/types/svg.d.ts

@@ -1,4 +1,10 @@
 declare module '*.svg' {
-  const image: string
-  export default image
+  import * as React from 'react'
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  >>
+
+  const src: string
+  export default src
 }

src/popup/components/Search/SearchInput.tsx

@@ -3,9 +3,8 @@ import * as React from 'react'
 import webExtension from 'webextension-polyfill'
 
 import Input from '../../../core/components/baseItems/Input'
-import LazyImage from '../../../core/components/baseItems/LazyImage'
-import cancelIcon from '../../images/cancel.svg'
-import searchIcon from '../../images/search.svg'
+import { ReactComponent as Cross } from '../../images/cross.svg'
+import { ReactComponent as Search } from '../../images/search.svg'
 import classes from './search-input.css'
 
 interface Props extends React.ComponentProps<typeof Input> {
@@ -15,11 +14,7 @@ const SearchInput = React.forwardRef<HTMLInputElement, Props>(
   function InnerSearchInput({ onCancel, ...inputProps }: Props, ref) {
     return (
       <div className={classes.main}>
-        <LazyImage
-          alt='search'
-          className={classes['search-icon']}
-          src={searchIcon}
-        />
+        <Search className={classes['search-icon']} />
         <Input
           ref={ref}
           inputMode='search'
@@ -28,12 +23,7 @@ const SearchInput = React.forwardRef<HTMLInputElement, Props>(
           className={classNames(classes['search-input'], inputProps.className)}
         />
         {inputProps.value ? (
-          <LazyImage
-            alt='clear search'
-            className={classes['cancel-icon']}
-            src={cancelIcon}
-            onClick={onCancel}
-          />
+          <Cross className={classes['cancel-icon']} onClick={onCancel} />
         ) : null}
       </div>
     )

src/popup/components/Search/search-input.css

@@ -1,8 +1,9 @@
 .cancel-icon {
-  width: 14px;
-  height: 14px;
+  height: 100%;
+  box-sizing: border-box;
   flex-shrink: 0;
-  padding: 5px;
+  padding: var(--golden-gap-2x);
+  color: var(--highlight-level4);
 }
 
 .main {
@@ -14,11 +15,12 @@
 }
 
 .search-icon {
-  width: 14px;
-  height: 14px;
+  height: 100%;
+  box-sizing: border-box;
   flex-shrink: 0;
-  padding: 4px;
+  padding: var(--golden-gap-2x);
   padding-right: 3px;
+  color: var(--highlight-level4);
 }
 
 .search-input {

src/popup/reduxs/bookmark/utils/converters.ts

@@ -1,13 +1,13 @@
 import * as R from 'ramda'
 
 import * as CST from '../../../constants'
-import folderIcon from '../../../images/folder.svg'
+import folderIconUrl from '../../../images/folder.svg'
 import type { BookmarkInfo } from '../../../types'
 
 export const getIconUrl = (bookmarkInfo: BookmarkInfo): string => {
   if (bookmarkInfo.type === CST.BOOKMARK_TYPES.BOOKMARK)
     return `chrome://favicon/${bookmarkInfo.url}`
-  if (bookmarkInfo.type === CST.BOOKMARK_TYPES.FOLDER) return folderIcon
+  if (bookmarkInfo.type === CST.BOOKMARK_TYPES.FOLDER) return folderIconUrl
   return ''
 }
 

webpack.config.ts

@@ -74,7 +74,7 @@ const webpackConfig: webpack.Configuration = {
         },
       },
       {
-        test: /\.(png|svg)$/,
+        test: /\.png$/,
         loader: 'file-loader',
         options: {
           name: 'images/[name].[ext]',
@@ -83,14 +83,26 @@ const webpackConfig: webpack.Configuration = {
       ...(isDevelopmentBuild
         ? [
             {
-              test: /\/core\/.+\.(png|svg)$/,
+              test: /\/core\/.+\.png$/,
               loader: 'image-process-loader',
               options: {
                 greyscale: true,
               },
             },
           ]
         : []),
+      {
+        test: /\.svg$/,
+        use: [
+          '@svgr/webpack',
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'images/[name].[ext]',
+            },
+          },
+        ],
+      },
       {
         test: /\/manifest\.yml$/,
         use: [