How to replace Swagger UI header logo in Swashbuckle

Question

I am using the Swashbuckle package for WebAPI and am attempting to customize the look and feel of the swagger ui default page. I would like to customize the default swagger

Answer 1

To replace logo in swagger in api for .net core, you have to add the custom.js file.

Follow below steps to change logo.

Step 1 - Create custom.js file and add following code in it

(function () {
window.addEventListener("load", function () {
    setTimeout(function () {

        var logo = document.getElementsByClassName('link');

        logo[0].children[0].alt = "Logo";
        logo[0].children[0].src = "/logo.png";
    });
}); })();

Step 2 - Inject thar custom.js file in startup.cs file. See below

app.UseSwaggerUI(c =>
        {
            c.InjectJavascript("/custom.js");

        });

Step 3 - Enable static file in the api if not enabled. Add below line of code in Configure method of startup.cs.

app.UseStaticFiles();