Иконки
для продакшна
Нулевой размер бандла. 11 толщин линий.
Глобальная Edge-доставка через CDN.
- 1700+
- иконок
- 3 KB
- рантайм gzip
- 11
- толщин
- 365д
- immutable cache
11 толщин — одна иконка
Один ресурс на сервере, толщина управляется query-параметром. Пропорции и антиалиасинг считает сервер, никакой runtime-обработки на клиенте.
Почему традиционные иконки — это больно
Раздутые бандлы
NPM-пакеты иконок весят мегабайты и замедляют LCP. Наш CDN — это 0 байт в вашем JS.
Засорение DOM
Инлайновые SVG забивают DOM и дублируются при SSR. Mask-image держит код чистым.
Проблема толщины
Стандартные библиотеки дают один вес. Мы даём 11 — от сверхтонких до жирных акцентов.
Как это работает
Квантование stroke
Любое значение `stroke` округляется до шага 0.25 на сервере. Визуально разницы нет, зато `?stroke=1.52` и `?stroke=1.5` делят один кэш-ключ — и клиенты не фрагментируют CDN пустыми комбинациями.
Иммутабельный кэш
Каждый URL версионирован: /1.17.0/heart.svg?stroke=1.5 Браузер кэширует на 365 дней без revalidation-запросов. Для обновления — смена версии в URL. Старые версии не удаляются. Новая версия = новый URL = новый кэш-слот. Ноль инвалидаций, ноль даунтайма.
Поддержка браузеров
Web Components + CSS mask-image. Работает во всех современных браузерах — это baseline с 2019 года.
- Chrome 77+
- Firefox 63+
- Safari 10.1+
- Edge 79+
Интеграция с фреймворками
Готовые сниппеты для любого стека
<script src="https://icon.createui.dev/1.17.0/createui-icons.js" defer></script> <createui-icon name="heart" size="24" stroke="1.5"></createui-icon> <createui-icon name="arrow-right" aria-label="Next"></createui-icon>
import '@createui-dev/icons';
import '@createui-dev/icons/types/react';
export function Button() {
return (
<button>
<createui-icon name="heart" size={20} stroke={1.5} />
Like
</button>
);
} <script setup>
import '@createui-dev/icons';
</script>
<template>
<button>
<createui-icon name="heart" :size="20" :stroke="1.5" />
Like
</button>
</template>
// vite.config.ts: mark <createui-icon> as a custom element
// vue({ template: { compilerOptions: {
// isCustomElement: (tag) => tag === 'createui-icon',
// } } }) <script>
import '@createui-dev/icons';
</script>
<button>
<createui-icon name="heart" size={20} stroke={1.5} />
Like
</button> import '@createui-dev/icons';
import '@createui-dev/icons/types/solid';
export function Button() {
return (
<button>
<createui-icon name="heart" size={20} stroke={1.5} />
Like
</button>
);
} /* Raw URL — for cases where you can't ship JS */
.icon-heart {
display: inline-block;
width: 24px;
height: 24px;
background-color: currentColor;
mask: url('https://icon.createui.dev/1.17.0/heart.svg?stroke=1.5') no-repeat center / contain;
-webkit-mask: url('https://icon.createui.dev/1.17.0/heart.svg?stroke=1.5') no-repeat center / contain;
} Обзор иконок
Сравнение с альтернативами
Размер сравнивается для 50 используемых иконок в продакшне.
| Метрика | lucide-react | @iconify/react | react-icons | CreateUI CDN |
|---|---|---|---|---|
| Размер в бандле | +250 KB | +4 KB + on-demand HTTP | +45 KB (tree-shaken) | 0 KB |
| Рантайм-загрузка | Весь пакет в JS | Async JSON на иконку | Весь пакет в JS | 3 KB gzip + SVG по запросу |
| Толщины линий | 1 | 1 | 1 | 11 |
| DOM-узлы на иконку | 1 SVG + paths | 1 SVG + paths | 1 SVG + paths | 0 (mask-image) |
| Кэширование | — | per-icon HTTP | — | immutable 365 дней |
| Framework-agnostic | React only | React/Vue/Svelte | React only | любой (Web Component) |
Цифры lucide-react — unpkg.com/lucide-react, esm.sh bundle; react-icons — оценка для 50 иконок после tree-shake; @iconify/react — рантайм-обвязка + async-подгрузка. CreateUI CDN — прямое измерение gzipped runtime bundle.
Доклад на конференции · RU
Идея, которая стала проектом
Запись выступления о подходе, который лёг в основу CreateUI Icons.
Частые вопросы
Что будет, если CDN ляжет?
Бандл и SVG-эндпойнты — статика за nginx на одном VDS + HTTP-кэш браузера на 365 дней. Уже загруженные иконки не исчезают при даунтайме. Для паранойи: можно использовать CSS-вариант (пример в блоке «Интеграция»), он читает SVG по URL напрямую и эквивалентен, если веб-компонент не загрузился.
Работает ли с SSR (Next.js, Nuxt, Remix, Astro)?
Да. `<createui-icon>` — custom element, при SSR рендерится как пустой тег, иконка подгружается на клиенте. Mask-image-путь работает в SSR полностью — URL в CSS безопасен для любого рендеринга. Этот сайт собран на Astro и использует оба подхода.
А tree-shaking? Я же не использую все 1700 иконок.
И не нужно. В бандле у вас только рантайм (3 KB gzipped) — он умеет рисовать любую иконку по имени. SVG подгружается только при первом использовании, дальше — из кэша. Платите ровно за то, что показали на экране.
Что если Lucide переименует или удалит иконку?
Каждая версия URL-а иммутабельна — `/1.11.0/foo.svg` не меняется никогда. Даже если Lucide удалит `foo` в 1.12.0, ваш прод, фиксированный на 1.11.0, продолжит работать. Когда обновитесь — пройдёте миграцию один раз.
Можно ли без CDN, всё локально?
Можно. SVG на сервере — плоский CAS (`versions/{ver}/{name}.svg`), Go-сервер в `server/` в репо — self-hostable. Подключаете свой домен в `icon.ts` и получаете тот же URL-формат. Бандл `@createui-dev/icons` из npm работает с любым origin.
Как это лицензируется?
SVG-файлы — лицензия Lucide (ISC). Наш рантайм (`@createui-dev/icons`) — MIT. Инфраструктура CDN — публичная, бесплатная. Код и конфиг открыты на GitHub.
Насколько актуален набор иконок?
Синхронизация с Lucide каждый понедельник 06:00 UTC. Когда выходит новая версия Lucide — автоматически публикуется новая версия нашего пакета с тем же номером. Текущая версия — в футере.
Поддержать проект
CreateUI Icons поддерживается как open-source инфраструктура. CDN работает на личном VDS, домен и трафик оплачиваются из кармана. Если библиотека решает вашу задачу — поддержите, чтобы она продолжала работать. Одна чашка кофе ≈ месяц домена и трафика.
- Версия на CDN
- v1.16.0
- npm latest (@createui-dev/icons)
- v1.16.0
- Последняя
- 5 ч назад
- Следующая
- через 7 д