unify icons

frontend/app/components/auth/auth.tsx

@@ -9,7 +9,7 @@ import { Input } from 'components/input';
 import { CrossIcon } from 'components/icons/cross';
 import { TextareaAutosize } from 'components/textarea-autosize';
 import { Spinner } from 'components/spinner/spinner';
-import { Arrow } from 'components/icons/arrow';
+import { ArrowIcon } from 'components/icons/arrow';
 
 import { Button } from './components/button';
 import { OAuth } from './components/oauth';
@@ -116,7 +116,7 @@ export function Auth() {
   );
   return (
     <div className={clsx('auth', styles.root)}>
-      <Button className="auth-button" selected={isDropdownShowed} onClick={handleClickSingIn} suffix={<Arrow />}>
+      <Button className="auth-button" selected={isDropdownShowed} onClick={handleClickSingIn} suffix={<ArrowIcon />}>
         {intl.formatMessage(messages.signin)}
       </Button>
       {isDropdownShowed && (

frontend/app/components/icons/arrow.tsx

@@ -1,8 +1,10 @@
 import { h, JSX } from 'preact';
 
-export function Arrow(props: JSX.HTMLAttributes<SVGSVGElement>) {
+type Props = { size?: number } & JSX.HTMLAttributes<SVGSVGElement>;
+
+export function ArrowIcon({ size = 14, ...props }: Props) {
   return (
-    <svg width="14" height="14" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg width={size} height={size} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
         d="M6 11.5L14.5 19L22 11"
         stroke="currentColor"

frontend/app/components/icons/signout.tsx

@@ -6,7 +6,7 @@ type Props = Omit<JSX.SVGAttributes<SVGSVGElement>, 'size'> & {
 
 export function SignOutIcon({ size = 16, ...props }: Props) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16" fill="none" {...props}>
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
         stroke="currentColor"
         stroke-linecap="round"

frontend/app/components/select/select.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
-import { Arrow } from 'components/icons/arrow';
 import { h, JSX } from 'preact';
 import { useState } from 'preact/hooks';
+
+import { ArrowIcon } from 'components/icons/arrow';
+
 import styles from './select.module.css';
 
 type Item = {
@@ -20,7 +22,7 @@ export function Select({ items, selected, ...props }: Props) {
   return (
     <span className={clsx('select', styles.root, { [styles.rootFocused]: focus, select_focused: focus })}>
       {selected.label}
-      <Arrow className={clsx('select-arrow', styles.arrow)} />
+      <ArrowIcon className={clsx('select-arrow', styles.arrow)} />
       <select
         {...props}
         onFocus={() => setFocus(true)}