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 logo/header. I have added the following to SwaggerConfig

.EnableSwaggerUi(c =>
 {
  c.InjectJavaScript(thisAssembly, 
    typeof(SwaggerConfig).Namespace + ".SwaggerExtensions.custom-js.js");
  }

The contents of custom-js.js are as follows:

$("#logo").replaceWith("<span id=\"test\">test</span>");

This works for the most part but the visual is a bit jarring, in that the default swagger header is visible while the page loads and after a brief delay the jquery below kicks and the content of the #logo element is updated

Is there a way to avoid this so that the jquery kicks in as part of the initial load/render and it appears seamless?

score 16 · Answer 1 · answered Jul 09 '20 at 15:07

Here are the steps instead of using the index.html

Step 1: Create your logo en put it into a folder, in my case I created a separate folder(I am not using the wwwroot) and I named Content. Use StaticFiles for stream content from this folder access via /Content

app.UseStaticFiles(); // For the wwwroot folder if you need it
app.UseStaticFiles(new StaticFileOptions()
{
    FileProvider = new PhysicalFileProvider(
    Path.Combine(Directory.GetCurrentDirectory(), "Content")),
    RequestPath = "/Content"
});

Stem #2: Create an image folder inside Content and place your logo.jpg file. Right-click over the file and change the Build Action to Embedded resource

Step #3: Create a css folder inside Content and place a new file swagger-mycustom.css and change the Build Action to Content

On your Startup Configure method add this code

app.UseSwaggerUI(setupAction =>
{
    ....
    setupAction.InjectStylesheet("/Content/css/swagger-mycustom.css");
    ...
}

Step #4: Add this to your css:

img[alt="Swagger UI"] {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: url('/Content/images/logo.jpg');
    max-width: 100%;
    max-height: 100%;
}

The output looks like this:

I recommend using EmbeddedFileProvider instead. See: https://stackoverflow.com/a/44120595/3115559 — Oleg Fridman, Jul 21 '20 at 20:22
I will give it a try when I have a chance and will update the answer, thanks for the suggestion — Zinov, Jul 22 '20 at 14:35
Under wwwroot you don't need to change the build action, just add the content. And you don't need that special folder, so the url for the logo would be "/images/logo.png" — Pablo Caballero, May 24 '23 at 10:03
You are correct. In my solution I had it with this structure and I was not grouping it as part of the wwwroot — Zinov, May 24 '23 at 12:50

score 8 · Answer 2 · answered Jan 23 '20 at 01:23

8

This worked for me with the last version of Swagger UI in Swashbuckle

.swagger-ui img {
     content: url([logo_path]);
     width: 140px; /* width of your logo */
     height: 40px; /* height of your logo */
}

answered Jan 23 '20 at 01:23

cesarmart

759
1
7
10

This worked for me! – Chris Parker Dec 25 '21 at 04:36
Works for me as well. I even use data:image/jpeg;base64 css url path. Hide swagger branding .swagger-ui .topbar span { display: none; } – hubert17 Nov 23 '22 at 17:33

score 5 · Answer 3 · answered Aug 18 '17 at 07:57

If you don't want to create the index.html, you can also update the logo with injected css, this is a lot faster than js injection.

In swagger config enable the c.InjectStylesheet and point to the css you created

In the css itself:

.logo__img {
 background: url([PathToLogo]) no-repeat;
 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width: 64px; /* Width of new image */
 height: 25px; /* Height of new image */
 padding-left: 64px; /* Equal to width of new image */
}

credits for css trick: https://css-tricks.com/replace-the-image-in-an-img-with-css/

score 5 · Answer 4 · answered Apr 10 '20 at 15:18

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();

Worked for me just now, thanks! here's how it looks for me: https://github.com/rswag/rswag/issues/616#issuecomment-1493073432 — Yshmarov, Apr 01 '23 at 22:18

score 3 · Accepted Answer · answered Aug 03 '16 at 02:59

3

I ended up adding a new "index.html" based off this version instead of trying to modify the behavior of the default generated one

answered Aug 03 '16 at 02:59

Abhijeet Patel

6,562
8
50
93

sir, please help where I need to put this "index.html" in my asp.net mvc or asp.net core web api project. – Nripendra Ojha Dec 26 '19 at 12:10

score 2 · Answer 6 · answered Nov 08 '17 at 17:24

2

@MichaelD can simply do the following instead:

.logo__img {
    content: url([PathToLogo]);
    width: 72px; /* Width of new image */
    height: 31px; /* Height of new image */
}

answered Nov 08 '17 at 17:24

Mark Z.

2,127
16
33

score 0 · Answer 7 · answered Aug 02 '16 at 07:10

0

The custom-js.js need to be placed after all js file.

answered Aug 02 '16 at 07:10

Fan TianYi

397
2
11

How to replace Swagger UI header logo in Swashbuckle

7 Answers7

Linked