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

npm install @codady/icax
# or
yarn add @codady/icax
# or
pnpm add @codady/icax

CDN

<script src="https://unpkg.com/@codady/icax"></script>

🚀 Quick Start

Basic Usage

// 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

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:

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

icax.square()      // Square icon
icax.circle()      // Circle icon
icax.squircle()    // Rounded square
icax.flower()      // Flower shape
icax.bubble()      // Speech bubble

Directional Arrows

// 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

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

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

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

icax.upload()      // Upload icon
icax.download()    // Download icon

🎨 Styling Examples

Using CSS Variables

:root {
  --icon-color: #333;
  --icon-size: 24px;
  --icon-thickness: 2;
}

.icon {
  color: var(--icon-color);
  font-size: var(--icon-size);
}

const icon = icax.check({
  color: 'var(--icon-color)',
  size: 'var(--icon-size)',
  thickness: 'var(--icon-thickness)'
});

Dynamic Theming

function getIcon(theme) {
  return icax.checkCircle({
    color: theme === 'dark' ? '#ffffff' : '#000000',
    size: theme === 'compact' ? '16px' : '24px'
  });
}

🌍 RTL Support

Icax automatically handles RTL layouts:

<html dir="rtl">
  <!-- Icons will automatically mirror when needed -->
</html>

Manual RTL control:

// 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

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

<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

// 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 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
• GitHub Repository: https://github.com/codady/icax
• Gitee Repository: https://gitee.com/codady/icax
• NPM Package: https://www.npmjs.com/package/@codady/icax
• Issue Tracker:
  • GitHub: https://github.com/codady/icax/issues
  • Gitee: 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

npm install @codady/icax
# 或
yarn add @codady/icax
# 或
pnpm add @codady/icax

CDN

<script src="https://unpkg.com/@codady/icax"></script>

🚀 快速开始

基础用法

// 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;

自定义选项

const customIcon = icax.checkCircle({
  size: '2em',
  color: 'green',
  thickness: 3,
  linecap: 'square',
  linejoin: 'miter',
  classes: 'my-icon custom-class'
});

📖 API参考

图标函数

所有图标都遵循相同的模式：

icax.iconName(options)

选项对象

| 参数 | 类型 | 默认值 | 描述 | |------|------|--------|------| | size | string | '1em' | 图标尺寸（宽高相同） | | color | string | 'currentColor' | 描边颜色 | | thickness | number | 2 | 描边宽度（像素） | | linecap | string | 'round' | 描边端点样式 | | linejoin | string | 'round' | 描边连接样式 | | classes | string/array | '' | 额外的CSS类 |

可用图标（分类）

基础形状

icax.square()      // 正方形图标
icax.circle()      // 圆形图标
icax.squircle()    // 圆角方形
icax.flower()      // 花朵形状
icax.bubble()      // 对话气泡

方向箭头

// 简单箭头
icax.start()       // 左箭头
icax.end()         // 右箭头
icax.up()          // 上箭头
icax.down()        // 下箭头

// 带形状的箭头
icax.startCircle() // 圆形中的左箭头
icax.endSquare()   // 方形中的右箭头
icax.upSquircle()  // 圆角方形中的上箭头

交互图标

icax.check()       // 勾选标记
icax.close()       // 关闭/X图标
icax.plus()        // 加号
icax.minus()       // 减号
icax.copy()        // 复制图标
icax.clipboard()   // 剪贴板

媒体控制

icax.play()        // 播放按钮
icax.pause()       // 暂停按钮
icax.volume()      // 音量图标
icax.volume1()     // 音量1格
icax.volume2()     // 音量2格
icax.mute()        // 静音图标
icax.prev()        // 上一曲
icax.next()        // 下一曲

状态反馈

icax.info()        // 信息图标
icax.warn()        // 警告图标
icax.issue()       // 问题/帮助图标
icax.search()      // 搜索图标
icax.zoomIn()      // 放大
icax.zoomOut()     // 缩小

文件操作

icax.upload()      // 上传图标
icax.download()    // 下载图标

🎨 样式示例

使用CSS变量

:root {
  --icon-color: #333;
  --icon-size: 24px;
  --icon-thickness: 2;
}

.icon {
  color: var(--icon-color);
  font-size: var(--icon-size);
}

const icon = icax.check({
  color: 'var(--icon-color)',
  size: 'var(--icon-size)',
  thickness: 'var(--icon-thickness)'
});

动态主题

function getIcon(theme) {
  return icax.checkCircle({
    color: theme === 'dark' ? '#ffffff' : '#000000',
    size: theme === 'compact' ? '16px' : '24px'
  });
}

🌍 RTL支持

Icax自动处理RTL布局：

<html dir="rtl">
  <!-- 图标会在需要时自动镜像 -->
</html>

手动RTL控制：

// 一些图标内置了RTL感知
icax.start()  // 在RTL模式下会镜像
icax.end()    // 在RTL模式下会镜像

🔧 高级用法

React组件示例

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组件示例

<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>

批量处理

// 用相同样式生成多个图标
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。

本软件支持MIT许可证，允许免费学习和商业使用，但请在软件中保留'Icax'和'ICAX'字样。

🔗 链接

• 官方网站：https://icax.axui.cn
• GitHub仓库：https://github.com/codady/icax
• Gitee仓库：https://gitee.com/codady/icax
• NPM包：https://www.npmjs.com/package/@codady/icax
• 问题跟踪：
  • GitHub：https://github.com/codady/icax/issues
  • Gitee：https://gitee.com/codady/icax/issues
• Support: QQ 群: 952502085

🙏 致谢

感谢所有贡献者和开源社区，使这个项目成为可能。

Icax - 让美观、可定制的SVG图标对每个人都变得简单易用。