diff --git a/iconsAsset/static/IcSearchLine.svg b/iconsAsset/static/IcSearchLine.svg new file mode 100644 index 0000000..5df5a50 --- /dev/null +++ b/iconsAsset/static/IcSearchLine.svg @@ -0,0 +1,3 @@ + + + diff --git a/iconsAsset/static/icSearchFilled.svg b/iconsAsset/static/icSearchFilled.svg new file mode 100644 index 0000000..50f6439 --- /dev/null +++ b/iconsAsset/static/icSearchFilled.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/SearchBar/SearchBar.mdx b/src/components/SearchBar/SearchBar.mdx new file mode 100644 index 0000000..940899d --- /dev/null +++ b/src/components/SearchBar/SearchBar.mdx @@ -0,0 +1,105 @@ +import { Canvas, Meta, Controls } from '@storybook/blocks'; +import * as SearchBarStories from './SearchBar.stories'; +import { SearchBar } from './SearchBar'; + + + +# Searchbar + +SearchBar는 사용자가 검색어를 입력하기 위한 필드를 구성하기 위해 사용합니다.
+ + + + +
+
+ +## 사용법 + +```tsx +import { SearchBar } from '@yourssu/design-system-react'; + + + +; +``` + +
+
+ +### SearchBar.ClearButton + +SearchBar에 입력된 검색어를 초기화하기 위한 UI 버튼을 제공합니다.
+ +```tsx +import { SearchBar } from '@yourssu/design-system-react'; + + + + +; +``` + +실제 초기화 동작을 위해서는 `onClick` 이벤트로 초기화 로직을 구현해야 합니다. + +> **왜 내부적으로 입력 값을 초기화하지 않나요?**
+> SearchBar 입력 값으로 컴포넌트 외부의 상태를 사용하는 경우, 외부 상태의 초기화 여부를 판단하기 어렵기 때문이에요. + +```tsx +const Component = () => { + const [value, setValue] = useState(''); + + return ( + + setValue(e.target.value)} + /> + setValue('')} /> + + ); +}; +``` + + + +
+
+ +### 가변 너비 + +SearchBar 컴포넌트는 가변 너비 컴포넌트입니다. +부모 컴포넌트의 너비에 따라 자동으로 너비가 조절됩니다. + +```tsx +import { SearchBar } from '@yourssu/design-system-react'; + +
+ + + +
; +``` + + + +
+
+ +### Form 제출 + +SearchBar 컴포넌트는 HTML form 요소를 기반으로 구성되어 있습니다. +올바른 입력 값 제출을 위해서 `SearchBar` 컴포넌트의 `onSubmit` 이벤트를 사용해주세요. + +> ❗ **`SearchBar.Input` 컴포넌트에 keydown 이벤트를 통한 폼 제출은 지양해주세요.** + +```tsx +import { SearchBar } from '@yourssu/design-system-react'; + + alert('제출')}> + +; +``` + + diff --git a/src/components/SearchBar/SearchBar.stories.tsx b/src/components/SearchBar/SearchBar.stories.tsx new file mode 100644 index 0000000..1a9aef9 --- /dev/null +++ b/src/components/SearchBar/SearchBar.stories.tsx @@ -0,0 +1,61 @@ +import { useState } from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { SearchBar } from './SearchBar'; + +const meta: Meta = { + title: 'Components/SearchBar', + component: SearchBar, + parameters: { + layout: 'centered', + }, +}; + +export default meta; +type Story = StoryObj; + +const WithClearButtonComponent = () => { + const [value, setValue] = useState(''); + + return ( + + setValue(e.target.value)} + /> + setValue('')} /> + + ); +}; + +export const Primary: Story = { + render: () => ( + + + + ), +}; + +export const WithClearButton: Story = { + render: WithClearButtonComponent, +}; + +export const Width: Story = { + render: () => ( +
+ + + +
+ ), +}; + +export const Form: Story = { + render: () => ( + alert('제출')}> + + + ), +}; diff --git a/src/components/SearchBar/SearchBar.style.ts b/src/components/SearchBar/SearchBar.style.ts new file mode 100644 index 0000000..fb02c01 --- /dev/null +++ b/src/components/SearchBar/SearchBar.style.ts @@ -0,0 +1,57 @@ +import { styled } from 'styled-components'; + +export const StyledContainer = styled.form` + position: relative; + + width: 100%; + height: 48px; + border-radius: ${({ theme }) => theme.semantic.radius.m}px; + background-color: ${({ theme }) => theme.semantic.color.bgBasicLight}; + + display: flex; + align-items: center; + gap: 8px; + + padding: 12px; + + &:has(.searchbar-close-button) { + padding-right: 44px; + } + + .searchbar-icon { + color: ${({ theme }) => theme.semantic.color.iconBasicTertiary}; + width: 20px; + height: 20px; + } +`; + +export const StyledInput = styled.input` + all: unset; + ${({ theme }) => theme.typo.B1_Rg_16}; + + width: 100%; + color: ${({ theme }) => theme.semantic.color.textBasicPrimary}; + + &::placeholder { + color: ${({ theme }) => theme.semantic.color.textBasicTertiary}; + } +`; + +export const StyledClearButton = styled.button` + all: unset; + cursor: pointer; + + width: 20px; + height: 20px; + + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + + svg { + fill: ${({ theme }) => theme.semantic.color.iconBasicTertiary}; + width: 100%; + height: 100%; + } +`; diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx new file mode 100644 index 0000000..4eecab9 --- /dev/null +++ b/src/components/SearchBar/SearchBar.tsx @@ -0,0 +1,44 @@ +import { forwardRef } from 'react'; + +import { IcCancelFilled, IcSearchLine } from '@/style'; + +import { StyledClearButton, StyledContainer, StyledInput } from './SearchBar.style'; + +const SearchBarClearButton = forwardRef< + HTMLButtonElement, + React.ButtonHTMLAttributes +>(({ className, ...props }, ref) => { + return ( + + + + ); +}); + +const SearchBarInput = forwardRef>( + (props, ref) => { + return ; + } +); + +SearchBarInput.displayName = 'SearchBarInput'; + +export const SearchBar = Object.assign( + forwardRef>((props, ref) => { + const onSubmit = (e: React.FormEvent) => { + e.preventDefault(); + props.onSubmit?.(e); + }; + + return ( + + + {props.children} + + ); + }), + { + Input: SearchBarInput, + ClearButton: SearchBarClearButton, + } +); diff --git a/src/components/SearchBar/index.ts b/src/components/SearchBar/index.ts new file mode 100644 index 0000000..8c19331 --- /dev/null +++ b/src/components/SearchBar/index.ts @@ -0,0 +1 @@ +export { SearchBar } from './SearchBar'; diff --git a/src/components/index.ts b/src/components/index.ts index 5311839..d25831e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -61,3 +61,5 @@ export type * from './Snackbar'; export { LoadingIndicator } from './LoadingIndicator'; export type { LoadingIndicatorProps } from './LoadingIndicator'; + +export { SearchBar } from './SearchBar'; diff --git a/src/style/foundation/icons/generated/IcSearchFilled.tsx b/src/style/foundation/icons/generated/IcSearchFilled.tsx new file mode 100644 index 0000000..db63eff --- /dev/null +++ b/src/style/foundation/icons/generated/IcSearchFilled.tsx @@ -0,0 +1,24 @@ +/** + * 이 파일은 iconsAsset/convert.js에 의해 자동 생성되었습니다. + * 직접 수정하는 대신 iconsAsset/convert.js를 수정하세요. + */ + +import { memo, forwardRef } from 'react'; + +import { IconBase } from '../icon.base'; +import { IconProps } from '../icon.type'; + +export const IcSearchFilled = memo( + forwardRef((props, ref) => ( + + + + )) +); + +IcSearchFilled.displayName = 'IcSearchFilled'; diff --git a/src/style/foundation/icons/generated/IcSearchLine.tsx b/src/style/foundation/icons/generated/IcSearchLine.tsx new file mode 100644 index 0000000..717403d --- /dev/null +++ b/src/style/foundation/icons/generated/IcSearchLine.tsx @@ -0,0 +1,24 @@ +/** + * 이 파일은 iconsAsset/convert.js에 의해 자동 생성되었습니다. + * 직접 수정하는 대신 iconsAsset/convert.js를 수정하세요. + */ + +import { memo, forwardRef } from 'react'; + +import { IconBase } from '../icon.base'; +import { IconProps } from '../icon.type'; + +export const IcSearchLine = memo( + forwardRef((props, ref) => ( + + + + )) +); + +IcSearchLine.displayName = 'IcSearchLine'; diff --git a/src/style/foundation/icons/generated/index.ts b/src/style/foundation/icons/generated/index.ts index 4ba37c9..1ca121d 100644 --- a/src/style/foundation/icons/generated/index.ts +++ b/src/style/foundation/icons/generated/index.ts @@ -1,3 +1,16 @@ +export { IcArrowLeftDownFilled } from './IcArrowLeftDownFilled'; +export { IcArrowLeftDownLine } from './IcArrowLeftDownLine'; +export { IcArrowRightDownFilled } from './IcArrowRightDownFilled'; +export { IcArrowRightDownLine } from './IcArrowRightDownLine'; +export { IcArrowRotateFilled } from './IcArrowRotateFilled'; +export { IcArrowRotateLine } from './IcArrowRotateLine'; +export { IcArrowSquareDownLeftFilled } from './IcArrowSquareDownLeftFilled'; +export { IcArrowSquareDownLeftLine } from './IcArrowSquareDownLeftLine'; +export { IcArrowSquareDownRightFilled } from './IcArrowSquareDownRightFilled'; +export { IcArrowSquareDownRightLine } from './IcArrowSquareDownRightLine'; +export { IcArrowSquareUpLeftFilled } from './IcArrowSquareUpLeftFilled'; +export { IcArrowSquareUpLeftLine } from './IcArrowSquareUpLeftLine'; +export { IcSearchLine } from './IcSearchLine'; export { IcAddFilled } from './IcAddFilled'; export { IcAddLine } from './IcAddLine'; export { IcAlarmFilled } from './IcAlarmFilled'; @@ -8,38 +21,18 @@ export { IcArrowDownFilled } from './IcArrowDownFilled'; export { IcArrowDownLine } from './IcArrowDownLine'; export { IcArrowLeftCornerUpFilled } from './IcArrowLeftCornerUpFilled'; export { IcArrowLeftCornerUpLine } from './IcArrowLeftCornerUpLine'; -export { IcArrowLeftDownFilled } from './IcArrowLeftDownFilled'; -export { IcArrowLeftDownLine } from './IcArrowLeftDownLine'; export { IcArrowLeftFilled } from './IcArrowLeftFilled'; export { IcArrowLeftLine } from './IcArrowLeftLine'; export { IcArrowLeftUpFilled } from './IcArrowLeftUpFilled'; export { IcArrowLeftUpLine } from './IcArrowLeftUpLine'; export { IcArrowRightCornerUpFilled } from './IcArrowRightCornerUpFilled'; export { IcArrowRightCornerUpLine } from './IcArrowRightCornerUpLine'; -export { IcArrowRightDownFilled } from './IcArrowRightDownFilled'; -export { IcArrowRightDownLine } from './IcArrowRightDownLine'; export { IcArrowRightFilled } from './IcArrowRightFilled'; export { IcArrowRightLeftFilled } from './IcArrowRightLeftFilled'; export { IcArrowRightLeftLine } from './IcArrowRightLeftLine'; export { IcArrowRightLine } from './IcArrowRightLine'; export { IcArrowRightUpFilled } from './IcArrowRightUpFilled'; export { IcArrowRightUpLine } from './IcArrowRightUpLine'; -export { IcArrowRotateFilled } from './IcArrowRotateFilled'; -export { IcArrowRotateLine } from './IcArrowRotateLine'; -export { IcArrowsChevronDownFilled } from './IcArrowsChevronDownFilled'; -export { IcArrowsChevronDownLine } from './IcArrowsChevronDownLine'; -export { IcArrowsChevronLeftFilled } from './IcArrowsChevronLeftFilled'; -export { IcArrowsChevronLeftLine } from './IcArrowsChevronLeftLine'; -export { IcArrowsChevronRightFilled } from './IcArrowsChevronRightFilled'; -export { IcArrowsChevronRightLine } from './IcArrowsChevronRightLine'; -export { IcArrowsChevronUpFilled } from './IcArrowsChevronUpFilled'; -export { IcArrowsChevronUpLine } from './IcArrowsChevronUpLine'; -export { IcArrowSquareDownLeftFilled } from './IcArrowSquareDownLeftFilled'; -export { IcArrowSquareDownLeftLine } from './IcArrowSquareDownLeftLine'; -export { IcArrowSquareDownRightFilled } from './IcArrowSquareDownRightFilled'; -export { IcArrowSquareDownRightLine } from './IcArrowSquareDownRightLine'; -export { IcArrowSquareUpLeftFilled } from './IcArrowSquareUpLeftFilled'; -export { IcArrowSquareUpLeftLine } from './IcArrowSquareUpLeftLine'; export { IcArrowSquareUpRightFilled } from './IcArrowSquareUpRightFilled'; export { IcArrowSquareUpRightLine } from './IcArrowSquareUpRightLine'; export { IcArrowUpDownCornerFilled } from './IcArrowUpDownCornerFilled'; @@ -48,6 +41,14 @@ export { IcArrowUpDownFilled } from './IcArrowUpDownFilled'; export { IcArrowUpDownLine } from './IcArrowUpDownLine'; export { IcArrowUpFilled } from './IcArrowUpFilled'; export { IcArrowUpLine } from './IcArrowUpLine'; +export { IcArrowsChevronDownFilled } from './IcArrowsChevronDownFilled'; +export { IcArrowsChevronDownLine } from './IcArrowsChevronDownLine'; +export { IcArrowsChevronLeftFilled } from './IcArrowsChevronLeftFilled'; +export { IcArrowsChevronLeftLine } from './IcArrowsChevronLeftLine'; +export { IcArrowsChevronRightFilled } from './IcArrowsChevronRightFilled'; +export { IcArrowsChevronRightLine } from './IcArrowsChevronRightLine'; +export { IcArrowsChevronUpFilled } from './IcArrowsChevronUpFilled'; +export { IcArrowsChevronUpLine } from './IcArrowsChevronUpLine'; export { IcBluetoothFilled } from './IcBluetoothFilled'; export { IcBluetoothLine } from './IcBluetoothLine'; export { IcBookFilled } from './IcBookFilled'; @@ -74,12 +75,12 @@ export { IcCopyFilled } from './IcCopyFilled'; export { IcCopyLine } from './IcCopyLine'; export { IcCropFilled } from './IcCropFilled'; export { IcCropLine } from './IcCropLine'; +export { IcDMFilled } from './IcDMFilled'; +export { IcDMLine } from './IcDMLine'; export { IcDeleteFilled } from './IcDeleteFilled'; export { IcDeleteLine } from './IcDeleteLine'; export { IcDiscountFilled } from './IcDiscountFilled'; export { IcDiscountLine } from './IcDiscountLine'; -export { IcDMFilled } from './IcDMFilled'; -export { IcDMLine } from './IcDMLine'; export { IcDocumentsAddFilled } from './IcDocumentsAddFilled'; export { IcDocumentsAddLine } from './IcDocumentsAddLine'; export { IcDocumentsCopyFilled } from './IcDocumentsCopyFilled'; @@ -128,6 +129,10 @@ export { IcHomeFilled } from './IcHomeFilled'; export { IcHomeLine } from './IcHomeLine'; export { IcIMacFilled } from './IcIMacFilled'; export { IcIMacLine } from './IcIMacLine'; +export { IcIPadFilled } from './IcIPadFilled'; +export { IcIPadLine } from './IcIPadLine'; +export { IcIPhoneFilled } from './IcIPhoneFilled'; +export { IcIPhoneLine } from './IcIPhoneLine'; export { IcImageFilled } from './IcImageFilled'; export { IcImageLine } from './IcImageLine'; export { IcInboxFilled } from './IcInboxFilled'; @@ -136,10 +141,6 @@ export { IcInfoCircleFilled } from './IcInfoCircleFilled'; export { IcInfoCircleLine } from './IcInfoCircleLine'; export { IcInstagramFilled } from './IcInstagramFilled'; export { IcInstagramLine } from './IcInstagramLine'; -export { IcIPadFilled } from './IcIPadFilled'; -export { IcIPadLine } from './IcIPadLine'; -export { IcIPhoneFilled } from './IcIPhoneFilled'; -export { IcIPhoneLine } from './IcIPhoneLine'; export { IcKeyboardFilled } from './IcKeyboardFilled'; export { IcKeyboardLine } from './IcKeyboardLine'; export { IcLayoutFilled } from './IcLayoutFilled'; @@ -188,6 +189,7 @@ export { IcReplyFilled } from './IcReplyFilled'; export { IcReplyLine } from './IcReplyLine'; export { IcRetryRefreshFilled } from './IcRetryRefreshFilled'; export { IcRetryRefreshLine } from './IcRetryRefreshLine'; +export { IcSearchFilled } from './IcSearchFilled'; export { IcSendFilled } from './IcSendFilled'; export { IcSendLine } from './IcSendLine'; export { IcSettingFilled } from './IcSettingFilled'; diff --git a/src/style/foundation/icons/icons.stories.tsx b/src/style/foundation/icons/icons.stories.tsx index 2a35a6b..36815e6 100644 --- a/src/style/foundation/icons/icons.stories.tsx +++ b/src/style/foundation/icons/icons.stories.tsx @@ -11,6 +11,19 @@ import IconDocs from './IconDocs.md?raw'; import { IconBase } from './icon.base'; import { + IcArrowLeftDownFilled, + IcArrowLeftDownLine, + IcArrowRightDownFilled, + IcArrowRightDownLine, + IcArrowRotateFilled, + IcArrowRotateLine, + IcArrowSquareDownLeftFilled, + IcArrowSquareDownLeftLine, + IcArrowSquareDownRightFilled, + IcArrowSquareDownRightLine, + IcArrowSquareUpLeftFilled, + IcArrowSquareUpLeftLine, + IcSearchLine, IcAddFilled, IcAddLine, IcAlarmFilled, @@ -21,38 +34,18 @@ import { IcArrowDownLine, IcArrowLeftCornerUpFilled, IcArrowLeftCornerUpLine, - IcArrowLeftDownFilled, - IcArrowLeftDownLine, IcArrowLeftFilled, IcArrowLeftLine, IcArrowLeftUpFilled, IcArrowLeftUpLine, IcArrowRightCornerUpFilled, IcArrowRightCornerUpLine, - IcArrowRightDownFilled, - IcArrowRightDownLine, IcArrowRightFilled, IcArrowRightLeftFilled, IcArrowRightLeftLine, IcArrowRightLine, IcArrowRightUpFilled, IcArrowRightUpLine, - IcArrowRotateFilled, - IcArrowRotateLine, - IcArrowsChevronDownFilled, - IcArrowsChevronDownLine, - IcArrowsChevronLeftFilled, - IcArrowsChevronLeftLine, - IcArrowsChevronRightFilled, - IcArrowsChevronRightLine, - IcArrowsChevronUpFilled, - IcArrowsChevronUpLine, - IcArrowSquareDownLeftFilled, - IcArrowSquareDownLeftLine, - IcArrowSquareDownRightFilled, - IcArrowSquareDownRightLine, - IcArrowSquareUpLeftFilled, - IcArrowSquareUpLeftLine, IcArrowSquareUpRightFilled, IcArrowSquareUpRightLine, IcArrowUpDownCornerFilled, @@ -61,6 +54,14 @@ import { IcArrowUpDownLine, IcArrowUpFilled, IcArrowUpLine, + IcArrowsChevronDownFilled, + IcArrowsChevronDownLine, + IcArrowsChevronLeftFilled, + IcArrowsChevronLeftLine, + IcArrowsChevronRightFilled, + IcArrowsChevronRightLine, + IcArrowsChevronUpFilled, + IcArrowsChevronUpLine, IcBluetoothFilled, IcBluetoothLine, IcBookFilled, @@ -87,12 +88,12 @@ import { IcCopyLine, IcCropFilled, IcCropLine, + IcDMFilled, + IcDMLine, IcDeleteFilled, IcDeleteLine, IcDiscountFilled, IcDiscountLine, - IcDMFilled, - IcDMLine, IcDocumentsAddFilled, IcDocumentsAddLine, IcDocumentsCopyFilled, @@ -141,6 +142,10 @@ import { IcHomeLine, IcIMacFilled, IcIMacLine, + IcIPadFilled, + IcIPadLine, + IcIPhoneFilled, + IcIPhoneLine, IcImageFilled, IcImageLine, IcInboxFilled, @@ -149,10 +154,6 @@ import { IcInfoCircleLine, IcInstagramFilled, IcInstagramLine, - IcIPadFilled, - IcIPadLine, - IcIPhoneFilled, - IcIPhoneLine, IcKeyboardFilled, IcKeyboardLine, IcLayoutFilled, @@ -201,6 +202,7 @@ import { IcReplyLine, IcRetryRefreshFilled, IcRetryRefreshLine, + IcSearchFilled, IcSendFilled, IcSendLine, IcSettingFilled, @@ -250,6 +252,19 @@ import { } from '.'; const Icons = [ + IcArrowLeftDownFilled, + IcArrowLeftDownLine, + IcArrowRightDownFilled, + IcArrowRightDownLine, + IcArrowRotateFilled, + IcArrowRotateLine, + IcArrowSquareDownLeftFilled, + IcArrowSquareDownLeftLine, + IcArrowSquareDownRightFilled, + IcArrowSquareDownRightLine, + IcArrowSquareUpLeftFilled, + IcArrowSquareUpLeftLine, + IcSearchLine, IcAddFilled, IcAddLine, IcAlarmFilled, @@ -260,38 +275,18 @@ const Icons = [ IcArrowDownLine, IcArrowLeftCornerUpFilled, IcArrowLeftCornerUpLine, - IcArrowLeftDownFilled, - IcArrowLeftDownLine, IcArrowLeftFilled, IcArrowLeftLine, IcArrowLeftUpFilled, IcArrowLeftUpLine, IcArrowRightCornerUpFilled, IcArrowRightCornerUpLine, - IcArrowRightDownFilled, - IcArrowRightDownLine, IcArrowRightFilled, IcArrowRightLeftFilled, IcArrowRightLeftLine, IcArrowRightLine, IcArrowRightUpFilled, IcArrowRightUpLine, - IcArrowRotateFilled, - IcArrowRotateLine, - IcArrowsChevronDownFilled, - IcArrowsChevronDownLine, - IcArrowsChevronLeftFilled, - IcArrowsChevronLeftLine, - IcArrowsChevronRightFilled, - IcArrowsChevronRightLine, - IcArrowsChevronUpFilled, - IcArrowsChevronUpLine, - IcArrowSquareDownLeftFilled, - IcArrowSquareDownLeftLine, - IcArrowSquareDownRightFilled, - IcArrowSquareDownRightLine, - IcArrowSquareUpLeftFilled, - IcArrowSquareUpLeftLine, IcArrowSquareUpRightFilled, IcArrowSquareUpRightLine, IcArrowUpDownCornerFilled, @@ -300,6 +295,14 @@ const Icons = [ IcArrowUpDownLine, IcArrowUpFilled, IcArrowUpLine, + IcArrowsChevronDownFilled, + IcArrowsChevronDownLine, + IcArrowsChevronLeftFilled, + IcArrowsChevronLeftLine, + IcArrowsChevronRightFilled, + IcArrowsChevronRightLine, + IcArrowsChevronUpFilled, + IcArrowsChevronUpLine, IcBluetoothFilled, IcBluetoothLine, IcBookFilled, @@ -326,12 +329,12 @@ const Icons = [ IcCopyLine, IcCropFilled, IcCropLine, + IcDMFilled, + IcDMLine, IcDeleteFilled, IcDeleteLine, IcDiscountFilled, IcDiscountLine, - IcDMFilled, - IcDMLine, IcDocumentsAddFilled, IcDocumentsAddLine, IcDocumentsCopyFilled, @@ -380,6 +383,10 @@ const Icons = [ IcHomeLine, IcIMacFilled, IcIMacLine, + IcIPadFilled, + IcIPadLine, + IcIPhoneFilled, + IcIPhoneLine, IcImageFilled, IcImageLine, IcInboxFilled, @@ -388,10 +395,6 @@ const Icons = [ IcInfoCircleLine, IcInstagramFilled, IcInstagramLine, - IcIPadFilled, - IcIPadLine, - IcIPhoneFilled, - IcIPhoneLine, IcKeyboardFilled, IcKeyboardLine, IcLayoutFilled, @@ -440,6 +443,7 @@ const Icons = [ IcReplyLine, IcRetryRefreshFilled, IcRetryRefreshLine, + IcSearchFilled, IcSendFilled, IcSendLine, IcSettingFilled,