@dubium/icons 0.0.2-alpha.3 → 0.0.2-alpha.4

package/README.md

@@ -1,101 +1,338 @@
+# Способы использования иконок
 
+В `@dubium/icons` есть два способа использовать иконки:
 
-## Vite: только используемые SPA-иконки в dist
+1. напрямую импортировать React-компонент;
+2. использовать строковое имя через Vite plugin.
 
-Для SPA рекомендуется подключить compile-time plugin:
+Если сборщик проекта — **Vite**, доступны оба способа.
+
+Если используется **другой сборщик**, используйте прямой импорт.
+
+---
+
+## Содержание
+
+- [Способы использования иконок](#способы-использования-иконок)
+    - [Содержание](#содержание)
+    - [1. Прямой импорт](#1-прямой-импорт)
+        - [Когда использовать](#когда-использовать)
+    - [2. Сборщик Vite](#2-сборщик-vite)
+        - [Подключение plugin](#подключение-plugin)
+        - [Что делает plugin](#что-делает-plugin)
+        - [Зачем нужен registry](#зачем-нужен-registry)
+        - [Cache](#cache)
+        - [Строковые имена в конфигурациях](#строковые-имена-в-конфигурациях)
+        - [Прямой импорт и Vite API можно использовать вместе](#прямой-импорт-и-vite-api-можно-использовать-вместе)
+    - [3. Другие сборщики](#3-другие-сборщики)
+    - [4. Что выбрать](#4-что-выбрать)
+        - [Сборщик Vite](#сборщик-vite)
+        - [Другой сборщик](#другой-сборщик)
+- [Коротко](#коротко)
+
+---
+
+## 1. Прямой импорт
+
+Если нужная иконка известна прямо в коде, импортируйте её как обычный React-компонент:
+
+```tsx
+import { UserIcon } from "@dubium/icons/icons"
+import { Icon } from "@dubium/icons/icon"
+
+export const Profile = () => <Icon name={UserIcon} />
+```
+
+Сборщик видит прямой импорт `UserIcon` и добавляет в build нужную иконку.
+
+Вся коллекция иконок для этого не подключается.
+
+Этот вариант не зависит от Vite и подходит для других сборщиков.
+
+### Когда использовать
+
+Используйте прямой импорт, если иконка заранее известна в коде:
+
+```tsx
+import { SearchIcon } from "@dubium/icons/icons"
+import { Icon } from "@dubium/icons/icon"
+
+return <Icon name={SearchIcon} />
+```
+
+Для такого использования `dubiumIcons()` не нужен.
+
+---
+
+## 2. Сборщик Vite
+
+Если проект собирается через Vite, кроме прямого импорта можно использовать иконки по строковому имени:
+
+```tsx
+<Icon name="User" />
+```
+
+Для этого используется `@dubium/icons/vite`.
+
+### Подключение plugin
+
+Добавьте `dubiumIcons()` в `vite.config.ts`:
 
 ```ts
-// vite.config.ts
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
-import { dubiumIcons } from "@dubium/icons/vite"
+
+import { dubiumIcons } from "@dubium/icons/vite/plugin"
 
 export default defineConfig({
-	plugins: [
-		dubiumIcons(),
-		react(),
-	],
+	plugins: [dubiumIcons(), react()],
 })
 ```
 
-После этого API остаётся прежним:
+После этого можно использовать:
 
 ```tsx
-import { Icon } from "@dubium/icons/spa"
+<Icon name="User" />
+<Icon name="Search" />
+```
+
+### Что делает plugin
 
-export const Header = () => (
-	<>
-		<Icon name="User" />
-		<Icon name="Search" />
-	</>
-)
+Plugin **не сканирует всю коллекцию иконок**.
+
+Он проходит по исходникам приложения и ищет используемые строковые имена.
+
+Например:
+
+```tsx
+<Icon name="User" />
+<Icon name="Search" />
+```
+
+Plugin найдёт только **статически указанные** имена:
+
+```text
+User
+Search
+```
+
+Такое значение можно определить во время сборки:
+
+```tsx
+<Icon name="User" /> // найдёт
+```
+
+А конкретное значение здесь заранее неизвестно:
+
+```tsx
+<Icon name={iconName} /> // заранее определить не сможет
 ```
 
-`@dubium/icons/vite` заранее сканирует `src`, создаёт virtual registry и генерирует
-только такие lazy imports:
+Для найденных статических имён plugin создаёт registry.
+
+Упрощённо:
 
 ```ts
-{
-	User: () => import("@dubium/icons/icons/User"),
+export const iconRegistry = {
 	Search: () => import("@dubium/icons/icons/Search"),
+	User: () => import("@dubium/icons/icons/User"),
 }
 ```
 
-Поэтому остальные иконки из npm-пакета не попадают в `dist` consuming-приложения.
+Если другие иконки из библиотеки в проекте не используются, в registry они не попадут.
 
-### Динамический name
+### Зачем нужен registry
 
-Значение вида `<Icon name={item.icon} />` невозможно определить на этапе сборки.
-Перечислите допустимые runtime-иконки вручную:
+При прямом импорте сборщик уже знает, какая иконка нужна:
 
 ```ts
-dubiumIcons({
-	include: ["User", "Search", "Settings"],
-})
+import { UserIcon } from "@dubium/icons/icons"
+```
+
+Но здесь:
+
+```tsx
+<Icon name="User" />
 ```
 
-По умолчанию плагин предупреждает о динамических `name`. Чтобы делать это ошибкой сборки:
+`"User"` — обычная строка.
+
+Plugin связывает строковое имя с нужным модулем:
+
+```text
+User → @dubium/icons/icons/User
+```
+
+Для каждой найденной иконки создаётся отдельный dynamic `import()`:
 
 ```ts
-dubiumIcons({
-	include: ["User", "Search"],
-	strictDynamicNames: true,
-})
+return () => import("@dubium/icons/icons/User")
 ```
 
-По умолчанию сканируется каталог `src`. Для монорепозитория или другой структуры:
+Поэтому строковый API не требует подключать всю коллекцию иконок.
+
+### Cache
+
+После загрузки иконка сохраняется в памяти приложения.
+
+Если `User` уже был загружен, при следующем использовании:
+
+```tsx
+<Icon name="User" />
+```
+
+готовый React-компонент берётся из cache.
+
+Важно не путать:
+
+- **registry** хранит информацию о том, как загрузить иконку;
+- **cache** хранит уже загруженный React-компонент.
+
+### Строковые имена в конфигурациях
+
+Строковый API удобен, когда имя иконки находится в конфигурации.
+
+Чтобы plugin искал такие значения, укажите название свойства в `propertyNames`:
 
 ```ts
 dubiumIcons({
-	scan: ["src", "app", "../shared/src"],
+	propertyNames: ["iconName"],
 })
 ```
 
+После этого:
 
+```ts
+const menu = [
+	{
+		title: "Profile",
+		iconName: "User",
+	},
+]
+```
 
-## Lightweight 5-icon test build
+статическое значение `User` будет найдено и добавлено в registry.
 
-This archive intentionally keeps only the first five source SVG files so local testing stays fast:
+### Прямой импорт и Vite API можно использовать вместе
 
-- `123.svg` → `Icon123Icon`
-- `24-hours.svg` → `Icon24HoursIcon`
-- `2fa.svg` → `Icon2faIcon`
-- `360-view.svg` → `Icon360ViewIcon`
-- `360.svg` → `Icon360Icon`
+Если сборщик — Vite, не обязательно выбирать только один способ.
 
-Bundler-friendly container usage:
+Часть иконок можно импортировать напрямую:
 
 ```tsx
-import { Icon } from "@dubium/icons/container"
-import { Icon360Icon } from "@dubium/icons/icons/Icon360Icon"
+import { CompanyLogoIcon } from "@dubium/icons/icons"
+import { Icon as BaseIcon } from "@dubium/icons/icon"
 
-export function Example() {
-	return <Icon icon={Icon360Icon} size={24} />
-}
+return <BaseIcon name={CompanyLogoIcon} />
+```
+
+а часть использовать по строковому имени:
+
+```tsx
+<Icon name="User" />
+```
+
+Оба способа добавляют только необходимые приложению иконки, но делают это по-разному.
+
+|                      | Прямой импорт              | Vite API                   |
+| -------------------- | -------------------------- | -------------------------- |
+| Использование        | `<Icon name={UserIcon} />` | `<Icon name="User" />`     |
+| Как находится иконка | обычный import             | plugin сканирует исходники |
+| Registry             | не нужен                   | создаётся автоматически    |
+| Lazy loading         | нет                        | dynamic `import()`         |
+| Нужен Vite           | нет                        | да                         |
+
+---
+
+## 3. Другие сборщики
+
+Если проект использует не Vite, а другой сборщик, используйте прямой импорт:
+
+```tsx
+import { UserIcon } from "@dubium/icons/icons"
+import { Icon } from "@dubium/icons/icon"
+
+return <Icon name={UserIcon} />
+```
+
+Для этого варианта не нужны:
+
+- `dubiumIcons()`;
+- Vite plugin;
+- compile-time registry.
+
+Иконка импортируется как обычный React-компонент, а сборщик добавляет её в build стандартным способом.
+
+Строковый API:
+
+```tsx
+<Icon name="User" />
+```
+
+требует Vite plugin, поэтому с другими сборщиками этот вариант не используется.
+
+---
+
+## 4. Что выбрать
+
+### Сборщик Vite
+
+Доступны оба варианта.
+
+Если иконка известна прямо в коде:
+
+```tsx
+import { UserIcon } from "@dubium/icons/icons"
+import { Icon } from "@dubium/icons/icon"
+
+return <Icon name={UserIcon} />
+```
+
+используйте прямой импорт.
+
+Если нужно работать со строковым именем:
+
+```tsx
+<Icon name="User" />
 ```
 
-The older short subpath remains compatible too:
+используйте Vite API.
+
+### Другой сборщик
+
+Используйте прямой импорт:
+
+```tsx
+import { UserIcon } from "@dubium/icons/icons"
+import { Icon } from "@dubium/icons/icon"
+
+return <Icon name={UserIcon} />
+```
+
+---
+
+# Коротко
+
+| Сборщик         | Прямой импорт | Строковый API |
+| --------------- | ------------- | ------------- |
+| Vite            | ✅            | ✅            |
+| Другие сборщики | ✅            | ❌            |
+
+Для Vite:
+
+```tsx
+// Прямой импорт
+<Icon name={UserIcon} />
+
+// Или строковый API
+<Icon name="User" />
+```
+
+Для других сборщиков:
 
 ```tsx
-import Icon360Icon from "@dubium/icons/icons/Icon360"
+import { UserIcon } from "@dubium/icons/icons"
+import { Icon } from "@dubium/icons/icon"
+
+return <Icon name={UserIcon} />
 ```

package/dist/collection/AdjustmentsPlusIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IIconComponentProps } from "./types.js";
+export declare const AdjustmentsPlusIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AdjustmentsPlusIcon;

package/dist/collection/{Icon123Icon.js → AdjustmentsPlusIcon.js}

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-//#region src/icons/collection/Icon123Icon.tsx
+//#region src/icons/collection/AdjustmentsPlusIcon.tsx
 var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__ */ e("svg", {
 	...n,
 	fill: "none",
@@ -11,8 +11,8 @@ var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: "2",
-		d: "m3 10 2-2v8m4-8h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h3m4-8h2.5A1.5 1.5 0 0 1 21 9.5v1a1.5 1.5 0 0 1-1.5 1.5m0 0H18m1.5 0a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5H17"
+		d: "M6 12a2 2 0 1 1 0-4m0 4a2 2 0 1 0 0-4m0 4v8M6 8V4m7.958 11.592A2 2 0 1 0 12 18v2m0-16v10m6-5a2 2 0 0 1 0-4m0 4a2 2 0 0 0 0-4m0 4v3m0-7V4m-2 15h6m-3-3v6"
 	})
 });
 //#endregion
-export { t as Icon123Icon, t as default };
+export { t as AdjustmentsPlusIcon, t as default };

package/dist/collection/AdjustmentsQuestionIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IIconComponentProps } from "./types.js";
+export declare const AdjustmentsQuestionIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AdjustmentsQuestionIcon;

package/dist/collection/AdjustmentsQuestionIcon.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/icons/collection/AdjustmentsQuestionIcon.tsx
+var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__ */ e("svg", {
+	...n,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	width: "100%",
+	height: "100%",
+	children: /* @__PURE__ */ e("path", {
+		stroke: t,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		d: "M6 12a2 2 0 1 1 0-4m0 4a2 2 0 1 0 0-4m0 4v8M6 8V4m7.577 10.77a2 2 0 1 0 .117 2.295M12 4v10m7 8v.01M19 19a2.003 2.003 0 0 0 .914-3.782 1.98 1.98 0 0 0-2.414.483M12 18v2m6-11a2 2 0 0 1 0-4m0 4a2 2 0 0 0 0-4m0 4v2m0-6V4"
+	})
+});
+//#endregion
+export { t as AdjustmentsQuestionIcon, t as default };

package/dist/collection/AlarmPlusFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IIconComponentProps } from "./types.js";
+export declare const AlarmPlusFilledIcon: ({ color, secondaryColor, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AlarmPlusFilledIcon;

package/dist/collection/AlarmPlusFilledIcon.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/icons/collection/AlarmPlusFilledIcon.tsx
+var n = ({ color: n = "var(--icon-color, currentColor)", secondaryColor: r = "var(--icon-secondary-color, currentColor)", ...i }) => /* @__PURE__ */ t("svg", {
+	...i,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	width: "100%",
+	height: "100%",
+	children: [
+		/* @__PURE__ */ e("path", {
+			fill: n,
+			d: "M16 6.072a8 8 0 1 1-11.995 7.213L4 13l.005-.285A8 8 0 0 1 16 6.072M12 10a1 1 0 0 0-1 1v1h-1l-.117.007A1 1 0 0 0 10 14h1v1l.007.117A1 1 0 0 0 13 15v-1h1l.117-.007A1 1 0 0 0 14 12h-1v-1l-.007-.117A1 1 0 0 0 12 10"
+		}),
+		/* @__PURE__ */ e("path", {
+			fill: n,
+			d: "M6.412 3.191a1 1 0 0 1 1.273 1.54l-.097.08-2.75 2a1 1 0 0 1-1.273-1.54l.097-.08zm9.779.221a1 1 0 0 1 1.291-.288l.106.067 2.75 2a1 1 0 0 1-1.07 1.685l-.106-.067-2.75-2a1 1 0 0 1-.221-1.397"
+		}),
+		/* @__PURE__ */ e("path", {
+			stroke: r,
+			d: "M16 6.072a8 8 0 1 1-11.995 7.213L4 13l.005-.285A8 8 0 0 1 16 6.072ZM12 10a1 1 0 0 0-1 1v1h-1l-.117.007A1 1 0 0 0 10 14h1v1l.007.117A1 1 0 0 0 13 15v-1h1l.117-.007A1 1 0 0 0 14 12h-1v-1l-.007-.117A1 1 0 0 0 12 10Z"
+		}),
+		/* @__PURE__ */ e("path", {
+			stroke: r,
+			d: "M6.412 3.191a1 1 0 0 1 1.273 1.54l-.097.08-2.75 2a1 1 0 0 1-1.273-1.54l.097-.08zm9.779.221a1 1 0 0 1 1.291-.288l.106.067 2.75 2a1 1 0 0 1-1.07 1.685l-.106-.067-2.75-2a1 1 0 0 1-.221-1.397Z"
+		})
+	]
+});
+//#endregion
+export { n as AlarmPlusFilledIcon, n as default };

package/dist/collection/AlarmSnoozeFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IIconComponentProps } from "./types.js";
+export declare const AlarmSnoozeFilledIcon: ({ color, secondaryColor, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AlarmSnoozeFilledIcon;

package/dist/collection/AlarmSnoozeFilledIcon.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/icons/collection/AlarmSnoozeFilledIcon.tsx
+var n = ({ color: n = "var(--icon-color, currentColor)", secondaryColor: r = "var(--icon-secondary-color, currentColor)", ...i }) => /* @__PURE__ */ t("svg", {
+	...i,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	width: "100%",
+	height: "100%",
+	children: [
+		/* @__PURE__ */ e("path", {
+			fill: n,
+			d: "M16 6.072a8 8 0 1 1-11.995 7.213L4 13l.005-.285A8 8 0 0 1 16 6.072M14 10h-4l-.117.007A1 1 0 0 0 9 11l.007.117A1 1 0 0 0 10 12h1.584l-2.291 2.293-.076.084C8.703 15.014 9.147 16 10 16h4l.117-.007A1 1 0 0 0 15 15l-.007-.117A1 1 0 0 0 14 14h-1.586l2.293-2.293.076-.084c.514-.637.07-1.623-.783-1.623"
+		}),
+		/* @__PURE__ */ e("path", {
+			fill: n,
+			d: "M6.412 3.191a1 1 0 0 1 1.273 1.54l-.097.08-2.75 2a1 1 0 0 1-1.273-1.54l.097-.08zm9.779.221a1 1 0 0 1 1.291-.288l.106.067 2.75 2a1 1 0 0 1-1.07 1.685l-.106-.067-2.75-2a1 1 0 0 1-.221-1.397"
+		}),
+		/* @__PURE__ */ e("path", {
+			stroke: r,
+			d: "M16 6.072a8 8 0 1 1-11.995 7.213L4 13l.005-.285A8 8 0 0 1 16 6.072ZM14 10h-4l-.117.007A1 1 0 0 0 9 11l.007.117A1 1 0 0 0 10 12h1.584l-2.291 2.293-.076.084C8.703 15.014 9.147 16 10 16h4l.117-.007A1 1 0 0 0 15 15l-.007-.117A1 1 0 0 0 14 14h-1.586l2.293-2.293.076-.084c.514-.637.07-1.623-.783-1.623Z"
+		}),
+		/* @__PURE__ */ e("path", {
+			stroke: r,
+			d: "M6.412 3.191a1 1 0 0 1 1.273 1.54l-.097.08-2.75 2a1 1 0 0 1-1.273-1.54l.097-.08zm9.779.221a1 1 0 0 1 1.291-.288l.106.067 2.75 2a1 1 0 0 1-1.07 1.685l-.106-.067-2.75-2a1 1 0 0 1-.221-1.397Z"
+		})
+	]
+});
+//#endregion
+export { n as AlarmSnoozeFilledIcon, n as default };

package/dist/collection/{Icon360ViewIcon.d.ts → AlarmSnoozeIcon.d.ts}

@@ -1,3 +1,3 @@
 import type { IIconComponentProps } from "./types.js";
-export declare const Icon360ViewIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
-export default Icon360ViewIcon;
+export declare const AlarmSnoozeIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AlarmSnoozeIcon;

package/dist/collection/{Icon360Icon.js → AlarmSnoozeIcon.js}

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-//#region src/icons/collection/Icon360Icon.tsx
+//#region src/icons/collection/AlarmSnoozeIcon.tsx
 var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__ */ e("svg", {
 	...n,
 	fill: "none",
@@ -11,8 +11,8 @@ var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: "2",
-		d: "M17 15.33c2.41-.72 4-1.94 4-3.33 0-2.21-4.03-4-9-4s-9 1.79-9 4 4.03 4 9 4m-3 3 3-3-3-3"
+		d: "M10 11h4l-4 4h4M7 4 4.25 6M17 4l2.75 2M5 13a7 7 0 1 0 14 0 7 7 0 0 0-14 0"
 	})
 });
 //#endregion
-export { t as Icon360Icon, t as default };
+export { t as AlarmSnoozeIcon, t as default };

package/dist/collection/AlbumIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IIconComponentProps } from "./types.js";
+export declare const AlbumIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AlbumIcon;

package/dist/collection/{Icon24HoursIcon.js → AlbumIcon.js}

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-//#region src/icons/collection/Icon24HoursIcon.tsx
+//#region src/icons/collection/AlbumIcon.tsx
 var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__ */ e("svg", {
 	...n,
 	fill: "none",
@@ -11,8 +11,8 @@ var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: "2",
-		d: "M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8 8 0 0 0 3 5.24M11 15h2a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2m3-6v2a1 1 0 0 0 1 1h1m1-3v6"
+		d: "M12 4v7l2-2 2 2V4M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"
 	})
 });
 //#endregion
-export { t as Icon24HoursIcon, t as default };
+export { t as AlbumIcon, t as default };

package/dist/collection/AlbumOffIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IIconComponentProps } from "./types.js";
+export declare const AlbumOffIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AlbumOffIcon;

package/dist/collection/AlbumOffIcon.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/icons/collection/AlbumOffIcon.tsx
+var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__ */ e("svg", {
+	...n,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	width: "100%",
+	height: "100%",
+	children: /* @__PURE__ */ e("path", {
+		stroke: t,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		d: "M8 4h10a2 2 0 0 1 2 2v10m-.581 3.41c-.362.364-.864.59-1.419.59H6a2 2 0 0 1-2-2V6c0-.552.224-1.052.585-1.413M12 4v4m1.503 1.497L14 9l2 2V4M3 3l18 18"
+	})
+});
+//#endregion
+export { t as AlbumOffIcon, t as default };

package/dist/collection/AlertCircleFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IIconComponentProps } from "./types.js";
+export declare const AlertCircleFilledIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AlertCircleFilledIcon;

package/dist/collection/AlertCircleFilledIcon.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/icons/collection/AlertCircleFilledIcon.tsx
+var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__ */ e("svg", {
+	...n,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	width: "100%",
+	height: "100%",
+	children: /* @__PURE__ */ e("path", {
+		fill: t,
+		d: "M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34M12.01 15l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986zM12 7a1 1 0 0 0-.993.883L11 8v4l.007.117a1 1 0 0 0 1.986 0L13 12V8l-.007-.117A1 1 0 0 0 12 7"
+	})
+});
+//#endregion
+export { t as AlertCircleFilledIcon, t as default };

package/dist/collection/{Icon24HoursIcon.d.ts → AlertCircleIcon.d.ts}

@@ -1,3 +1,3 @@
 import type { IIconComponentProps } from "./types.js";
-export declare const Icon24HoursIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
-export default Icon24HoursIcon;
+export declare const AlertCircleIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AlertCircleIcon;

package/dist/collection/{Icon2faIcon.js → AlertCircleIcon.js}

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-//#region src/icons/collection/Icon2faIcon.tsx
+//#region src/icons/collection/AlertCircleIcon.tsx
 var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__ */ e("svg", {
 	...n,
 	fill: "none",
@@ -11,8 +11,8 @@ var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: "2",
-		d: "M7 16H3l3.47-4.66A2 2 0 1 0 3 9.8m7 6.2V8h4m-4 4h3m4 4v-6a2 2 0 1 1 4 0v6m-4-3h4"
+		d: "M12 8v4m0 4h.01M3 12a9 9 0 1 0 18.001 0A9 9 0 0 0 3 12"
 	})
 });
 //#endregion
-export { t as Icon2faIcon, t as default };
+export { t as AlertCircleIcon, t as default };

package/dist/collection/AlertHexagonIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IIconComponentProps } from "./types.js";
+export declare const AlertHexagonIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AlertHexagonIcon;

package/dist/collection/AlertHexagonIcon.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/icons/collection/AlertHexagonIcon.tsx
+var t = ({ color: t = "var(--icon-color, currentColor)", ...n }) => /* @__PURE__ */ e("svg", {
+	...n,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	width: "100%",
+	height: "100%",
+	children: /* @__PURE__ */ e("path", {
+		stroke: t,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		d: "M12 8v4m0 4h.01m7.865-9.73c.7.398 1.13 1.143 1.125 1.948v7.284c0 .809-.443 1.555-1.158 1.948l-6.75 4.27a2.27 2.27 0 0 1-2.184 0l-6.75-4.27A2.23 2.23 0 0 1 3 15.502V8.217c0-.81.443-1.554 1.158-1.947l6.75-3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98z"
+	})
+});
+//#endregion
+export { t as AlertHexagonIcon, t as default };

package/dist/collection/AlignBoxBottomRightFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IIconComponentProps } from "./types.js";
+export declare const AlignBoxBottomRightFilledIcon: ({ color, ...props }: IIconComponentProps) => import("react").JSX.Element;
+export default AlignBoxBottomRightFilledIcon;