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.

Back arrowLeft
Forward arrowRight
Back back
brain
check
Expand chevronDown
Back chevronLeft
Forward chevronRight
Collapse chevronUp
Clear clear
Copy to Clipboard clipboard
Close close
Settings cogwheel
Go to Beginning collapseExpand
Copy copy
Connections connections
Danger dangerCircle
Danger dangerCircleOutline
Dashboard dashboard
Dev Portal devPortal
Close disabled
Document document
Drag drag
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
Information info
Kong kong
List View list
Locked lock
More Actions more
Notifications notificationBell
Notifications notificationInbox
Organization organization
Organization organizations
Edit pencil
Organization people
Dev Portal portal
Profile profile
Redo redo
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
 

# 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" />

# 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
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. See here for more information.

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

← Inline Edit →