@codady/icax 0.0.5 → 0.0.6

package/README.md

@@ -0,0 +1,600 @@
+# Icax - Lightweight SVG Icon Component System
+
+## 🌟 Introduction
+
+**Icax** is a lightweight, high-performance SVG icon component system designed for modern web applications. It offers over 100 carefully crafted icons, supports complete style customization, and is specially optimized for RTL (right-to-left) layout support.
+
+## ✨ Core Features
+
+### 🎯 **Comprehensive Icon Library**
+- **Basic Shapes**: Circle, square, squircle (rounded square), flower, bubble
+- **Directional Indicators**: Arrows in all directions, start/end icons
+- **Interactive Operations**: Check, close, plus/minus, expand/collapse
+- **Media Controls**: Play, pause, volume control, forward/rewind
+- **File Operations**: Upload, download, copy, clipboard
+- **Status Feedback**: Warning, info, issue, search
+- **Special Arrows**: Long arrows, compact arrows, turn arrows, corner arrows
+
+### 🎨 **Fully Customizable**
+- **Size**: Any size (default: 1em)
+- **Color**: Supports any color value (default: currentColor)
+- **Stroke**: Adjustable thickness, line cap, line join
+- **CSS Classes**: Add custom CSS classes
+- **RTL Support**: Automatic mirroring for RTL layouts
+
+### 🚀 **Zero Dependencies**
+- Pure JavaScript implementation
+- No external dependencies
+- Tiny file size (~20KB gzipped)
+
+### 🌐 **Universal Compatibility**
+- Works with any frontend framework (React, Vue, Angular, etc.)
+- Supports CommonJS, ES6 modules, and UMD
+- Compatible with all modern browsers
+
+## 📦 Installation
+
+### npm/yarn/pnpm
+```bash
+npm install @codady/icax
+# or
+yarn add @codady/icax
+# or
+pnpm add @codady/icax
+```
+
+### CDN
+```html
+<script src="https://unpkg.com/@codady/icax"></script>
+```
+
+## 🚀 Quick Start
+
+### Basic Usage
+```javascript
+// ES6 Module
+import { icax } from '@codady/icax';
+
+// Get SVG string
+const checkIcon = icax.check();
+const arrowIcon = icax.arrowStart({ size: '24px', color: '#007bff' });
+
+// Insert into HTML
+document.getElementById('icon-container').innerHTML = checkIcon;
+```
+
+### With Custom Options
+```javascript
+const customIcon = icax.checkCircle({
+  size: '2em',
+  color: 'green',
+  thickness: 3,
+  linecap: 'square',
+  linejoin: 'miter',
+  classes: 'my-icon custom-class'
+});
+```
+
+## 📖 API Reference
+
+### Icon Functions
+All icons follow the same pattern:
+```javascript
+icax.iconName(options)
+```
+
+### Options Object
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `size` | string | '1em' | Icon dimensions (width and height) |
+| `color` | string | 'currentColor' | Stroke color |
+| `thickness` | number | 2 | Stroke width in pixels |
+| `linecap` | string | 'round' | Stroke line cap (butt, round, square) |
+| `linejoin` | string | 'round' | Stroke line join (miter, round, bevel) |
+| `classes` | string/array | '' | Additional CSS classes |
+
+### Available Icons (Categories)
+
+#### Basic Shapes
+```javascript
+icax.square()      // Square icon
+icax.circle()      // Circle icon
+icax.squircle()    // Rounded square
+icax.flower()      // Flower shape
+icax.bubble()      // Speech bubble
+```
+
+#### Directional Arrows
+```javascript
+// Simple arrows
+icax.start()       // Left arrow
+icax.end()         // Right arrow
+icax.up()          // Up arrow
+icax.down()        // Down arrow
+
+// With shapes
+icax.startCircle() // Left arrow in circle
+icax.endSquare()   // Right arrow in square
+icax.upSquircle()  // Up arrow in squircle
+```
+
+#### Interactive Icons
+```javascript
+icax.check()       // Check mark
+icax.close()       // Close/X icon
+icax.plus()        // Plus sign
+icax.minus()       // Minus sign
+icax.copy()        // Copy icon
+icax.clipboard()   // Clipboard
+```
+
+#### Media Controls
+```javascript
+icax.play()        // Play button
+icax.pause()       // Pause button
+icax.volume()      // Volume icon
+icax.volume1()     // Volume 1 bar
+icax.volume2()     // Volume 2 bars
+icax.mute()        // Mute icon
+icax.prev()        // Previous track
+icax.next()        // Next track
+```
+
+#### Status & Feedback
+```javascript
+icax.info()        // Info icon
+icax.warn()        // Warning icon
+icax.issue()       // Issue/help icon
+icax.search()      // Search icon
+icax.zoomIn()      // Zoom in
+icax.zoomOut()     // Zoom out
+```
+
+#### File Operations
+```javascript
+icax.upload()      // Upload icon
+icax.download()    // Download icon
+```
+
+## 🎨 Styling Examples
+
+### Using CSS Variables
+```css
+:root {
+  --icon-color: #333;
+  --icon-size: 24px;
+  --icon-thickness: 2;
+}
+
+.icon {
+  color: var(--icon-color);
+  font-size: var(--icon-size);
+}
+```
+
+```javascript
+const icon = icax.check({
+  color: 'var(--icon-color)',
+  size: 'var(--icon-size)',
+  thickness: 'var(--icon-thickness)'
+});
+```
+
+### Dynamic Theming
+```javascript
+function getIcon(theme) {
+  return icax.checkCircle({
+    color: theme === 'dark' ? '#ffffff' : '#000000',
+    size: theme === 'compact' ? '16px' : '24px'
+  });
+}
+```
+
+## 🌍 RTL Support
+
+Icax automatically handles RTL layouts:
+```html
+<html dir="rtl">
+  <!-- Icons will automatically mirror when needed -->
+</html>
+```
+
+Manual RTL control:
+```javascript
+// Some icons have built-in RTL awareness
+icax.start()  // Will mirror in RTL mode
+icax.end()    // Will mirror in RTL mode
+```
+
+## 🔧 Advanced Usage
+
+### React Component Example
+```jsx
+import React from 'react';
+import { icax } from '@codady/icax';
+
+const Icon = ({ name, ...props }) => {
+  const iconHtml = icax[name](props);
+  return <div dangerouslySetInnerHTML={{ __html: iconHtml }} />;
+};
+
+// Usage
+<Icon name="check" size="32px" color="green" />
+```
+
+### Vue Component Example
+```vue
+<template>
+  <div v-html="iconSvg"></div>
+</template>
+
+<script>
+import { icax } from '@codady/icax';
+
+export default {
+  props: {
+    name: String,
+    size: { type: String, default: '1em' },
+    color: { type: String, default: 'currentColor' }
+  },
+  computed: {
+    iconSvg() {
+      return icax[this.name]({
+        size: this.size,
+        color: this.color
+      });
+    }
+  }
+};
+</script>
+```
+
+### Batch Processing
+```javascript
+// Generate multiple icons with same style
+const iconConfig = {
+  size: '20px',
+  color: '#666',
+  thickness: 1.5
+};
+
+const icons = {
+  check: icax.check(iconConfig),
+  close: icax.close(iconConfig),
+  plus: icax.plus(iconConfig)
+};
+```
+
+## 📊 Performance
+
+- **File Size**: ~20KB (gzipped)
+- **Render Speed**: Instant SVG generation
+- **Memory Usage**: Minimal, no runtime overhead
+- **Tree Shaking**: Fully supported
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE) for details.
+
+This software supports the MIT License, allowing free learning and commercial use, but please retain the terms 'Icax' and 'ICAX' within the software.
+
+## 🔗 Links
+
+- **Official Website**: [https://icax.axui.cn](https://icax.axui.cn)
+- **GitHub Repository**: [https://github.com/codady/icax](https://github.com/codady/icax)
+- **Gitee Repository**: [https://gitee.com/codady/icax](https://gitee.com/codady/icax)
+- **NPM Package**: [https://www.npmjs.com/package/@codady/icax](https://www.npmjs.com/package/@codady/icax)
+- **Issue Tracker**: 
+  - GitHub: [https://github.com/codady/icax/issues](https://github.com/codady/icax/issues)
+  - Gitee: [https://gitee.com/codady/icax/issues](https://gitee.com/codady/icax/issues)
+- **Support**: QQ Group: 952502085
+
+## 🙏 Acknowledgments
+
+Thanks to all contributors and the open-source community for making this project possible.
+
+---
+
+**Icax** - Making beautiful, customizable SVG icons simple and accessible for everyone.
+
+---
+
+# Icax - 轻量级SVG图标组件系统
+
+## 🌟 简介
+
+**Icax** 是一个轻量级、高性能的SVG图标组件系统，专为现代Web应用设计。它提供了100多个精心设计的图标，支持完全自定义样式，并特别优化了RTL（从右到左）布局支持。
+
+## ✨ 核心特性
+
+### 🎯 **全面的图标库**
+- **基础形状**：圆形、方形、圆角方形(squircle)、花朵、气泡等
+- **方向指示**：上下左右箭头、开始结束图标
+- **交互操作**：勾选、关闭、加减、展开折叠
+- **多媒体控制**：播放、暂停、音量控制、快进快退
+- **文件操作**：上传、下载、复制、剪贴板
+- **状态反馈**：警告、信息、问题、搜索
+- **特殊箭头**：长箭头、紧凑箭头、转向箭头、角落箭头
+
+### 🎨 **完全可定制**
+- **尺寸**：任意大小（默认1em）
+- **颜色**：支持任何颜色值（默认currentColor）
+- **描边**：可调粗细、端点样式、连接样式
+- **CSS类**：添加自定义CSS类
+- **RTL支持**：自动镜像支持RTL布局
+
+### 🚀 **零依赖**
+- 纯JavaScript实现
+- 无外部依赖
+- 极小的文件体积（约20KB gzip后）
+
+### 🌐 **通用兼容性**
+- 适用于任何前端框架（React、Vue、Angular等）
+- 支持CommonJS、ES6模块和UMD
+- 兼容所有现代浏览器
+
+## 📦 安装
+
+### npm/yarn/pnpm
+```bash
+npm install @codady/icax
+# 或
+yarn add @codady/icax
+# 或
+pnpm add @codady/icax
+```
+
+### CDN
+```html
+<script src="https://unpkg.com/@codady/icax"></script>
+```
+
+## 🚀 快速开始
+
+### 基础用法
+```javascript
+// ES6模块
+import { icax } from '@codady/icax';
+
+// 获取SVG字符串
+const checkIcon = icax.check();
+const arrowIcon = icax.arrowStart({ size: '24px', color: '#007bff' });
+
+// 插入到HTML
+document.getElementById('icon-container').innerHTML = checkIcon;
+```
+
+### 自定义选项
+```javascript
+const customIcon = icax.checkCircle({
+  size: '2em',
+  color: 'green',
+  thickness: 3,
+  linecap: 'square',
+  linejoin: 'miter',
+  classes: 'my-icon custom-class'
+});
+```
+
+## 📖 API参考
+
+### 图标函数
+所有图标都遵循相同的模式：
+```javascript
+icax.iconName(options)
+```
+
+### 选项对象
+| 参数 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `size` | string | '1em' | 图标尺寸（宽高相同） |
+| `color` | string | 'currentColor' | 描边颜色 |
+| `thickness` | number | 2 | 描边宽度（像素） |
+| `linecap` | string | 'round' | 描边端点样式 |
+| `linejoin` | string | 'round' | 描边连接样式 |
+| `classes` | string/array | '' | 额外的CSS类 |
+
+### 可用图标（分类）
+
+#### 基础形状
+```javascript
+icax.square()      // 正方形图标
+icax.circle()      // 圆形图标
+icax.squircle()    // 圆角方形
+icax.flower()      // 花朵形状
+icax.bubble()      // 对话气泡
+```
+
+#### 方向箭头
+```javascript
+// 简单箭头
+icax.start()       // 左箭头
+icax.end()         // 右箭头
+icax.up()          // 上箭头
+icax.down()        // 下箭头
+
+// 带形状的箭头
+icax.startCircle() // 圆形中的左箭头
+icax.endSquare()   // 方形中的右箭头
+icax.upSquircle()  // 圆角方形中的上箭头
+```
+
+#### 交互图标
+```javascript
+icax.check()       // 勾选标记
+icax.close()       // 关闭/X图标
+icax.plus()        // 加号
+icax.minus()       // 减号
+icax.copy()        // 复制图标
+icax.clipboard()   // 剪贴板
+```
+
+#### 媒体控制
+```javascript
+icax.play()        // 播放按钮
+icax.pause()       // 暂停按钮
+icax.volume()      // 音量图标
+icax.volume1()     // 音量1格
+icax.volume2()     // 音量2格
+icax.mute()        // 静音图标
+icax.prev()        // 上一曲
+icax.next()        // 下一曲
+```
+
+#### 状态反馈
+```javascript
+icax.info()        // 信息图标
+icax.warn()        // 警告图标
+icax.issue()       // 问题/帮助图标
+icax.search()      // 搜索图标
+icax.zoomIn()      // 放大
+icax.zoomOut()     // 缩小
+```
+
+#### 文件操作
+```javascript
+icax.upload()      // 上传图标
+icax.download()    // 下载图标
+```
+
+## 🎨 样式示例
+
+### 使用CSS变量
+```css
+:root {
+  --icon-color: #333;
+  --icon-size: 24px;
+  --icon-thickness: 2;
+}
+
+.icon {
+  color: var(--icon-color);
+  font-size: var(--icon-size);
+}
+```
+
+```javascript
+const icon = icax.check({
+  color: 'var(--icon-color)',
+  size: 'var(--icon-size)',
+  thickness: 'var(--icon-thickness)'
+});
+```
+
+### 动态主题
+```javascript
+function getIcon(theme) {
+  return icax.checkCircle({
+    color: theme === 'dark' ? '#ffffff' : '#000000',
+    size: theme === 'compact' ? '16px' : '24px'
+  });
+}
+```
+
+## 🌍 RTL支持
+
+Icax自动处理RTL布局：
+```html
+<html dir="rtl">
+  <!-- 图标会在需要时自动镜像 -->
+</html>
+```
+
+手动RTL控制：
+```javascript
+// 一些图标内置了RTL感知
+icax.start()  // 在RTL模式下会镜像
+icax.end()    // 在RTL模式下会镜像
+```
+
+## 🔧 高级用法
+
+### React组件示例
+```jsx
+import React from 'react';
+import { icax } from '@codady/icax';
+
+const Icon = ({ name, ...props }) => {
+  const iconHtml = icax[name](props);
+  return <div dangerouslySetInnerHTML={{ __html: iconHtml }} />;
+};
+
+// 使用
+<Icon name="check" size="32px" color="green" />
+```
+
+### Vue组件示例
+```vue
+<template>
+  <div v-html="iconSvg"></div>
+</template>
+
+<script>
+import { icax } from '@codady/icax';
+
+export default {
+  props: {
+    name: String,
+    size: { type: String, default: '1em' },
+    color: { type: String, default: 'currentColor' }
+  },
+  computed: {
+    iconSvg() {
+      return icax[this.name]({
+        size: this.size,
+        color: this.color
+      });
+    }
+  }
+};
+</script>
+```
+
+### 批量处理
+```javascript
+// 用相同样式生成多个图标
+const iconConfig = {
+  size: '20px',
+  color: '#666',
+  thickness: 1.5
+};
+
+const icons = {
+  check: icax.check(iconConfig),
+  close: icax.close(iconConfig),
+  plus: icax.plus(iconConfig)
+};
+```
+
+## 📊 性能
+
+- **文件大小**：约20KB（gzip后）
+- **渲染速度**：即时SVG生成
+- **内存使用**：最小化，无运行时开销
+- **Tree Shaking**：完全支持
+
+
+## 📄 许可证
+
+MIT许可证 - 详见[LICENSE](LICENSE)。
+
+本软件支持MIT许可证，允许免费学习和商业使用，但请在软件中保留'Icax'和'ICAX'字样。
+
+## 🔗 链接
+
+- **官方网站**：[https://icax.axui.cn](https://icax.axui.cn)
+- **GitHub仓库**：[https://github.com/codady/icax](https://github.com/codady/icax)
+- **Gitee仓库**：[https://gitee.com/codady/icax](https://gitee.com/codady/icax)
+- **NPM包**：[https://www.npmjs.com/package/@codady/icax](https://www.npmjs.com/package/@codady/icax)
+- **问题跟踪**：
+  - GitHub：[https://github.com/codady/icax/issues](https://github.com/codady/icax/issues)
+  - Gitee：[https://gitee.com/codady/icax/issues](https://gitee.com/codady/icax/issues)
+- **Support**: QQ 群: 952502085
+
+## 🙏 致谢
+
+感谢所有贡献者和开源社区，使这个项目成为可能。
+
+---
+
+**Icax** - 让美观、可定制的SVG图标对每个人都变得简单易用。