Get Started with Devkitty
in three simple steps...
1. Add Devkitty to Your Website
Include the Devkitty script in your HTML. This enables the GGDK loader, registry system, and the <dk-el> custom element.
<script src="https://cdn.jsdelivr.net/gh/DevKittyJS/devkittyjs.github.io/public/dist/devkitty.min.js"></script>2. Convert SVGs to GGDK Format
Use the Devkitty Converter to transform your SVG files into a structured GGDK file. This keeps icons optimized, secure, and runtime-efficient.
@meta
format=devkitty
version=1
type=icon
mode=package
iconCount=1
@icons
{
"name": "example",
"viewBox": "0 0 24 24",
"instructions": [
{ "op": "path", "d": "M3 12L12 3L21 12" }
]
}3. Link GGDK & Use <dk-el>
Attach your GGDK file using the ggdk attribute, then render icons anywhere using the <dk-el> element.
<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">
</script>
<dk-el icon="example" size="32" color="red"></dk-el>