styles: make icons responsive to font size

app/assets/javascripts/components/Icon.tsx

@@ -11,6 +11,8 @@ import RestoreIcon from '../../icons/ic-restore.svg';
 import CloseIcon from '../../icons/ic-close.svg';
 import PasswordIcon from '../../icons/ic-textbox-password.svg';
 import TrashSweepIcon from '../../icons/ic-trash-sweep.svg';
+import MoreIcon from '../../icons/ic-more.svg';
+import TuneIcon from '../../icons/ic-tune.svg';
 import { toDirective } from './utils';
 
 const ICONS = {
@@ -26,7 +28,9 @@ const ICONS = {
   'restore': RestoreIcon,
   'close': CloseIcon,
   'password': PasswordIcon,
-'trash-sweep': TrashSweepIcon,
+  'trash-sweep': TrashSweepIcon,
+  'more': MoreIcon,
+  'tune': TuneIcon,
 };
 
 type Props = {
@@ -36,7 +40,7 @@ type Props = {
 
 export const Icon: React.FC<Props> = ({ type, className }) => {
   const IconComponent = ICONS[type];
-  return <IconComponent className={className} />;
+  return <IconComponent className={`sn-icon ${className}`} />;
 };
 
 export const IconDirective = toDirective<Props>(

app/assets/javascripts/components/NoAccountWarning.tsx

@@ -1,5 +1,5 @@
 import { toDirective } from './utils';
-import Close from '../../icons/ic-close.svg';
+import { Icon } from './Icon';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 
@@ -34,7 +34,7 @@ const NoAccountWarning = observer(({ appState }: Props) => {
         style="height: 20px"
         className="border-0 m-0 p-0 bg-transparent cursor-pointer rounded-md col-start-2 row-start-1 color-neutral hover:color-info"
       >
-        <Close className="fill-current block" />
+        <Icon type="close" className="block" />
       </button>
     </div>
   );

app/assets/javascripts/components/NotesOptions.tsx

@@ -46,7 +46,7 @@ export const NotesOptions = observer(
 
     const tagsButtonRef = useRef<HTMLButtonElement>();
 
-    const iconClass = 'fill-current color-neutral mr-2';
+    const iconClass = 'color-neutral mr-2';
     const buttonClass =
       'flex items-center border-0 focus:inner-ring-info ' +
       'cursor-pointer hover:bg-contrast color-text bg-transparent px-3 ' +
@@ -141,7 +141,7 @@ export const NotesOptions = observer(
               </div>
               <Icon
                 type="chevron-right"
-                className="fill-current color-neutral"
+                className="color-neutral"
               />
             </DisclosureButton>
             <DisclosurePanel
@@ -261,7 +261,7 @@ export const NotesOptions = observer(
                 await appState.notes.deleteNotesPermanently();
               }}
             >
-              <Icon type="close" className="fill-current color-danger mr-2" />
+              <Icon type="close" className="color-danger mr-2" />
               <span className="color-danger">Delete permanently</span>
             </button>
             <button
@@ -274,7 +274,7 @@ export const NotesOptions = observer(
               <div className="flex items-start">
                 <Icon
                   type="trash-sweep"
-                  className="fill-current color-danger mr-2"
+                  className="color-danger mr-2"
                 />
                 <div className="flex-row">
                   <div className="color-danger">Empty Trash</div>

app/assets/javascripts/components/NotesOptionsPanel.tsx

@@ -1,4 +1,5 @@
 import { AppState } from '@/ui_models/app_state';
+import { Icon } from './Icon';
 import VisuallyHidden from '@reach/visually-hidden';
 import { toDirective, useCloseOnBlur } from './utils';
 import {
@@ -7,7 +8,6 @@ import {
   DisclosurePanel,
 } from '@reach/disclosure';
 import { Portal } from '@reach/portal';
-import MoreIcon from '../../icons/ic-more.svg';
 import { useRef, useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { NotesOptions } from './NotesOptions';
@@ -54,7 +54,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
         className="sn-icon-button"
       >
         <VisuallyHidden>Actions</VisuallyHidden>
-        <MoreIcon className="fill-current block" />
+        <Icon type="more" className="block" />
       </DisclosureButton>
       <Portal>
         <div className="sn-component">

app/assets/javascripts/components/SearchOptions.tsx

@@ -1,4 +1,5 @@
 import { AppState } from '@/ui_models/app_state';
+import { Icon } from './Icon';
 import { toDirective, useCloseOnBlur } from './utils';
 import { useRef, useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
@@ -9,7 +10,6 @@ import {
   DisclosurePanel,
 } from '@reach/disclosure';
 import { Switch } from './Switch';
-import TuneIcon from '../../icons/ic-tune.svg';
 import { observer } from 'mobx-react-lite';
 
 type Props = {
@@ -56,7 +56,7 @@ const SearchOptions = observer(({ appState }: Props) => {
         className="border-0 p-0 bg-transparent cursor-pointer color-neutral hover:color-info"
       >
         <VisuallyHidden>Search options</VisuallyHidden>
-        <TuneIcon className="fill-current block" />
+        <Icon type="tune" className="block" />
       </DisclosureButton>
       <DisclosurePanel
         ref={panelRef}