How to replace Swagger UI header logo in Swashbuckle - asp.net-web-api

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?

Answer 1

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:

Answer 2

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 */
}

Answer 3

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/

Answer 4

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

Answer 5

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

Answer 6

#MichaelD can simply do the following instead:
.logo__img {
content: url([PathToLogo]);
width: 72px; /* Width of new image */
height: 31px; /* Height of new image */
}

Answer 7

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