@anker-in/web-icons

React 图标组件库，用于 Anker Web 项目。

✨ 特性

• ✅ 命名导出 - 支持 Tree-shaking 优化
• ✅ TypeScript - 完整的类型定义
• ✅ 自定义尺寸 - 支持任意尺寸 (number | string)
• ✅ 自定义颜色 - 单色图标支持颜色覆盖
• ✅ ESM + CJS - 同时支持 ES Module 和 CommonJS
• ✅ 零依赖 - 仅需 React 作为 peer dependency
• ✅ 轻量级 - 未打包的 SVG 组件

📦 安装

pnpm add @anker-in/web-icons

🚀 快速开始

import { IconBag, IconSearch, IconFacebook } from '@anker-in/web-icons'

function MyComponent() {
  return (
    <div>
      {/* 基础使用 */}
      <IconBag />
      
      {/* 自定义尺寸 */}
      <IconSearch size={32} />
      
      {/* 自定义颜色（单色图标） */}
      <IconBag color="#FF6B00" />
      
      {/* 继承父元素颜色 */}
      <div style={{ color: '#333' }}>
        <IconBag color="currentColor" />
      </div>
      
      {/* 彩色图标（不支持 color 属性） */}
      <IconFacebook size={40} />
      
      {/* 自定义样式和事件 */}
      <IconSearch 
        size={24}
        className="hover:opacity-80"
        style={{ cursor: 'pointer' }}
        onClick={() => console.log('clicked')}
      />
    </div>
  )
}

📖 API

IconProps

所有单色图标组件都接受以下 props：

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | size | number \| string | 24 | 图标尺寸（宽高相同） | | color | string | 'currentColor' | 图标颜色（仅单色图标有效） | | className | string | - | 自定义类名 | | style | React.CSSProperties | - | 自定义样式 | | ...其他 SVG 属性 | - | - | 支持所有 SVG 元素属性（除 width/height） |

彩色图标

彩色图标（如社交媒体图标）不支持 color 属性，会保持原始设计颜色：

// ✅ 正确 - 彩色图标只支持 size, className, style 等
<IconFacebook size={32} />
<IconTwitter size={32} className="hover:scale-110" />

// ❌ 错误 - 彩色图标不支持 color 属性
<IconFacebook size={32} color="#FF0000" />

🎨 可用图标

当前共有 94 个图标组件，涵盖以下类别：

社交媒体图标（彩色）

| 组件名 | 说明 | |--------|------| | IconFacebook | Facebook | | IconTwitter | Twitter | | IconInstagram | Instagram | | IconLinkedin | LinkedIn | | IconTiktok | TikTok | | IconYoutube | YouTube |

功能图标（单色）

电商相关：IconBag, IconCart, IconPayment, IconOrders, IconReturns, IconInvoice, IconCoupons, IconDiscount, IconSale

用户相关：IconUser, IconSubscription, IconWallet, IconVerified, IconHirePurchase

内容相关：IconText, IconPicture, IconVideos, IconEmail, IconChat, IconVoice, IconEndorsement

操作相关：IconSearch, IconEdit, IconDelete, IconCopy, IconDownload, IconRefresh, IconAdd

导航相关：IconHelp, IconSupport, IconAbout, IconMore, IconList, IconNetwork

状态相关：IconSuccess, IconWrong, IconLoading1, IconNotice, IconStar, IconLike, IconFavorite

设备相关：IconHeadphone, IconCharging, IconChargingMode, IconFwupdate, IconPlayback, IconLock

物流相关：IconShipping, IconPackage, IconInTransit, IconDelivered, IconCalendar, IconScan

支持相关：IconHelp, IconUsermanual, IconTroubleshooting, IconPolicyInquiry, IconInquiry, IconSecurity

其他：Icon30DayWarranty, Icon3d, IconLobby, IconCountry, IconPositions, IconReferral, IconLive, IconFunctional, IconCustomized, IconContrast, IconEvaluate

完整列表

查看所有图标：访问 http://localhost:8080/icon-test（需要在 playground 中启动）

🔧 开发指南

添加新图标

1. 从 Figma 导出 SVG

在 Figma 中选择图标，右键 > 导出 > SVG

2. 创建组件文件

// src/components/IconYourIcon.tsx
import React from 'react'
import type { IconProps } from '../types'

export const IconYourIcon: React.FC<IconProps> = ({
  size = 24,
  color = 'currentColor',
  className,
  style,
  ...props
}) => {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      style={style}
      {...props}
    >
      {/* 将 Figma 导出的 path 粘贴到这里 */}
      <path d="..." fill={color} />
    </svg>
  )
}

IconYourIcon.displayName = 'IconYourIcon'

export default IconYourIcon

3. 更新 src/index.ts

export { IconYourIcon, default as IconYourIconDefault } from './components/IconYourIcon.js'

4. 构建

pnpm run build

本地开发

# 启动 watch 模式
pnpm run dev

# 构建
pnpm run build

# 在其他包中测试
cd ../playground
pnpm add @anker-in/web-icons

🛠️ 构建配置

• esbuild - 快速构建 ESM 和 CJS 模块
• TypeScript - 生成类型声明文件
• 双构建 - 同时输出 ESM (dist/esm) 和 CJS (dist/cjs)

📝 命名规范

Figma → 组件名称转换

| Figma 名称 | 组件名称 | |-----------|---------| | icon_bag | IconBag | | icon_search | IconSearch | | icon_30 day warranty | Icon30DayWarranty | | icon_3D | Icon3D |

转换规则：

1. 移除 icon_ 前缀
2. 转换为 PascalCase（首字母大写驼峰）
3. 数字开头的加 Icon 前缀
4. 空格转为驼峰

🤝 贡献

欢迎提交 Pull Request！请确保：

1. 遵循现有的命名规范
2. 所有图标组件有清晰的 TypeScript 类型
3. 单色图标支持 color 属性
4. 彩色图标不接受 color 属性（使用 Omit<IconProps, 'color'>）

📄 许可证

GPLv3

🔗 相关资源

• Figma 设计系统
• Headless UI 文档
• monorepo 根目录

维护者: DTC IT Team
版本: 0.1.0
最后更新: 2026-04-10