Introduction

Devkitty is a JavaScript-based vector asset system built for developers who want full control over icon loading, rendering, and performance — without exposing SVG markup or polluting the DOM.

Icons are rendered using <canvas> via a custom element called <dk-el>.

Icons are bundled into a custom container format called GGDK, allowing hundreds of icons to live in a single file while still being loaded and parsed only when needed.

Design Philosophy

Explicit Over Implicit: avoids hidden behavior.

Fast, Fail Loud: GGDK files are parsed strictly.

No SVG in the DOM: SVG markup never appears in DevTools.

Hosting Is a Developer Responsibility: Devkitty fetches GGDK files using standard browser fetch(). Hosting configuration must allow cross-origin access or the file must be same-origin (in your site files).

GGDK Format

@meta
  format=devkitty
  version=1
  type=icon
  mode=package
  iconCount=3

@icons
{
  "name": "apple",
  "viewBox": "0 0 24 24",
  "instructions": [
    { "op": "path", "d": "M12 2L..." }
  ]
}
  

The <dk-el> Element

<dk-el icon="example" size="48" color="red"></dk-el>
  

Loading Pipeline

1. GGDK fetched
2. Index built
3. Icons parsed on demand
4. Elements render

Performance

Projects are lightning-fast by storing 100+ icons in a single GGDK file, loading only the icons you request, and rendering them via HTML5 Canvas. This approach avoids cluttering the DOM with inline SVG code and eliminates the need to fetch and cache multiple SVG files, keeping pages clean, efficient, and responsive.

Rendering

Icons render via Path2D on HiDPI canvas.

Adding Devkitty

Integrating Devkitty into your website is simple and flexible. There are multiple ways to add it, allowing you to choose the method that best fits your workflow and project setup.

Option 1:

Include the following script tag in your website's .html file:

<script src="https://cdn.jsdelivr.net/gh/DevKittyJS/devkittyjs.github.io/public/dist/devkitty.min.js"></script>

Recommended: This method supports automatic updates and loads faster.

Option 2:

You can download the Devkitty script and include it directly in your website's files, giving you full control over the version you use and allowing offline use if needed.

Creating GGDK's

A GGDK file is required for Devkitty to function, and creating one is quick and straightforward. Simply visit the Devkitty converter, upload your .svg icon files, choose your preferred settings, and generate your GGDK file. Before exporting, you can review and edit the generated GGDK to suit your needs.

Loading GGDK Files

Loading your GGDK file is essential - without it, no icons will appear. You can either host the GGDK file on your website and link to it locally, or use a CDN-hosted link. Using a CDN is recommended, as raw GitHub links and similar sources are often blocked due to CORS policies.

Recommended (CDN Hosted):

<script src="https://cdn.jsdelivr.net/gh/DevKittyJS/devkittyjs.github.io/public/dist/devkitty.min.js"
        ggdk="https://cdn.jsdelivr.net/gh/DevKittyJS/devkittyjs.github.io@main/GGDK/icons.ggdk [Link to your GGDK]">
</script>
  

In the example above, the .ggdk file is loaded for Devkitty using the ggdk="" attribute on the linked script. Alternatively, you can dynamically load a GGDK file at any time using the JavaScript function:

GGDK.fetch("https://cdn.jsdelivr.net/gh/DevKittyJS/devkittyjs.github.io@main/GGDK/icons.ggdk [Link to your GGDK]");

Hosting & CORS Requirements

Devkitty loads GGDK files using browser fetch(). If your file is hosted on a different domain than your website, the server must allow cross-origin requests.

Required Header

Access-Control-Allow-Origin: *
  

Recommended Hosting Providers

• jsDelivr (recommended for GitHub repositories)
• Cloudflare
• Vercel
• Netlify
• AWS S3 (with CORS enabled)
• Same-origin hosting

Do NOT Use:

https://raw.githubusercontent.com/...
  

The GitHub raw domain does not reliably provide the required CORS headers. Use jsDelivr instead:

https://cdn.jsdelivr.net/gh/username/repo@branch/path/file.ggdk
  

Why This Matters

Browsers block cross-origin requests that do not explicitly allow access. Devkitty cannot override browser security policies.

Icon

* Required

<dk-el icon="example [name of icon]"></dk-el>

Size

Default size: 70

<dk-el icon="example" size="100"></dk-el>

Color

The color attribute supports color names, hex values, RGB, and RGBA formats.

<dk-el icon="example" size="100" color="red"></dk-el>

<dk-el icon="example" size="100" color="#FF0000"></dk-el>

<dk-el icon="example" size="100" color="rgb(255,0,0)"></dk-el>

<dk-el icon="example" size="100" color="rgb(255,0,0, 0.5)"></dk-el>

Preload

The preload attribute supports multiple loading modes, allowing you to control when and how icons are rendered.

immediate:

* Default

<dk-el icon="example" size="100" color="red" preload="immediate"></dk-el>
* Not required to add as it is the default

idle:

Loads when the browser is idle, behaving similarly to immediate in most cases.

<dk-el icon="example" size="100" color="red" preload="idle"></dk-el>

hover:

Loads the icon when the user hovers over it.

<dk-el icon="example" size="100" color="red" preload="hover"></dk-el>

viewport:

Loads the icon when it enters the viewport.

<dk-el icon="example" size="100" color="red" preload="viewport"></dk-el>

never:

The icon will not load and must be triggered manually via JavaScript.

<dk-el icon="example" size="100" color="red" preload="never"></dk-el>

to trigger the loading of an icon:

const el = document.querySelector('dk-el[icon="example"]');
el.load();