Icon ​

KIcon - Icon component for displaying SVG symbols. Currently Size, color and viewbox vary between icons, so the implementor must be mindful when using.

<KIcon icon="dashboard" />

Props ​

icon ​

The name of the icon. This required prop will only recognize icons from the following list. It tells KIcon which svg to render.

State icons ​

The state-prefixed icons shown below are styled differently than our normal icons listed above and are meant to be used inside instances of KEmptyState where they appear larger in the UI.

size ​

This prop takes a string that will replace the SVG default height and width. If this is not specified, and height and width are not present either by default 24px is applied.

<KIcon icon="gear" size="48px" />

color ​

Overrides the default svg color.

<KIcon icon="list" color="red" />

secondaryColor ​

Overrides the secondary svg color (if one exists).

<KIcon icon="warning" color="blue" secondaryColor="yellow" />

title ​

The title to be announced by screenreaders and displayed on hover. If not provided, a default title will be used.

<KIcon icon="warning" />
<KIcon icon="warning" title="Custom Title" />

hideTitle ​

Remove the <title> element from within the KIcon svg element. Set to true to prevent the title text from appearing in the browser on svg hover, defaults to false.

viewBox ​

This prop takes a formatted string that will replace the SVG default viewBox. If one is not present by default 0 0 24 24 is applied. You can read more about the viewBox attribute here

• viewBox

<KIcon icon="cogwheel" viewBox="0 0 16 16" />

Slots ​

• svgElements - Used to add svg customization elements

<KIcon icon="check" size="48px" color="url('#linear-gradient')">
  <template v-slot:svgElements>
    <defs>
      <linearGradient id="linear-gradient" x1="0" x2="1">
        <stop offset="0%" stop-color="#16BDCC" />
        <stop offset="30%" stop-color="#16BDCC" />
        <stop offset="100%" stop-color="#1BC263" />
      </linearGradient>
    </defs>
  </template>
</KIcon>

<KIcon icon="search" size="48px" color="url('#linear-gradient2')">
  <template v-slot:svgElements>
    <defs>
      <linearGradient id="linear-gradient2" gradientTransform="rotate(90)">
        <stop offset="10%"  stop-color="gold" />
        <stop offset="90%" stop-color="red" />
      </linearGradient>
    </defs>
  </template>
</KIcon>

<KIcon icon="cogwheel" size="48px" color="dark-grey">
  <template v-slot:svgElements>
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 0 0"
      to="360 0 0"
      dur="5s"
      repeatCount="indefinite"
    />
  </template>
</KIcon>

Usage ​

Check out the contributing docs to learn about adding new icons to KIcon.