Skip to main content

Add a Logo to the Viewer

The OHIF Framework provides ohif-header package to add a header into application layout. ohif-header package is designed as a custom block helper named header to define your own header context.

If you would like to add SVG logo to header please follow these steps.

  1. Add your SVG logo into public folder.

  2. Add header content block which will be located on the top of the application layout into your application's main template. You can also pass some parameters to header content block to customize the header.

    • headerClasses: the list of classes which will be applied to header element
    • brandHref: the url of the logo to link
{{#header headerClasses="header-big bg-blue" brandHref="your logo link"}}
...
{{/header}}
  1. Create a section called as brand in header content block and add your logo content which is displayed on the left side of the header as default into section brand.
   {{#header}}
       {{#section "brand"}}
           <!-- Add logo image -->
           <svg>
               <use xlink:href="/yourLogo.svg"}}></use>
           </svg>

           <!-- Add logo text -->
           <div>Logo Text</div>
       {{/section}}
   {{/header}}

For example, see how it works in OHIF Viewer