Feat/add icons (#450)

web/app/components/base/icons/IconBase.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react'
+import { generate } from './utils'
+import type { AbstractNode } from './utils'
+
+export type IconData = {
+  name: string
+  icon: AbstractNode
+}
+
+export type IconBaseProps = {
+  data: IconData
+  className?: string
+  onClick?: React.MouseEventHandler<SVGElement>
+  style?: React.CSSProperties
+}
+
+const IconBase = forwardRef<React.MutableRefObject<HTMLOrSVGElement>, IconBaseProps>((props, ref) => {
+  const { data, className, onClick, style, ...restProps } = props
+
+  return generate(data.icon, `svg-${data.name}`, {
+    className,
+    onClick,
+    style,
+    'data-icon': data.name,
+    'aria-hidden': 'true',
+    ...restProps,
+    'ref': ref,
+  })
+})
+
+export default IconBase

web/app/components/base/icons/assets/public/files/md.svg

@@ -0,0 +1,18 @@
+<svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_3777_37339)">
+<path d="M4 7.73349C4 5.49329 4 4.37318 4.43597 3.51753C4.81947 2.76489 5.43139 2.15296 6.18404 1.76947C7.03969 1.3335 8.15979 1.3335 10.4 1.3335H18.6667L28 10.6668V24.2668C28 26.507 28 27.6271 27.564 28.4828C27.1805 29.2354 26.5686 29.8474 25.816 30.2309C24.9603 30.6668 23.8402 30.6668 21.6 30.6668H10.4C8.15979 30.6668 7.03969 30.6668 6.18404 30.2309C5.43139 29.8474 4.81947 29.2354 4.43597 28.4828C4 27.6271 4 26.507 4 24.2668V7.73349Z" fill="#309BEC"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9904 25.3335H10.0096C9.45202 25.3335 9 24.9138 9 24.396V18.271C9 17.7532 9.45202 17.3335 10.0096 17.3335H21.9904C22.548 17.3335 23 17.7532 23 18.271V24.396C23 24.9138 22.548 25.3335 21.9904 25.3335ZM12.3654 23.4585V21.021L13.7115 22.5835L15.0577 21.021V23.4585H16.4038V19.2085H15.0577L13.7115 20.771L12.3654 19.2085H11.0192V23.4585H12.3654ZM20.0385 21.3335H21.3846L19.3654 23.521L17.3462 21.3335H18.6923V19.2085H20.0385V21.3335Z" fill="white"/>
+<path opacity="0.5" d="M18.6665 1.3335L27.9998 10.6668H21.3332C19.8604 10.6668 18.6665 9.47292 18.6665 8.00016V1.3335Z" fill="white"/>
+<defs>
+<filter id="filter0_d_3777_37339" x="2" y="0.333496" width="28" height="33.3335" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3777_37339"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3777_37339" result="shape"/>
+</filter>
+</defs>
+</svg>

web/app/components/base/icons/assets/vender/line/arrows/refresh-cw-05.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.69773 13.1783C7.29715 13.8879 9.20212 13.8494 10.8334 12.9075C13.5438 11.3427 14.4724 7.87704 12.9076 5.16672L12.7409 4.87804M3.09233 10.8335C1.52752 8.12314 2.45615 4.65746 5.16647 3.09265C6.7978 2.15081 8.70277 2.11227 10.3022 2.82185M1.66226 10.8892L3.48363 11.3773L3.97166 9.5559M12.0284 6.44393L12.5164 4.62256L14.3378 5.1106" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/app/components/base/icons/assets/vender/line/general/trash-03.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 2H10M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4M6.66667 7V10.3333M9.33333 7V10.3333" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/app/components/base/icons/script.js

@@ -0,0 +1,107 @@
+const path = require('node:path')
+const { open, readdir, access, mkdir, writeFile, appendFile, rm } = require('node:fs/promises')
+const { parseXml } = require('@rgrove/parse-xml')
+const camelCase = require('lodash/camelCase')
+const template = require('lodash/template')
+
+const generateDir = async (currentPath) => {
+  try {
+    await mkdir(currentPath, { recursive: true })
+  }
+  catch (err) {
+    console.error(err.message)
+  }
+}
+const processSvgStructure = (svgStructure, replaceFillOrStrokeColor) => {
+  if (svgStructure?.children.length) {
+    svgStructure.children = svgStructure.children.filter(c => c.type !== 'text')
+
+    svgStructure.children.forEach((child) => {
+      if (child?.name === 'path' && replaceFillOrStrokeColor) {
+        if (child?.attributes?.stroke)
+          child.attributes.stroke = 'currentColor'
+
+        if (child?.attributes.fill)
+          child.attributes.fill = 'currentColor'
+      }
+      if (child?.children.length)
+        processSvgStructure(child, replaceFillOrStrokeColor)
+    })
+  }
+}
+const generateSvgComponent = async (fileHandle, entry, pathList, replaceFillOrStrokeColor) => {
+  const currentPath = path.resolve(__dirname, 'src', ...pathList.slice(2))
+
+  try {
+    await access(currentPath)
+  }
+  catch {
+    await generateDir(currentPath)
+  }
+
+  const svgString = await fileHandle.readFile({ encoding: 'utf8' })
+  const svgJson = parseXml(svgString).toJSON()
+  const svgStructure = svgJson.children[0]
+  processSvgStructure(svgStructure, replaceFillOrStrokeColor)
+  const prefixFileName = camelCase(entry.split('.')[0])
+  const fileName = prefixFileName.charAt(0).toUpperCase() + prefixFileName.slice(1)
+  const svgData = {
+    icon: svgStructure,
+    name: fileName,
+  }
+
+  const componentRender = template(`
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './<%= svgName %>.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+export default Icon
+`.trim())
+
+  await writeFile(path.resolve(currentPath, `${fileName}.json`), JSON.stringify(svgData, '', '\t'))
+  await writeFile(path.resolve(currentPath, `${fileName}.tsx`), `${componentRender({ svgName: fileName })}\n`)
+
+  const indexingRender = template(`
+export { default as <%= svgName %> } from './<%= svgName %>'
+`.trim())
+
+  await appendFile(path.resolve(currentPath, 'index.ts'), `${indexingRender({ svgName: fileName })}\n`)
+}
+
+const walk = async (entry, pathList, replaceFillOrStrokeColor) => {
+  const currentPath = path.resolve(...pathList, entry)
+  let fileHandle
+
+  try {
+    fileHandle = await open(currentPath)
+    const stat = await fileHandle.stat()
+
+    if (stat.isDirectory()) {
+      const files = await readdir(currentPath)
+
+      for (const file of files)
+        await walk(file, [...pathList, entry], replaceFillOrStrokeColor)
+    }
+
+    if (stat.isFile() && /.+\.svg$/g.test(entry))
+      await generateSvgComponent(fileHandle, entry, pathList, replaceFillOrStrokeColor)
+  }
+  finally {
+    fileHandle?.close()
+  }
+}
+
+(async () => {
+  await rm(path.resolve(__dirname, 'src'), { recursive: true, force: true })
+  await walk('public', [__dirname, 'assets'])
+  await walk('vender', [__dirname, 'assets'], true)
+})()

web/app/components/base/icons/src/public/files/Md.json

@@ -0,0 +1,144 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "32",
+			"height": "34",
+			"viewBox": "0 0 32 34",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"filter": "url(#filter0_d_3777_37339)"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M4 7.73349C4 5.49329 4 4.37318 4.43597 3.51753C4.81947 2.76489 5.43139 2.15296 6.18404 1.76947C7.03969 1.3335 8.15979 1.3335 10.4 1.3335H18.6667L28 10.6668V24.2668C28 26.507 28 27.6271 27.564 28.4828C27.1805 29.2354 26.5686 29.8474 25.816 30.2309C24.9603 30.6668 23.8402 30.6668 21.6 30.6668H10.4C8.15979 30.6668 7.03969 30.6668 6.18404 30.2309C5.43139 29.8474 4.81947 29.2354 4.43597 28.4828C4 27.6271 4 26.507 4 24.2668V7.73349Z",
+							"fill": "#309BEC"
+						},
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"fill-rule": "evenodd",
+					"clip-rule": "evenodd",
+					"d": "M21.9904 25.3335H10.0096C9.45202 25.3335 9 24.9138 9 24.396V18.271C9 17.7532 9.45202 17.3335 10.0096 17.3335H21.9904C22.548 17.3335 23 17.7532 23 18.271V24.396C23 24.9138 22.548 25.3335 21.9904 25.3335ZM12.3654 23.4585V21.021L13.7115 22.5835L15.0577 21.021V23.4585H16.4038V19.2085H15.0577L13.7115 20.771L12.3654 19.2085H11.0192V23.4585H12.3654ZM20.0385 21.3335H21.3846L19.3654 23.521L17.3462 21.3335H18.6923V19.2085H20.0385V21.3335Z",
+					"fill": "white"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"opacity": "0.5",
+					"d": "M18.6665 1.3335L27.9998 10.6668H21.3332C19.8604 10.6668 18.6665 9.47292 18.6665 8.00016V1.3335Z",
+					"fill": "white"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "defs",
+				"attributes": {},
+				"children": [
+					{
+						"type": "element",
+						"name": "filter",
+						"attributes": {
+							"id": "filter0_d_3777_37339",
+							"x": "2",
+							"y": "0.333496",
+							"width": "28",
+							"height": "33.3335",
+							"filterUnits": "userSpaceOnUse",
+							"color-interpolation-filters": "sRGB"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "feFlood",
+								"attributes": {
+									"flood-opacity": "0",
+									"result": "BackgroundImageFix"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feColorMatrix",
+								"attributes": {
+									"in": "SourceAlpha",
+									"type": "matrix",
+									"values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+									"result": "hardAlpha"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feOffset",
+								"attributes": {
+									"dy": "1"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feGaussianBlur",
+								"attributes": {
+									"stdDeviation": "1"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feColorMatrix",
+								"attributes": {
+									"type": "matrix",
+									"values": "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feBlend",
+								"attributes": {
+									"mode": "normal",
+									"in2": "BackgroundImageFix",
+									"result": "effect1_dropShadow_3777_37339"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feBlend",
+								"attributes": {
+									"mode": "normal",
+									"in": "SourceGraphic",
+									"in2": "effect1_dropShadow_3777_37339",
+									"result": "shape"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "Md"
+}

web/app/components/base/icons/src/public/files/Md.tsx

@@ -0,0 +1,14 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Md.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+export default Icon

web/app/components/base/icons/src/public/files/index.ts

@@ -0,0 +1 @@
+export { default as Md } from './Md'

web/app/components/base/icons/src/vender/line/arrows/RefreshCw05.json

@@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M5.69773 13.1783C7.29715 13.8879 9.20212 13.8494 10.8334 12.9075C13.5438 11.3427 14.4724 7.87704 12.9076 5.16672L12.7409 4.87804M3.09233 10.8335C1.52752 8.12314 2.45615 4.65746 5.16647 3.09265C6.7978 2.15081 8.70277 2.11227 10.3022 2.82185M1.66226 10.8892L3.48363 11.3773L3.97166 9.5559M12.0284 6.44393L12.5164 4.62256L14.3378 5.1106",
+					"stroke": "currentColor",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "RefreshCw05"
+}

web/app/components/base/icons/src/vender/line/arrows/RefreshCw05.tsx

@@ -0,0 +1,14 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './RefreshCw05.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+export default Icon

web/app/components/base/icons/src/vender/line/arrows/index.ts

@@ -0,0 +1 @@
+export { default as RefreshCw05 } from './RefreshCw05'

web/app/components/base/icons/src/vender/line/development/Database03.tsx

@@ -0,0 +1,14 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Database03.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+export default Icon

web/app/components/base/icons/src/vender/line/development/index.ts

@@ -0,0 +1 @@
+export { default as Database03 } from './Database03'

web/app/components/base/icons/src/vender/line/files/FilePlus02.tsx

@@ -0,0 +1,14 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './FilePlus02.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+export default Icon

web/app/components/base/icons/src/vender/line/files/index.ts

@@ -0,0 +1 @@
+export { default as FilePlus02 } from './FilePlus02'

web/app/components/base/icons/src/vender/line/general/Trash03.json

@@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M6 2H10M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4M6.66667 7V10.3333M9.33333 7V10.3333",
+					"stroke": "currentColor",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Trash03"
+}

web/app/components/base/icons/src/vender/line/general/Trash03.tsx

@@ -0,0 +1,14 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Trash03.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+export default Icon

web/app/components/base/icons/src/vender/line/general/index.ts

@@ -0,0 +1 @@
+export { default as Trash03 } from './Trash03'

web/app/components/base/icons/src/vender/solid/development/Database03.tsx

@@ -0,0 +1,14 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Database03.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+export default Icon

web/app/components/base/icons/src/vender/solid/development/index.ts

@@ -0,0 +1 @@
+export { default as Database03 } from './Database03'

web/app/components/base/icons/utils.ts

@@ -0,0 +1,52 @@
+import React from 'react'
+
+export type AbstractNode = {
+  name: string
+  attributes: {
+    [key: string]: string
+  }
+  children?: AbstractNode[]
+}
+
+export type Attrs = {
+  [key: string]: string
+}
+
+export function normalizeAttrs(attrs: Attrs = {}): Attrs {
+  return Object.keys(attrs).reduce((acc: Attrs, key) => {
+    const val = attrs[key]
+    switch (key) {
+      case 'class':
+        acc.className = val
+        delete acc.class
+        break
+      default:
+        acc[key] = val
+    }
+    return acc
+  }, {})
+}
+
+export function generate(
+  node: AbstractNode,
+  key: string,
+  rootProps?: { [key: string]: any } | false,
+): any {
+  if (!rootProps) {
+    return React.createElement(
+      node.name,
+      { key, ...normalizeAttrs(node.attributes) },
+      (node.children || []).map((child, index) => generate(child, `${key}-${node.name}-${index}`)),
+    )
+  }
+
+  return React.createElement(
+    node.name,
+    {
+      key,
+      ...normalizeAttrs(node.attributes),
+      ...rootProps,
+    },
+    (node.children || []).map((child, index) => generate(child, `${key}-${node.name}-${index}`)),
+  )
+}

web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.module.css

@@ -1,14 +0,0 @@
-.file-icon {
-  background: url(../../../../assets/file.svg) center center no-repeat;
-  background-size: contain;
-}
-
-.sync-icon {
-  background: url(../../../../assets/sync.svg) center center no-repeat;
-  background-size: contain;
-}
-
-.trash-icon {
-  background: url(../../../../assets/trash.svg) center center no-repeat;
-  background-size: contain;
-}

web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx

@@ -5,12 +5,13 @@ import Link from 'next/link'
 import { useSWRConfig } from 'swr'
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/solid'
 import { Menu, Transition } from '@headlessui/react'
-import cn from 'classnames'
-import s from './index.module.css'
 import { apiPrefix } from '@/config'
 import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
 import Toast from '@/app/components/base/toast'
 import type { DataSourceNotion } from '@/models/common'
+import { FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
+import { RefreshCw05 } from '@/app/components/base/icons/src/vender/line/arrows'
+import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 
 type OperateProps = {
   workspace: DataSourceNotion
@@ -23,7 +24,7 @@ export default function Operate({
     cursor-pointer
   `
   const itemIconClassName = `
-  mr-2 mt-[2px] w-4 h-4
+  mr-2 mt-[2px] w-4 h-4 text-gray-500
   `
   const { t } = useTranslation()
   const { mutate } = useSWRConfig()
@@ -73,7 +74,7 @@ export default function Operate({
                     <Link
                       className={itemClassName}
                       href={`${apiPrefix}/oauth/data-source/notion`}>
-                      <div className={cn(s['file-icon'], itemIconClassName)}></div>
+                      <FilePlus02 className={itemIconClassName} />
                       <div>
                         <div className='leading-5'>{t('common.dataSource.notion.changeAuthorizedPages')}</div>
                         <div className='leading-5 text-xs text-gray-500'>
@@ -84,7 +85,7 @@ export default function Operate({
                   </Menu.Item>
                   <Menu.Item>
                     <div className={itemClassName} onClick={handleSync}>
-                      <div className={cn(s['sync-icon'], itemIconClassName)} />
+                      <RefreshCw05 className={itemIconClassName} />
                       <div className='leading-5'>{t('common.dataSource.notion.sync')}</div>
                     </div>
                   </Menu.Item>
@@ -92,7 +93,7 @@ export default function Operate({
                 <Menu.Item>
                   <div className='p-1'>
                     <div className={itemClassName} onClick={handleRemove}>
-                      <div className={cn(s['trash-icon'], itemIconClassName)} />
+                      <Trash03 className={itemIconClassName} />
                       <div className='leading-5'>{t('common.dataSource.notion.remove')}</div>
                     </div>
                   </div>

web/app/components/header/account-setting/index.module.css

@@ -2,14 +2,4 @@
   max-width: 720px !important;
   padding: 0 !important;
   overflow-y: auto;
-}
-
-.data-source-icon {
-  background: url(../assets/data-source.svg) center center no-repeat;
-  background-size: cover;
-}
-
-.data-source-solid-icon {
-  background: url(../assets/data-source-blue.svg) center center no-repeat;
-  background-size: cover;
 }

web/app/components/header/account-setting/index.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { useState } from 'react'
 import { AtSymbolIcon, CubeTransparentIcon, GlobeAltIcon, UserIcon, UsersIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { GlobeAltIcon as GlobalAltIconSolid, UserIcon as UserIconSolid, UsersIcon as UsersIconSolid } from '@heroicons/react/24/solid'
-import cn from 'classnames'
 import AccountPage from './account-page'
 import MembersPage from './members-page'
 import IntegrationsPage from './Integrations-page'
@@ -12,21 +11,13 @@ import ProviderPage from './provider-page'
 import DataSourcePage from './data-source-page'
 import s from './index.module.css'
 import Modal from '@/app/components/base/modal'
+import { Database03 } from '@/app/components/base/icons/src/vender/line/development'
+import { Database03 as Database03Solid } from '@/app/components/base/icons/src/vender/solid/development'
 
 const iconClassName = `
   w-4 h-4 ml-3 mr-2
 `
 
-type IconProps = {
-  className?: string
-}
-const DataSourceIcon = ({ className }: IconProps) => (
-  <div className={cn(s['data-source-icon'], className)} />
-)
-const DataSourceSolidIcon = ({ className }: IconProps) => (
-  <div className={cn(s['data-source-solid-icon'], className)} />
-)
-
 type IAccountSettingProps = {
   onCancel: () => void
   activeTab?: string
@@ -81,8 +72,8 @@ export default function AccountSetting({
         {
           key: 'data-source',
           name: t('common.settings.dataSource'),
-          icon: <DataSourceIcon className={iconClassName} />,
-          activeIcon: <DataSourceSolidIcon className={iconClassName} />,
+          icon: <Database03 className={iconClassName} />,
+          activeIcon: <Database03Solid className={iconClassName} />,
         },
       ],
     },

web/package.json

@@ -9,7 +9,8 @@
     "lint": "next lint",
     "fix": "next lint --fix",
     "eslint-fix": "eslint --fix",
-    "prepare": "cd ../ && husky install ./web/.husky"
+    "prepare": "cd ../ && husky install ./web/.husky",
+    "gen-icons": "node ./app/components/base/icons/script.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.22.3",
@@ -83,6 +84,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.36.0",
     "@faker-js/faker": "^7.6.0",
+    "@rgrove/parse-xml": "^4.1.0",
     "@types/js-cookie": "^3.0.3",
     "@types/negotiator": "^0.6.1",
     "@types/qs": "^6.9.7",