Icon

Basic Usage

Create an icon using the k-icon component. You can specify the icon by setting the name or src attribute.

<k-icon name="folder"></k-icon>
<k-icon src="/path/to/icon.svg"></k-icon>

<k-icon name="menu"></k-icon>
<k-icon name="close"></k-icon>
<k-icon name="play"></k-icon>
<k-icon name="pause"></k-icon>

Explicitly Set the Source

You can use any svg file that is publically available (on your site or any other public domain) buy using the src attribute instead of name. The code will attempt to ensure compatability.

<k-icon src="https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/wysiwyg/default/24px.svg"></k-icon>

Fallback Icon

Put an SVG inside of the k-icon to be the fallback if one is not found that matches the provided name or source. Otherwise a will be the fallback icon.

<k-icon name="invalid"></k-icon>
<k-icon name="invalid">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-280h200v-80H240v80Zm400 0h80v-80h-80v80ZM240-440h200v-80H240v80Zm400 0h80v-240h-80v240ZM240-600h200v-80H240v80Zm-80 480q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"/></svg>
</k-icon>

You can also set a global fallback icon that will be used for all icons when no icon is found and no slotted content is provided:

<script>
  window.kempo = {
    fallbackIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>`
  };
</script>

Changing the Icon Directory Location

To change the location of the directory holding the icons, set the global kempo.pathToIcons config before any components are loaded (for example in the head of the document).

<script>
  window.kempo = {
    pathToIcons: ['./pathTo/icons']
  };
</script>

Adding Icons

Add your SVGs to the directory, remove the height and width attributes from the svg tag (if you do not, the Icon component will attempt to do it for you). The height and width will be managed by CSS to match the font-size. Give all objects (path, rect, circle) a fill of currentColor, this will allow the icon to adapt to the font color where it is rendered.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24" height="24"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>

Updating the Icon Directory Path

To change the location of the directory holding the icons, set the global kempo.pathToIcons config before any components are loaded (for example, in the head of the document).

<script>
  window.kempo = {
    pathToIcons: ['./pathTo/icons']
  };
</script>

JavaScript Reference

Constructor

Extends Component

new Icon()
new Icon(string name)

Parameters

name: string

The name of the icon.

Requirements

• ShadowComponent

Properties

name: string

The name of the icon. Syncs with the name attribute.

src: string

The source URL of the icon. Syncs with the src attribute.

pathToIcons: Array

An array of paths to directories containing icons. This is configured via the global window.kempo.pathToIcons config object.