O7 Icon

The most efficient Svelte icon library

@o7/icon

The most efficient Svelte icon library,

using SVG sprites to minimize your load speed.

<script>
  import { UserPlus } from '@o7/icon/lucide';
</script>

<UserPlus />

When you first use an icon, it includes the full svg. Any subsequent uses only need this:

<svg class="🟃i" viewBox="0 0 24 24"><use href="#🟃5"></use></svg>

If you don't use the Vite plugin, dev mode will be MUCH slower because Vite has to parse every icon when you import one.

Usage:

Add the plugin to your vite.config.ts:

import { o7Icon } from '@o7/icon/vite';

export default defineConfig({
  plugins: [o7Icon()]
});

This automatically rewrites imports behind the scenes:

import { UserPlus } from '@o7/icon/lucide';
// ↓
import UserPlus from '@o7/icon/lucide/UserPlus';

(icons are automatically updated daily as the source repos are updated)