Feat/add icons (#450)

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} />,
         },
       ],
     },