diff options
author | 2021-10-28 13:53:22 +0200 | |
---|---|---|
committer | 2021-10-28 13:53:22 +0200 | |
commit | 59d665af9d4c2dc505e5d5267b02b1df96e90a7d (patch) | |
tree | 7ae3acd32a0c94a2b157bfebdee3d479ffc6f5d1 /src/components/ui/SearchInput.tsx | |
parent | New Crowdin updates (#2154) [skip ci] (diff) | |
download | ferdium-app-59d665af9d4c2dc505e5d5267b02b1df96e90a7d.tar.gz ferdium-app-59d665af9d4c2dc505e5d5267b02b1df96e90a7d.tar.zst ferdium-app-59d665af9d4c2dc505e5d5267b02b1df96e90a7d.zip |
chore: remove @mdi/font in favor of using icons with @mdi/js directly (#2158)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components/ui/SearchInput.tsx')
-rw-r--r-- | src/components/ui/SearchInput.tsx | 12 |
1 files changed, 7 insertions, 5 deletions
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx index af55b0e11..49a50a4a0 100644 --- a/src/components/ui/SearchInput.tsx +++ b/src/components/ui/SearchInput.tsx | |||
@@ -2,6 +2,8 @@ import { ChangeEvent, Component } from 'react'; | |||
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import { debounce } from 'lodash'; | 4 | import { debounce } from 'lodash'; |
5 | import { mdiCloseCircleOutline, mdiMagnify } from '@mdi/js'; | ||
6 | import { Icon } from './icon'; | ||
5 | 7 | ||
6 | type Props = { | 8 | type Props = { |
7 | value: string; | 9 | value: string; |
@@ -88,7 +90,8 @@ class SearchInput extends Component<Props> { | |||
88 | 90 | ||
89 | return ( | 91 | return ( |
90 | <div className={classnames([className, 'search-input'])}> | 92 | <div className={classnames([className, 'search-input'])}> |
91 | <label htmlFor={name} className="mdi mdi-magnify"> | 93 | <label htmlFor={name}> |
94 | <Icon icon={mdiMagnify} /> | ||
92 | <input | 95 | <input |
93 | name={name} | 96 | name={name} |
94 | id={name} | 97 | id={name} |
@@ -103,10 +106,9 @@ class SearchInput extends Component<Props> { | |||
103 | /> | 106 | /> |
104 | </label> | 107 | </label> |
105 | {value.length > 0 && ( | 108 | {value.length > 0 && ( |
106 | <span | 109 | <span onClick={() => this.reset()}> |
107 | className="mdi mdi-close-circle-outline" | 110 | <Icon icon={mdiCloseCircleOutline} /> |
108 | onClick={() => this.reset()} | 111 | </span> |
109 | /> | ||
110 | )} | 112 | )} |
111 | </div> | 113 | </div> |
112 | ); | 114 | ); |