CDN SDK
Framework Integration
Use the SDK with React, Vue, Svelte, and more
Overview
The SDK works seamlessly with modern JavaScript frameworks. Create reusable icon components for your preferred framework.
Framework Examples
export function Icon({ name, size = 24, color, className }) {
return <i data-icon={name} data-icon-size={size} data-icon-color={color} className={className} />
}<Icon name="home" size={32} color="#3b82f6" />
<Icon name="search" className="hover:scale-110" />The SDK automatically loads icons when React renders them.
<i :data-icon="name" :data-icon-size="size" :data-icon-color="color" :class="className" />props: { name: String, size: Number, color: String, className: String }<Icon name="home" :size="32" color="#3b82f6" />
<Icon name="search" class-name="hover:scale-110" /><script>
export let name, size = 24, color;
</script>
<i data-icon={name} data-icon-size={size} data-icon-color={color} /><Icon name="home" size={32} color="#3b82f6" />
<Icon name="search" />Dynamic Content
The SDK automatically detects icons added dynamically:
// Vanilla JS
const icon = document.createElement('i')
icon.setAttribute('data-icon', 'home')
document.body.appendChild(icon) // Auto-loads!// React
function DynamicIcon() {
const [show, setShow] = useState(false)
return (
<div>
<button onClick={() => setShow(true)}>Show Icon</button>
{show && <i data-icon="home" />}
</div>
)
}<!-- Vue -->
<template>
<div>
<button @click="show = true">Show Icon</button>
<i v-if="show" data-icon="home" />
</div>
</template>TypeScript Support
Add types for better IntelliSense:
declare global {
interface Window {
IconSDK: {
version: string;
hasIcon: (name: string) => boolean;
getAvailableIcons: () => string[];
preload: (icons: string | string[]) => Promise<void>;
load: (element: HTMLElement) => Promise<void>;
clearCache: () => void;
reload: () => void;
init: () => void;
stopObserver: () => void;
startObserver: () => void;
}
}
}
export {}Next Steps
- Best Practices - Preloading, styling, and performance
- JavaScript API - Full API reference
- Troubleshooting - Common issues