feat: new icons (#5412)

web/app/components/workflow/note-node/note-editor/toolbar/command.tsx

@@ -4,15 +4,15 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiBold,
+  RiItalic,
+  RiLink,
+  RiListUnordered,
+  RiStrikethrough,
+} from '@remixicon/react'
 import { useStore } from '../store'
 import { useCommand } from './hooks'
-import { Link01 } from '@/app/components/base/icons/src/vender/line/general'
-import {
-  Bold01,
-  Dotpoints01,
-  Italic01,
-  Strikethrough01,
-} from '@/app/components/base/icons/src/vender/line/editor'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type CommandProps = {
@@ -32,15 +32,15 @@ const Command = ({
   const icon = useMemo(() => {
     switch (type) {
       case 'bold':
-        return <Bold01 className={cn('w-4 h-4', selectedIsBold && 'text-primary-600')} />
+        return <RiBold className={cn('w-4 h-4', selectedIsBold && 'text-primary-600')} />
       case 'italic':
-        return <Italic01 className={cn('w-4 h-4', selectedIsItalic && 'text-primary-600')} />
+        return <RiItalic className={cn('w-4 h-4', selectedIsItalic && 'text-primary-600')} />
       case 'strikethrough':
-        return <Strikethrough01 className={cn('w-4 h-4', selectedIsStrikeThrough && 'text-primary-600')} />
+        return <RiStrikethrough className={cn('w-4 h-4', selectedIsStrikeThrough && 'text-primary-600')} />
       case 'link':
-        return <Link01 className={cn('w-4 h-4', selectedIsLink && 'text-primary-600')} />
+        return <RiLink className={cn('w-4 h-4', selectedIsLink && 'text-primary-600')} />
       case 'bullet':
-        return <Dotpoints01 className={cn('w-4 h-4', selectedIsBullet && 'text-primary-600')} />
+        return <RiListUnordered className={cn('w-4 h-4', selectedIsBullet && 'text-primary-600')} />
     }
   }, [type, selectedIsBold, selectedIsItalic, selectedIsStrikeThrough, selectedIsLink, selectedIsBullet])
 

web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react'
 import cn from 'classnames'
+import { RiFontSize } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useFontSize } from './hooks'
 import {
@@ -7,8 +8,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { TitleCase } from '@/app/components/base/icons/src/vender/line/editor'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 
 const FontSizeSelector = () => {
@@ -46,9 +45,8 @@ const FontSizeSelector = () => {
           'flex items-center pl-2 pr-1.5 h-8 rounded-md text-[13px] font-medium text-gray-700 cursor-pointer hover:bg-gray-50',
           fontSizeSelectorShow && 'bg-gray-50',
         )}>
-          <TitleCase className='mr-1 w-4 h-4' />
+          <RiFontSize className='mr-1 w-4 h-4' />
           {FONT_SIZE_LIST.find(font => font.key === fontSize)?.value || t('workflow.nodes.note.editor.small')}
-          <ChevronDown className='ml-0.5 w-3 h-3' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>

web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx

@@ -4,13 +4,13 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { RiMoreFill } from '@remixicon/react'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import Switch from '@/app/components/base/switch'
 
 export type OperatorProps = {
@@ -44,7 +44,7 @@ const Operator = ({
             open && 'bg-black/5',
           )}
         >
-          <DotsHorizontal className='w-4 h-4 text-gray-500' />
+          <RiMoreFill className='w-4 h-4 text-gray-500' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>