Kongponents

# Icon

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

Dashboard 
<KIcon icon="dashboard" />

# Props

# icon - required

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

Down arrowDown
Back arrowLeft
Forward arrowRight
Up arrowUp
Back back
book
brain
check
Expand chevronDown
Back chevronLeft
Forward chevronRight
Collapse chevronUp
Clear clear
Copy to Clipboard clipboard
Close close
Settings cogwheel
Go to Beginning collapseExpand
Connections connections
contactSupport
Copy copy
Danger dangerCircle
Danger dangerCircleOutline
Dashboard dashboard
Decrease decrease
Dev Portal devPortal
Close disabled
Document document
Drag drag
Error errorFilled
Expand expand
External Link externalLink
featureRequest
File fileEmpty
JSON File fileJson
Markdown File fileMd
YAML File fileYaml
Filter filter
Forward forward
Gateway gateway
Settings gear
Settings gearFilled
Grid View grid
Help help
Immunity immunity
Increase increase
Information info
Kong kong
List View list
Locked lock
More Actions more
No Data noData
Notifications notificationBell
Notifications notificationInbox
Organization organization
Organization organizations
Edit pencil
Organization people
Dev Portal portal
Profile profile
Redo redo
plug
Add plus
Runtimes runtimes
Search search
Security security
Document serviceDocument
ServiceHub serviceHub
Services services
Shared Config sharedConfig
spinner
stackedCards
Support support
Table table
Team team
Team Member teamMember
Delete trash
Vitals vitals
Vitals vitalsChart
Warning warning
Workspaces workspaces
workspacesCollapsed
 

# 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.

Note

The State icons do not support the color prop.

State Configure stateConfigure
State Gruceo stateGruceo
State No Data stateNoData
State No Search Results stateNoSearchResults
State Upload stateUpload
 

# size

This prop takes a string that will replace the SVG default height and width. If height and width is not present by default 24 is applied.

Settings 
<KIcon icon="gear" size="50" />

# color

Overrides the default svg color.

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

# secondaryColor

Overrides the secondary svg color (if one exists).

Warning 
<KIcon icon="warning" color="var(--black-70)" secondaryColor="var(--yellow-400)" />

Note

Some SVGs have a set fill-opacity and these cannot be overridden and will render at whichever percent opacity of the passed color.

Prevent color override in an SVG by setting the attribute id="preserveColor" within the SVG. e.g. <path id="preserveColor" d="M9 11v2H7v-2h2zm0-8v6.5H7V3h2z" fill="#FFF"/>

# title

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

Warning Warning 
<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 (opens new window)

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

# Slots

  • svgElements - Used to add svg customization elements
Search Settings 
<KIcon icon="check" size="50" 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="50" 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="50" 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

WARNING

KIcon imports .svg files directly, so a loader is needed in order to render these in your application such as the webpack raw-loader (opens new window). See here for more information.

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

← Inline Edit →