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="arrow"></k-icon>
<k-icon name="arrow-line"></k-icon>
<k-icon name="arrow-circle"></k-icon>
<k-icon name="chevron"></k-icon>
<k-icon name="chevron-double"></k-icon>Rotation and Direction
Use the rotation attribute to rotate an icon by a specific degree value, or use the direction attribute for semantic rotation (down=90°, left=180°, up=270°). Only set one attribute at a time.
<k-icon name="arrow"></k-icon>
<k-icon name="arrow" direction="down"></k-icon>
<k-icon name="arrow" direction="left"></k-icon>
<k-icon name="arrow" direction="up"></k-icon>
<k-icon name="chevron" rotation="45"></k-icon>Animation
Use the animation attribute to add built-in animations to icons. Available options are spin, blink, and pulse.
<k-icon name="arrow-circle" animation="spin"></k-icon>
<k-icon name="arrow" animation="blink"></k-icon>
<k-icon name="chevron" animation="pulse"></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 name="wysiwyg"></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
<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>JavaScript Reference
Constructor
Extends Component
new Icon()
new Icon(string name)
Parameters
name: string
The name of the icon.
Requirements
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.
rotation: string
The rotation angle in degrees (e.g., "45" or "180"). Syncs with the rotation attribute. Do not use with direction.
direction: string
Semantic direction for icon rotation. Options: "down" (90°), "left" (180°), "up" (270°). Syncs with the direction attribute. Do not use with rotation.
animation: string
Built-in animation to apply. Options: "spin" (continuous rotation), "blink" (fade in/out), "pulse" (scale up/down). Syncs with the animation attribute.
pathToIcons: Array
An array of paths to directories containing icons. This is configured via the global window.kempo.pathToIcons config object.