Icon

Table of Contents

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>

Changing the Icon Directory Location

To change the location of the directory holding the icons import the Icon class, and set the static member pathToIcons to point to the correct location, do this before icons are loaded (for example in the head of the document).

<script type="module">
import Icon from '/kempo/components/Icon.js';
Icon.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, import the Icon class, and set the static member pathToIcons to point to the correct location. Do this before icons are loaded (for example, in the head of the document).

<script type="module">
import Icon from '/kempo/components/Icon.js';
Icon.pathToIcons = ['./pathTo/icons'];
</script>

JavaScript Reference

Constructor

Extends Component
new Icon()
new Icon(string name)

Parameters

name: string

The name of the icon.

Requirements

Attributes

name: string

The name of the icon.

src: string

The source URL of the icon.

Properties

pathToIcons: Array

An array of paths to directories containing icons.