Use custom SvgIcon component wrapper around InlineSVG

app/soapbox/components/ui/card/card.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { Text } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 
 const sizes = {
   md: 'p-4 sm:rounded-xl',
@@ -54,7 +54,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
 
     return (
       <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
-        <InlineSVG src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
+        <SvgIcon src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
         <span className='sr-only' data-testid='back-button'>Back</span>
       </Comp>
     );

app/soapbox/components/ui/icon-button/icon-button.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 
+import SvgIcon from '../icon/svg-icon';
 import Text from '../text/text';
 
 interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -24,7 +24,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
       {...filteredProps}
       data-testid='icon-button'
     >
-      <InlineSVG src={src} className={iconClassName} />
+      <SvgIcon src={src} className={iconClassName} />
 
       {text ? (
         <Text tag='span' theme='muted' size='sm'>

app/soapbox/components/ui/icon/icon.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
+
+import SvgIcon from './svg-icon';
 
 interface IIcon {
   className?: string,
   count?: number,
   alt?: string,
   src: string,
+  size?: number,
 }
 
-const Icon = ({ src, alt, count, ...filteredProps }: IIcon): JSX.Element => (
+const Icon = ({ src, alt, count, size, ...filteredProps }: IIcon): JSX.Element => (
   <div className='relative' data-testid='icon'>
     {count ? (
       <span className='absolute -top-2 -right-3 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
@@ -16,7 +18,7 @@ const Icon = ({ src, alt, count, ...filteredProps }: IIcon): JSX.Element => (
       </span>
     ) : null}
 
-    <InlineSVG src={src} title={alt} {...filteredProps} />
+    <SvgIcon src={src} size={size} alt={alt} {...filteredProps} />
   </div>
 );
 

app/soapbox/components/ui/icon/svg-icon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+
+interface ISvgIcon {
+  className?: string,
+  alt?: string,
+  src: string,
+  size?: number,
+}
+
+/** Renders an inline SVG with an empty frame loading state */
+const SvgIcon = ({ src, alt, size = 24, className }: ISvgIcon): JSX.Element => (
+  <InlineSVG
+    className={className}
+    src={src}
+    title={alt}
+    width={size}
+    height={size}
+    loader={<div style={{ width: size, height: size }} />}
+  />
+);
+
+export default SvgIcon;

app/soapbox/components/ui/input/input.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Icon from '../icon/icon';
+import SvgIcon from '../icon/svg-icon';
 import Tooltip from '../tooltip/tooltip';
 
 const messages = defineMessages({
@@ -72,7 +72,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 tabIndex={-1}
                 className='text-gray-400 hover:text-gray-500 h-full px-2 focus:ring-primary-500 focus:ring-2'
               >
-                <InlineSVG
+                <SvgIcon
                   src={revealed ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
                   className='h-4 w-4'
                 />