Use custom SvgIcon component wrapper around InlineSVG

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;