feat: provide Topbar Logo as a wrappable component (#7521)

* docs(logo): added logo replace docs

Co-authored-by: Tim Lai <timothy.lai@gmail.com>

src/plugins/topbar/index.js

@@ -1,9 +1,11 @@
 import Topbar from "./topbar"
+import Logo from "./logo"
 
 export default function () {
   return {
     components: {
-      Topbar
+      Topbar,
+      Logo
     }
   }
 }

src/plugins/topbar/logo.jsx

@@ -0,0 +1,8 @@
+import React from "react"
+import SwaggerUILogo from "./logo_small.svg"
+
+export const Logo = () => (
+  <img height="40" src={ SwaggerUILogo } alt="Swagger UI"/>
+)
+
+export default Logo

src/plugins/topbar/topbar.jsx

@@ -2,7 +2,6 @@ import React, { cloneElement } from "react"
 import PropTypes from "prop-types"
 
 //import "./topbar.less"
-import Logo from "./logo_small.svg"
 import {parseSearch, serializeSearch} from "../../core/utils"
 
 export default class Topbar extends React.Component {
@@ -113,6 +112,7 @@ export default class Topbar extends React.Component {
     let { getComponent, specSelectors, getConfigs } = this.props
     const Button = getComponent("Button")
     const Link = getComponent("Link")
+    const Logo = getComponent("Logo")
 
     let isLoading = specSelectors.loadingStatus() === "loading"
     let isFailed = specSelectors.loadingStatus() === "failed"
@@ -150,7 +150,7 @@ export default class Topbar extends React.Component {
         <div className="wrapper">
           <div className="topbar-wrapper">
             <Link>
-              <img height="40" src={ Logo } alt="Swagger UI"/>
+              <Logo/>
             </Link>
             <form className="download-url-wrapper" onSubmit={formOnSubmit}>
               {control.map((el, i) => cloneElement(el, { key: i }))}