Change logo version in header based on screen size in web UI (#24707)

app/javascript/mastodon/components/logo.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
+import logo from 'mastodon/../images/logo.svg';
 
-const Logo = () => (
-  <svg viewBox='0 0 261 66' className='logo' role='img'>
+export const WordmarkLogo = () => (
+  <svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'>
     <title>Mastodon</title>
     <use xlinkHref='#logo-symbol-wordmark' />
   </svg>
 );
 
-export default Logo;
+export const SymbolLogo = () => (
+  <img src={logo} alt='Mastodon' className='logo logo--icon' />
+);
+
+export default WordmarkLogo;