@particle-network/icons 0.0.2 → 0.0.4

package/README.md

@@ -1,7 +1,304 @@
-## 如何添加 icon
+# @particle-network/icons
+
+<div align="center">
+  <p align="center">
+    <strong>UniversalX Design System - 跨平台图标库</strong>
+  </p>
+  
+  <p align="center">
+    为 React 和 React Native 提供统一的 SVG 图标组件
+  </p>
+
+  <p align="center">
+    <a href="https://www.npmjs.com/package/@particle-network/icons">
+      <img src="https://img.shields.io/npm/v/@particle-network/icons.svg" alt="npm version" />
+    </a>
+    <img src="https://img.shields.io/npm/l/@particle-network/icons.svg" alt="license" />
+    <img src="https://img.shields.io/badge/icons-196+-blue.svg" alt="icon count" />
+  </p>
+</div>
+
+## ✨ 特性
+
+- 🎨 **统一设计** - 一套图标，多端使用
+- 📦 **按需加载** - 支持 Tree Shaking，优化体积
+- 🔧 **自动生成** - 从 SVG 源文件自动生成组件
+- 🛡 **TypeScript** - 完整的类型定义
+- 🎯 **多平台支持** - 同时支持 Web 和 Native
+- ⚡ **高性能** - 优化的 SVG 渲染
+
+## 📦 安装
+
+```bash
+# npm
+npm install @particle-network/icons
+
+# yarn
+yarn add @particle-network/icons
+
+# pnpm
+pnpm add @particle-network/icons
+```
+
+## 🚀 快速开始
+
+### React Web
+
+```tsx
+// 导入单个图标
+import { UserIcon } from '@particle-network/icons/web/UserIcon';
+
+// 或从主入口导入
+import { UserIcon, SettingsIcon, SearchIcon } from '@particle-network/icons/web';
+
+function App() {
+  return (
+    <div>
+      <UserIcon size={24} color='#1890ff' />
+      <SettingsIcon size={32} color='#52c41a' />
+      <SearchIcon size={20} color='#666' />
+    </div>
+  );
+}
+```
+
+### React Native
+
+```tsx
+// 导入单个图标
+import { UserIcon } from '@particle-network/icons/native/UserIcon';
+
+// 或从主入口导入
+import { UserIcon, SettingsIcon, SearchIcon } from '@particle-network/icons/native';
+
+function App() {
+  return (
+    <View>
+      <UserIcon size={24} color='#1890ff' />
+      <SettingsIcon size={32} color='#52c41a' />
+      <SearchIcon size={20} color='#666' />
+    </View>
+  );
+}
+```
+
+### 核心组件（自定义渲染）
+
+```tsx
+import { icons } from '@particle-network/icons/core';
+
+// 获取图标的 SVG 路径数据
+const userIconPath = icons.user.path;
+const userIconViewBox = icons.user.viewBox;
+```
+
+## 📚 API
+
+### 图标组件 Props
+
+| 属性          | 类型               | 默认值         | 描述                     |
+| ------------- | ------------------ | -------------- | ------------------------ |
+| `size`        | `number \| string` | `24`           | 图标大小                 |
+| `color`       | `string`           | `currentColor` | 图标颜色                 |
+| `strokeWidth` | `number`           | `2`            | 线条宽度（仅限线性图标） |
+| `className`   | `string`           | -              | CSS 类名（仅 Web）       |
+| `style`       | `object`           | -              | 样式对象                 |
+
+### 使用示例
+
+```tsx
+// 基础用法
+<UserIcon />
+
+// 自定义大小和颜色
+<UserIcon size={32} color="#1890ff" />
+
+// 响应式大小
+<UserIcon size="2em" />
+
+// 自定义样式
+<UserIcon
+  size={24}
+  style={{ marginRight: 8, verticalAlign: 'middle' }}
+/>
+
+// 线性图标自定义线宽
+<SearchIcon strokeWidth={1.5} />
+```
+
+## 🎨 可用图标
+
+本图标库包含 196+ 个精心设计的图标，覆盖以下分类：
+
+### 常用图标
+
+- User, Home, Settings, Search, Menu
+- Close, Check, Plus, Minus, Edit
+- Delete, Copy, Download, Upload, Share
+
+### 导航图标
+
+- ArrowLeft, ArrowRight, ArrowUp, ArrowDown
+- ChevronLeft, ChevronRight, ChevronUp, ChevronDown
+- Back, Forward, Refresh, MoreHorizontal, MoreVertical
+
+### 媒体图标
+
+- Play, Pause, Stop, Forward, Rewind
+- Volume, VolumeOff, Mic, MicOff, Camera
+
+### 社交图标
+
+- Like, Comment, Share, Bookmark, Flag
+- Star, Heart, ThumbsUp, ThumbsDown
+
+### 更多分类...
+
+查看[完整图标列表](https://ux-design.minijoy.work/icons)
+
+## 🔧 开发指南
+
+### 添加新图标
+
+1. **准备 SVG 文件**
+
+   将 SVG 文件放置在 `packages/icons/svg` 目录中，使用 kebab-case 命名：
+
+   ```
+   packages/icons/svg/
+   ├── user-icon.svg
+   ├── settings-icon.svg
+   └── new-icon.svg  <-- 新添加的图标
+   ```
+
+2. **生成图标组件**
+
+   在 `packages/icons` 目录下运行：
 
-1. 在`packages/icons/svg` 中添加 svg 资源，命名为 kebab-case
-1. 在`packages/icons` 中运行
    ```bash
+   yarn generate-icons
    yarn build
    ```
+
+3. **使用新图标**
+
+   ```tsx
+   import { NewIcon } from '@particle-network/icons/web';
+
+   <NewIcon size={24} color='#1890ff' />;
+   ```
+
+### SVG 规范
+
+为确保图标质量和一致性，请遵循以下规范：
+
+- **尺寸**: 24x24px 视窗
+- **线宽**: 2px（可通过 strokeWidth 调整）
+- **颜色**: 使用 currentColor，支持动态颜色
+- **路径**: 优化路径，移除不必要的属性
+- **命名**: 使用 kebab-case 命名
+
+### 自定义构建
+
+```bash
+# 仅生成图标组件
+yarn generate-icons
+
+# 构建库
+yarn build
+
+# 快速构建（跳过图标生成）
+yarn build:fast
+```
+
+## 📁 项目结构
+
+```
+packages/icons/
+├── svg/                 # SVG 源文件
+│   ├── user.svg
+│   ├── settings.svg
+│   └── ...
+├── src/
+│   ├── core/           # 核心图标数据
+│   ├── web/            # React Web 组件
+│   └── native/         # React Native 组件
+├── scripts/
+│   ├── generate-icons.ts   # 图标生成脚本
+│   └── templates.ts        # 组件模板
+└── dist/               # 构建输出
+```
+
+## 🎯 最佳实践
+
+### 性能优化
+
+```tsx
+// ✅ 推荐：按需导入
+import { UserIcon } from '@particle-network/icons/web/UserIcon';
+
+// ❌ 避免：导入整个库
+import * as Icons from '@particle-network/icons/web';
+```
+
+### 动态图标
+
+```tsx
+import { UserIcon, SettingsIcon, HomeIcon } from '@particle-network/icons/web';
+
+const iconMap = {
+  user: UserIcon,
+  settings: SettingsIcon,
+  home: HomeIcon,
+};
+
+function DynamicIcon({ name, ...props }) {
+  const Icon = iconMap[name];
+  return Icon ? <Icon {...props} /> : null;
+}
+
+// 使用
+<DynamicIcon name='user' size={24} color='#1890ff' />;
+```
+
+### 主题集成
+
+```tsx
+// 与主题系统集成
+import { useTheme } from '@particle-network/ui-react';
+import { UserIcon } from '@particle-network/icons/web';
+
+function ThemedIcon() {
+  const { colors } = useTheme();
+
+  return <UserIcon color={colors.primary} size={24} />;
+}
+```
+
+## 🤝 贡献
+
+欢迎贡献新图标！请确保：
+
+1. SVG 符合设计规范
+2. 命名清晰、语义化
+3. 提供图标预览
+4. 更新文档
+
+查看[贡献指南](../../CONTRIBUTING.md)了解更多。
+
+## 📄 许可证
+
+MIT © [UniversalX Team](https://github.com/particle-network)
+
+## 🔗 相关链接
+
+- [图标预览](https://ux-design.minijoy.work/icons)
+- [GitHub 仓库](https://gitlab.minijoy.work/frontend/ux-design)
+- [NPM 包](https://www.npmjs.com/package/@particle-network/icons)
+- [更新日志](./CHANGELOG.md)
+
+---
+
+<div align="center">
+  Made with ❤️ by UniversalX Team
+</div>

package/dist/core/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type UXColor } from '@particle-network/ui-shared';
+export declare const isThemeColor: (color: string) => boolean;
+export type IconColor = UXColor | 'currentColor';
+interface IconsContextType {
+    theme: 'light' | 'dark';
+    bullishColor?: string;
+    bearishColor?: string;
+    getColor: (colorKey: UXColor) => string;
+}
+export declare const useIconsContext: () => IconsContextType;
+interface IconsProviderProps {
+    children: React.ReactNode;
+    theme?: 'light' | 'dark';
+    bullishColor?: string;
+    bearishColor?: string;
+}
+export declare const IconsProvider: ({ children, theme, bullishColor, bearishColor }: IconsProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/index.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { colorMap } from "@particle-network/ui-shared";
+const isThemeColor = (color)=>Object.keys(colorMap.light).includes(color);
+const IconsContext = /*#__PURE__*/ createContext({
+    theme: 'light',
+    getColor: ()=>''
+});
+const useIconsContext = ()=>useContext(IconsContext);
+const IconsProvider = ({ children, theme = 'light', bullishColor, bearishColor })=>{
+    const getColor = (colorKey)=>{
+        if ('bullish' === colorKey && bullishColor) return bullishColor;
+        if ('bearish' === colorKey && bearishColor) return bearishColor;
+        return colorMap[theme][colorKey] ?? colorKey;
+    };
+    return /*#__PURE__*/ jsx(IconsContext.Provider, {
+        value: {
+            theme,
+            getColor
+        },
+        children: children
+    });
+};
+export { IconsProvider, isThemeColor, useIconsContext };

package/dist/native/ActivityIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconColor } from '../core';
+import { type IconProps } from './types';
+declare const ActivityIcon: {
+    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ActivityIcon;

package/dist/native/ActivityIcon.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import external_react_native_svg_default, { Path } from "react-native-svg";
+import { isThemeColor, useIconsContext } from "../core/index.js";
+const ActivityIcon_ActivityIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
+    const { getColor } = useIconsContext();
+    const _color = isThemeColor(color) ? getColor(color) : color;
+    const fill = props.fill || _color;
+    const stroke = props.stroke || _color;
+    return /*#__PURE__*/ jsx(external_react_native_svg_default, {
+        width: width,
+        height: height,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M10.6154 22C10.2692 22 9.99231 21.7857 9.92308 21.4286L7.98462 12.7143H3.69231C3.27692 12.7143 3 12.4286 3 12C3 11.5714 3.27692 11.2857 3.69231 11.2857H8.53846C8.88462 11.2857 9.16154 11.5 9.23077 11.8571L10.4769 17.5L12.6923 2.57143C12.7615 2.28571 13.0385 2 13.3846 2C13.7308 2 14.0077 2.21429 14.0769 2.57143L16.0154 11.2857H20.3077C20.7231 11.2857 21 11.5714 21 12C21 12.4286 20.7231 12.7143 20.3077 12.7143H15.4615C15.1154 12.7143 14.8385 12.5 14.7692 12.1429L13.5231 6.5L11.3077 21.4286C11.2385 21.7143 10.9615 22 10.6154 22Z",
+            fill: fill,
+            stroke: stroke,
+            strokeWidth: 0.15
+        })
+    });
+};
+ActivityIcon_ActivityIcon.displayName = 'ActivityIcon|activity';
+const ActivityIcon = ActivityIcon_ActivityIcon;
+export { ActivityIcon as default };

package/dist/native/AlertIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconColor } from '../core';
+import { type IconProps } from './types';
+declare const AlertIcon: {
+    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AlertIcon;

package/dist/native/AlertIcon.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import external_react_native_svg_default, { Path } from "react-native-svg";
+import { isThemeColor, useIconsContext } from "../core/index.js";
+const AlertIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
+    const { getColor } = useIconsContext();
+    const _color = isThemeColor(color) ? getColor(color) : color;
+    const fill = props.fill || _color;
+    const stroke = props.stroke || _color;
+    return /*#__PURE__*/ jsx(external_react_native_svg_default, {
+        width: width,
+        height: height,
+        viewBox: "0 0 16 16",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M13.1323 10.8919L12.3002 9.13705V6.63382C12.3002 4.98221 11.1629 3.48543 9.52637 2.89189C9.4709 2.1693 8.80518 1.60156 8.00078 1.60156C7.19638 1.60156 6.5584 2.1693 6.47519 2.89189C4.81091 3.48543 3.70138 4.98221 3.70138 6.63382V9.13705L2.86924 10.8919C2.75829 11.1241 2.78603 11.3822 2.92472 11.5887C3.06341 11.7951 3.31305 11.9241 3.59043 11.9241H12.4111C12.6885 11.9241 12.9382 11.7951 13.0768 11.5887C13.2155 11.3822 13.2433 11.0983 13.1323 10.8919ZM3.64591 11.15L4.53353 9.29188V6.63382C4.53353 5.21447 5.55984 3.94995 7.02995 3.53705L7.36281 3.43382L7.30733 3.09834V3.02092C7.30733 2.65963 7.61245 2.37576 8.00078 2.37576C8.38911 2.37576 8.69423 2.65963 8.69423 3.02092V3.12414L8.63876 3.45963L8.97161 3.56285C10.4417 3.97576 11.468 5.24027 11.468 6.65963V9.31769L12.3557 11.1758H3.64591V11.15ZM8.00078 14.4016C8.77745 14.4016 9.38768 13.8338 9.38768 13.1112H6.61388C6.61388 13.8338 7.22412 14.4016 8.00078 14.4016Z",
+            fill: fill,
+            stroke: stroke,
+            strokeWidth: 0.32
+        })
+    });
+};
+AlertIcon.displayName = 'AlertIcon|alert';
+const native_AlertIcon = AlertIcon;
+export { native_AlertIcon as default };

package/dist/native/AlertOnIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconColor } from '../core';
+import { type IconProps } from './types';
+declare const AlertOnIcon: {
+    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AlertOnIcon;

package/dist/native/AlertOnIcon.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import external_react_native_svg_default, { Path } from "react-native-svg";
+import { isThemeColor, useIconsContext } from "../core/index.js";
+const AlertOnIcon_AlertOnIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
+    const { getColor } = useIconsContext();
+    const _color = isThemeColor(color) ? getColor(color) : color;
+    const fill = props.fill || _color;
+    const stroke = props.stroke || _color;
+    return /*#__PURE__*/ jsx(external_react_native_svg_default, {
+        width: width,
+        height: height,
+        viewBox: "0 0 16 16",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M13.1323 10.8919L12.3002 9.13705V6.63382C12.3002 4.98221 11.1629 3.48543 9.52637 2.89188C9.4709 2.1693 8.80518 1.60156 8.00078 1.60156C7.19638 1.60156 6.5584 2.1693 6.47519 2.89188C4.81091 3.48543 3.70138 4.98221 3.70138 6.63382V9.13705L2.86924 10.8919C2.75829 11.1241 2.78603 11.3822 2.92472 11.5887C3.06341 11.7951 3.31305 11.9241 3.59043 11.9241H12.4111C12.6885 11.9241 12.9382 11.7951 13.0768 11.5887C13.2155 11.3822 13.2433 11.0983 13.1323 10.8919ZM8.00078 14.4016C8.77745 14.4016 9.38768 13.8338 9.38768 13.1112H6.61388C6.61388 13.8338 7.22412 14.4016 8.00078 14.4016Z",
+            fill: fill,
+            stroke: stroke,
+            strokeWidth: 0.32
+        })
+    });
+};
+AlertOnIcon_AlertOnIcon.displayName = 'AlertOnIcon|alert-on';
+const AlertOnIcon = AlertOnIcon_AlertOnIcon;
+export { AlertOnIcon as default };

package/dist/native/AllTokensIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconColor } from '../core';
+import { type IconProps } from './types';
+declare const AllTokensIcon: {
+    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AllTokensIcon;

package/dist/native/AllTokensIcon.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import external_react_native_svg_default, { Path } from "react-native-svg";
+import { isThemeColor, useIconsContext } from "../core/index.js";
+const AllTokensIcon_AllTokensIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
+    const { getColor } = useIconsContext();
+    const _color = isThemeColor(color) ? getColor(color) : color;
+    const fill = props.fill || _color;
+    return /*#__PURE__*/ jsxs(external_react_native_svg_default, {
+        width: width,
+        height: height,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Path, {
+                d: "M6.44519 11.4605C6.44515 12.263 6.60319 13.0576 6.91029 13.7991C7.21738 14.5405 7.66752 15.2142 8.23499 15.7817C8.80246 16.3491 9.47616 16.7993 10.2176 17.1064C10.9591 17.4135 11.7538 17.5716 12.5563 17.5716C13.3588 17.5716 14.1535 17.4135 14.895 17.1064C15.6364 16.7993 16.3101 16.3491 16.8776 15.7817C17.4451 15.2142 17.8952 14.5405 18.2023 13.7991C18.5094 13.0576 18.6675 12.263 18.6674 11.4605C18.6675 10.658 18.5094 9.86331 18.2023 9.12188C17.8952 8.38044 17.4451 7.70676 16.8776 7.13929C16.3101 6.57181 15.6364 6.12167 14.895 5.81455C14.1535 5.50744 13.3588 5.34937 12.5563 5.34937C11.7538 5.34937 10.9591 5.50744 10.2176 5.81455C9.47616 6.12167 8.80246 6.57181 8.23499 7.13929C7.66752 7.70676 7.21738 8.38044 6.91029 9.12188C6.60319 9.86331 6.44515 10.658 6.44519 11.4605Z",
+                fill: fill,
+                fillOpacity: 0.2
+            }),
+            /*#__PURE__*/ jsx(Path, {
+                d: "M12.8579 11.6352C11.1436 11.7304 10.1912 12.4923 10.1912 13.9209C10.2864 15.159 11.0484 15.6352 12.5722 15.8256C13.8103 15.8256 14.8579 15.4447 15.3341 14.5875C15.3341 14.9685 15.4293 15.3494 15.715 15.6352H16.7626C16.4769 15.3494 16.3817 14.778 16.3817 14.0161V11.159C16.4769 9.25421 15.5245 8.39707 13.6198 8.39707C11.9055 8.30183 10.7626 9.06373 10.3817 10.4923L11.5245 10.778C11.6198 9.82564 12.2864 9.25421 13.6198 9.44469C14.8579 9.44469 15.5245 10.1114 15.3341 11.3494C15.1436 11.3494 14.2864 11.5399 12.8579 11.6352ZM15.2388 12.778C15.1436 14.0161 14.3817 14.778 12.9531 14.8733C12.0007 14.8733 11.3341 14.4923 11.3341 13.7304C11.3341 12.9685 12.0007 12.4923 13.2388 12.3971C14.4769 12.3018 15.1436 12.1114 15.2388 11.9209V12.778ZM19.2388 5.7304H18.1912V15.4447H19.2388V5.7304ZM20.9531 5.7304V15.4447H22.0007V5.7304H20.9531ZM17.3341 16.9685C16.0007 16.9685 14.8579 18.1114 14.8579 19.4447C14.8579 19.7304 14.8579 19.8256 14.9531 20.1114C14.0007 20.4923 12.9531 20.5875 12.0007 20.5875C7.23883 20.5875 3.23883 16.6828 3.23883 11.8256C3.23883 6.96849 7.14359 3.06373 12.0007 3.06373C13.9055 3.06373 15.6198 3.53992 16.9531 4.68278C17.4293 4.87326 17.715 4.77802 17.9055 4.58754C18.096 4.20659 18.0007 3.92088 17.715 3.7304C16.096 2.58754 14.096 2.01611 12.0007 2.01611C6.47692 2.01611 2.00073 6.4923 2.00073 12.0161C2.00073 17.5399 6.47692 22.0161 12.0007 22.0161C13.2388 22.0161 14.4769 21.7304 15.6198 21.2542C16.096 21.7304 16.7626 22.0161 17.5245 22.0161C18.8579 22.0161 20.0007 20.8733 20.0007 19.5399C20.0007 18.1114 18.7626 16.9685 17.3341 16.9685ZM17.3341 20.778C16.5722 20.778 16.096 20.3018 16.096 19.5399C16.096 18.778 16.5722 18.3018 17.3341 18.3018C18.096 18.3018 18.5722 18.778 18.5722 19.5399C18.6674 20.3018 18.096 20.778 17.3341 20.778Z",
+                fill: fill
+            })
+        ]
+    });
+};
+AllTokensIcon_AllTokensIcon.displayName = 'AllTokensIcon|all-tokens';
+const AllTokensIcon = AllTokensIcon_AllTokensIcon;
+export { AllTokensIcon as default };

package/dist/native/AppleIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconColor } from '../core';
+import { type IconProps } from './types';
+declare const AppleIcon: {
+    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AppleIcon;

package/dist/native/AppleIcon.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import external_react_native_svg_default, { Path } from "react-native-svg";
+import { isThemeColor, useIconsContext } from "../core/index.js";
+const AppleIcon_AppleIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
+    const { getColor } = useIconsContext();
+    const _color = isThemeColor(color) ? getColor(color) : color;
+    const fill = props.fill || _color;
+    return /*#__PURE__*/ jsx(external_react_native_svg_default, {
+        width: width,
+        height: height,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M15.6631 7.03516C16.358 7.12201 18.2672 7.29639 19.4824 9.11914C19.3936 9.20713 17.2258 10.5093 17.2256 13.1123C17.2256 16.2364 19.9142 17.2796 20.0898 17.3672C20.0023 17.4582 19.6543 18.845 18.6143 20.3184C17.7461 21.5338 16.7913 22.8358 15.4023 22.8359C14.0133 22.8359 13.4922 21.9679 11.9297 21.9678C10.3671 21.9678 9.8459 22.749 8.54395 22.8359C7.15485 22.9228 6.11232 21.5337 5.24414 20.2314C3.42107 17.6268 2.03237 12.8519 3.85547 9.72656C4.81049 8.16396 6.46001 7.12207 8.19629 7.12207C9.58534 7.03526 10.8876 7.99022 11.6689 7.99023C12.5371 7.99023 14.0135 6.86153 15.6631 7.03516ZM15.5762 2C15.7498 3.21533 15.2286 4.43068 14.5342 5.29883C13.8396 6.16699 12.6237 6.86221 11.4082 6.77539C11.2346 5.55995 11.8426 4.34387 12.5371 3.5625C13.2317 2.69437 14.5344 2 15.5762 2Z",
+            fill: fill
+        })
+    });
+};
+AppleIcon_AppleIcon.displayName = 'AppleIcon|apple';
+const AppleIcon = AppleIcon_AppleIcon;
+export { AppleIcon as default };

package/dist/native/ArrowDownIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconColor } from '../core';
+import { type IconProps } from './types';
+declare const ArrowDownIcon: {
+    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ArrowDownIcon;

package/dist/native/ArrowDownIcon.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import external_react_native_svg_default, { Path } from "react-native-svg";
+import { isThemeColor, useIconsContext } from "../core/index.js";
+const ArrowDownIcon_ArrowDownIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
+    const { getColor } = useIconsContext();
+    const _color = isThemeColor(color) ? getColor(color) : color;
+    const fill = props.fill || _color;
+    return /*#__PURE__*/ jsx(external_react_native_svg_default, {
+        width: width,
+        height: height,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M4.24414 13.0312L5.76172 11.4971L10.8838 16.6191L10.8838 3.22168L13.0996 3.22168L13.0996 16.6191L18.2051 11.4971L19.7559 13.0312L11.9912 20.7783L4.24414 13.0312Z",
+            fill: fill
+        })
+    });
+};
+ArrowDownIcon_ArrowDownIcon.displayName = 'ArrowDownIcon|arrow-down';
+const ArrowDownIcon = ArrowDownIcon_ArrowDownIcon;
+export { ArrowDownIcon as default };

package/dist/native/ArrowDownToLineIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconColor } from '../core';
+import { type IconProps } from './types';
+declare const ArrowDownToLineIcon: {
+    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ArrowDownToLineIcon;

package/dist/native/ArrowDownToLineIcon.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import external_react_native_svg_default, { Path } from "react-native-svg";
+import { isThemeColor, useIconsContext } from "../core/index.js";
+const ArrowDownToLineIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
+    const { getColor } = useIconsContext();
+    const _color = isThemeColor(color) ? getColor(color) : color;
+    const fill = props.fill || _color;
+    return /*#__PURE__*/ jsx(external_react_native_svg_default, {
+        width: width,
+        height: height,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M16.2783 20.1821C16.7804 20.1821 17.1875 20.5892 17.1875 21.0913C17.1873 21.5933 16.7803 22.0005 16.2783 22.0005H7.72164C7.21977 22.0003 6.81262 21.5932 6.81246 21.0913C6.81246 20.5893 7.21968 20.1823 7.72164 20.1821H16.2783ZM12 1.99951C12.5019 1.99959 12.909 2.40677 12.9091 2.90869V10.9292H16.2783C17.1596 10.9292 17.6626 11.936 17.1338 12.6411L12.8554 18.3452C12.4276 18.9154 11.5723 18.9156 11.1445 18.3452L6.86618 12.6411C6.33745 11.9361 6.84054 10.9295 7.72164 10.9292H11.0908V2.90869C11.0909 2.40672 11.498 1.99951 12 1.99951Z",
+            fill: fill
+        })
+    });
+};
+ArrowDownToLineIcon.displayName = 'ArrowDownToLineIcon|arrow-down-to-line';
+const native_ArrowDownToLineIcon = ArrowDownToLineIcon;
+export { native_ArrowDownToLineIcon as default };

package/dist/native/ArrowRightLeftIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconColor } from '../core';
+import { type IconProps } from './types';
+declare const ArrowRightLeftIcon: {
+    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ArrowRightLeftIcon;

package/dist/native/ArrowRightLeftIcon.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import external_react_native_svg_default, { Path } from "react-native-svg";
+import { isThemeColor, useIconsContext } from "../core/index.js";
+const ArrowRightLeftIcon_ArrowRightLeftIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
+    const { getColor } = useIconsContext();
+    const _color = isThemeColor(color) ? getColor(color) : color;
+    const fill = props.fill || _color;
+    return /*#__PURE__*/ jsxs(external_react_native_svg_default, {
+        width: width,
+        height: height,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Path, {
+                d: "M20.2611 14.0712C20.7546 14.0712 21.1543 14.4708 21.1543 14.9643C21.1543 15.4578 20.7546 15.8575 20.2611 15.8575H10.4016V19.0619C10.4016 19.9157 9.42671 20.4032 8.74361 19.8909L3.21777 15.7459C2.66518 15.3314 2.66515 14.5023 3.21777 14.0879C3.26933 14.0823 7.89957 14.0824 9.69837 14.0866C9.74968 14.0774 9.80226 14.0712 9.85621 14.0712H20.2611Z",
+                fill: fill
+            }),
+            /*#__PURE__*/ jsx(Path, {
+                d: "M13.6021 4.93802C13.6021 4.08414 14.577 3.59669 15.2601 4.10902L20.786 8.25403C21.3386 8.66851 21.3386 9.49756 20.786 9.91204C20.7318 9.91757 16.0992 9.91621 14.3028 9.91204C14.2522 9.92092 14.2006 9.93 14.1475 9.93H3.74264C3.24945 9.92988 2.84982 9.52997 2.84947 9.03684C2.84947 8.5434 3.24923 8.14379 3.74264 8.14367H13.6021V4.93802Z",
+                fill: fill
+            })
+        ]
+    });
+};
+ArrowRightLeftIcon_ArrowRightLeftIcon.displayName = 'ArrowRightLeftIcon|arrow-right-left';
+const ArrowRightLeftIcon = ArrowRightLeftIcon_ArrowRightLeftIcon;
+export { ArrowRightLeftIcon as default };

package/dist/native/ArrowUpIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconColor } from '../core';
+import { type IconProps } from './types';
+declare const ArrowUpIcon: {
+    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ArrowUpIcon;