Ant Design Dioxus Icon

为 Dioxus 应用提供完整的 Ant Design 图标库支持。

特性

• 🎨 788+ 图标: 支持所有 Ant Design 官方图标
• 🎯 三种主题: Outlined (420个)、Filled (218个)、TwoTone (150个)
• 🌈 双色图标: 完整的双色图标系统和颜色管理
• 🔧 自定义图标: 支持自定义 SVG 图标和 iconfont
• ⚡ 高性能: 编译时优化，按需加载
• 🛡️ 类型安全: 100% 类型安全的 Rust 实现
• 🎪 动画支持: 旋转动画和自定义角度
• ♿ 无障碍: 完整的无障碍访问支持

快速开始

添加依赖

[dependencies]
ant-design-dioxus-icon = "0.1.0"
dioxus = "0.6.3"

基础使用

use dioxus::prelude::*;
use ant_design_dioxus_icon::prelude::*;

#[component]
fn App() -> Element {
    rsx! {
        div {
            // 基础使用
            HomeOutlined {}
            
            // 带属性
            HomeOutlined {
                spin: true,
                style: "color: red; font-size: 24px;",
                onclick: |_| println!("Icon clicked!")
            }
            
            // 双色图标
            HomeTwoTone {
                two_tone_color: TwoToneColor::pair("#1890ff", "#69c0ff")
            }
            
            // 自定义图标
            CustomIcon {
                view_box: "0 0 24 24",
                svg {
                    path { d: "M12 2L2 7v10c0 5.55 3.84 10 9 10s9-4.45 9-10V7l-10-5z" }
                }
            }
        }
    }
}

图标主题

Outlined (线性图标)

use ant_design_dioxus_icon::outlined::*;

rsx! {
    HomeOutlined {}
    UserOutlined {}
    SettingOutlined {}
}

Filled (填充图标)

use ant_design_dioxus_icon::filled::*;

rsx! {
    HomeFilled {}
    UserFilled {}
    SettingFilled {}
}

TwoTone (双色图标)

use ant_design_dioxus_icon::twotone::*;

rsx! {
    HomeTwoTone {}
    UserTwoTone {
        two_tone_color: TwoToneColor::pair("#1890ff", "#69c0ff")
    }
}

全局颜色管理

use ant_design_dioxus_icon::{set_two_tone_color, TwoToneColor};

// 设置全局双色图标颜色
set_two_tone_color(TwoToneColor::pair("#ff0000", "#ffcccc"));

// 所有双色图标都会使用这个颜色配置

构建和开发

项目结构

ant-design-dioxus-icon/
├── assets/icons-svg/          # 图标 SVG 源文件
│   ├── outlined/              # 线性图标
│   ├── filled/                # 填充图标
│   ├── twotone/               # 双色图标
│   └── VERSION                # 版本信息
├── src/
│   ├── components/            # 核心组件
│   ├── types/                 # 类型定义
│   ├── utils/                 # 工具函数
│   └── icons/                 # 生成的图标 (构建时)
├── scripts/
│   ├── extract_icons.js       # 图标数据提取
│   ├── generate_rust.js       # Rust 代码生成
│   ├── build_icons.sh         # 构建脚本
│   └── update_icons.sh        # 图标更新脚本
└── build.rs                   # 构建脚本

构建图标

# 使用构建脚本 (推荐)
./scripts/build_icons.sh

# 或者使用 Cargo
cargo build

# 强制重新生成
./scripts/build_icons.sh --force

更新图标

# 从官方仓库更新到最新版本
./scripts/update_icons.sh

# 更新到指定版本
./scripts/update_icons.sh --version 4.1.0

# 从本地路径复制
./scripts/update_icons.sh --local /path/to/icons-svg

# 预览操作
./scripts/update_icons.sh --dry-run

API 文档

组件属性

IconBaseProps

• class?: String - CSS 类名
• style?: String - 内联样式
• spin?: bool - 是否旋转动画
• rotate?: f64 - 旋转角度 (度)
• size?: String - 图标大小
• color?: String - 图标颜色
• onclick?: EventHandler<MouseEvent> - 点击事件

TwoToneColor

• TwoToneColor::single(color) - 单色配置
• TwoToneColor::pair(primary, secondary) - 双色配置

特性配置

[dependencies]
ant-design-dioxus-icon = { version = "0.1.0", features = ["all-icons"] }

# 或者按需启用
ant-design-dioxus-icon = { version = "0.1.0", features = ["outlined", "filled"] }

可用特性

• all-icons - 包含所有图标 (默认)
• outlined - 仅线性图标
• filled - 仅填充图标
• twotone - 仅双色图标
• custom - 自定义图标支持
• iconfont - iconfont.cn 集成

版本信息

• 图标版本: Ant Design Icons 4.0.0
• 图标总数: 788 个
• 最后更新: 2024-12-27

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

相关项目

• Ant Design
• Ant Design Icons
• Dioxus
• ant-design-dioxus