# Icon

Table of Contents

###### Examples

Basic Usage
Explicitly Set the Source
Fallback Icon
Changing the Icon Directory Location
Adding Icons
Updating the Icon Directory Path

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods

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

- Component

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