How to replace Swagger UI header logo in Swashbuckle
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:
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/