Overview

#

KLogo displays the Kolibri logo and provides functionality to manipulate it such as setting its dimensions, color scheme, animation, and background.

Usage

#

Default display

Shows Kolibri logo.

      <KLogo
        altText="Kolibri logo"
        :size="150"
      />
    

Display with backgrounds

Shows Kolibri logo with background.

      <KLogo
        altText="Kolibri Logo with background"
        :showBackground="true"
        :size="150"
      />
    

Shows Kolibri logo with rectangular background.

      <KLogo
        altText="Kolibri Logo with rectangular background"
        backgroundStyle="rect"
        :showBackground="true"
        :size="150"
      />
    

Display with animation

Shows Kolibri logo with loading animation.

      <KLogo
        altText="Kolibri Logo with loading animation"
        :animate="true"
        :size="150"
      />
    

Display with different color schemes

Different color schemes can be used - but only with the showBackground prop. Note the transparent lines for the monochrome logos.

Dimensions

You can apply the most common dimensions to the image container via the props size, maxSize, and minSize. Values may be either numbers or strings consisting of a numeral and a valid unit. The following units are supported: %, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw. If you don't provide a unit, px will be used by default.

      <KLogo
        altText="A hummingbird logo"
        size="250px"
        maxSize="10vw"
        :minSize="25"
      />
    

Alternative text

Alternative text (altText) is required for the logo image. When creating it, consider the following:

• If the logo is used as a flat image, you can use the string "Kolibri logo"
• If the the logo is used as a link, then the alternative text needs to give the context where the link is leading (for example "Go to home page", or similar)

Props

#