{"_id":"@anker-in/web-icons","_rev":"17-57f45a84289bc0a4bb8bde07d63cc3c7","name":"@anker-in/web-icons","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@anker-in/web-icons","version":"0.1.0","license":"GPLv3","_id":"@anker-in/web-icons@0.1.0","maintainers":[{"name":"anker-shady","email":"shady.duan@anker-in.com"},{"name":"jessecao","email":"jesse.cao@anker-in.com"},{"name":"ai-wells","email":"wells.xiong@anker-in.com"},{"name":"dtc-it","email":"dtc-it@anker-in.com"},{"name":"neil-in","email":"neil.zhao@anker-in.com"},{"name":"rx99","email":"rong.xiao1@anker-in.com"},{"name":"ethanethanethan","email":"ethan.chu@anker-in.com"},{"name":"ray.xv","email":"ray.xv@anker-in.com"},{"name":"shine12345678","email":"shine.luo@anker-in.com"},{"name":"cris.xu","email":"cris.xu@anker-in.com"},{"name":"godsonliu","email":"godson.liu@anker-in.com"},{"name":"petter.li","email":"petter.li@anker.io"},{"name":"sensenli","email":"sen.sen@anker.io"},{"name":"seasail","email":"seasail.liu@anker.io"},{"name":"josie.zhou","email":"josie.zhou@anker-in.com"}],"dist":{"shasum":"075a10c5b7b8dc821ebd31220c72250d48e05b8c","tarball":"https://registry.npmjs.org/@anker-in/web-icons/-/web-icons-0.1.0.tgz","fileCount":483,"integrity":"sha512-/jlivYo1stLtkgkqe++dZ+oINm8PVx0elGj/zXZM6BslmtbR/V0BGuKFlZuw9J9/Kd9o9WXFMNC9vTEpaVw40g==","signatures":[{"sig":"MEUCIBMIKQPkhphdNWQ8uKatE/nHBmc54UBo+EocfUem4uHpAiEA4KoEZ9tvw/EM2/7GqSz9Or/cYzOUar4VfHzAsA1mAIw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":740521},"main":"./dist/cjs/index.js","type":"commonjs","types":"./dist/cjs/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/cjs/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"6325ed3de664ebfb92a882d34437bf8e35b9048f","scripts":{"dev":"pnpm run build:esm:watch & pnpm run build:cjs:watch & pnpm run build:types:watch","lint":"eslint src/","test":"vitest","build":"pnpm run build:esm && pnpm run build:cjs && pnpm run build:types","generate":"tsx scripts/generate-icons.ts","build:cjs":"node esbuild-cjs.mjs","build:esm":"node esbuild-esm.mjs","build:types":"tsc --project tsconfig.json","build:cjs:watch":"node esbuild-cjs.mjs --watch","build:esm:watch":"node esbuild-esm.mjs --watch","build:types:watch":"tsc --project tsconfig.json --watch"},"_npmUser":{"name":"neil-in","email":"neil.zhao@anker-in.com"},"_npmVersion":"10.8.2","description":"React icon components for Anker web projects (88 icons, excluding brand icons for compliance)","directories":{},"_nodeVersion":"20.19.4","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.19.2","react":"^18.3.1","esbuild":"^0.24.2","typescript":"^5.7.2","@types/react":"^18.3.18"},"peerDependencies":{"react":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/web-icons_0.1.0_1775811624448_0.9787375706170993","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-04-10T09:00:24.339Z","modified":"2026-05-20T08:38:23.449Z","0.0.3":"2025-02-17T09:51:35.458Z","0.0.4":"2025-02-17T09:52:08.014Z","0.0.5":"2025-02-18T03:24:29.508Z","0.1.0":"2026-04-10T09:00:24.655Z"},"license":"GPLv3","description":"React icon components for Anker web projects (88 icons, excluding brand icons for compliance)","maintainers":[{"email":"shady.duan@anker-in.com","name":"anker-shady"},{"email":"jesse.cao@anker-in.com","name":"jessecao"},{"email":"wells.xiong@anker-in.com","name":"ai-wells"},{"email":"dtc-it@anker-in.com","name":"dtc-it"},{"email":"neil.zhao@anker-in.com","name":"neil-in"},{"email":"arnold.fang@anker-in.com","name":"arnold-fang"},{"email":"rong.xiao1@anker-in.com","name":"rx99"},{"email":"ethan.chu@anker-in.com","name":"ethanethanethan"},{"email":"ray.xv@anker-in.com","name":"ray.xv"},{"email":"shine.luo@anker-in.com","name":"shine12345678"},{"email":"cris.xu@anker-in.com","name":"cris.xu"},{"email":"godson.liu@anker-in.com","name":"godsonliu"},{"email":"seasail.liu@anker.io","name":"seasail"},{"email":"josie.zhou@anker-in.com","name":"josie.zhou"}],"readme":"# @anker-in/web-icons\n\nReact 图标组件库，用于 Anker Web 项目。\n\n## ✨ 特性\n\n- ✅ **命名导出** - 支持 Tree-shaking 优化\n- ✅ **TypeScript** - 完整的类型定义\n- ✅ **自定义尺寸** - 支持任意尺寸 (number | string)\n- ✅ **自定义颜色** - 单色图标支持颜色覆盖\n- ✅ **ESM + CJS** - 同时支持 ES Module 和 CommonJS\n- ✅ **零依赖** - 仅需 React 作为 peer dependency\n- ✅ **轻量级** - 未打包的 SVG 组件\n\n## 📦 安装\n\n```bash\npnpm add @anker-in/web-icons\n```\n\n## 🚀 快速开始\n\n```tsx\nimport { IconBag, IconSearch, IconFacebook } from '@anker-in/web-icons'\n\nfunction MyComponent() {\n  return (\n    <div>\n      {/* 基础使用 */}\n      <IconBag />\n      \n      {/* 自定义尺寸 */}\n      <IconSearch size={32} />\n      \n      {/* 自定义颜色（单色图标） */}\n      <IconBag color=\"#FF6B00\" />\n      \n      {/* 继承父元素颜色 */}\n      <div style={{ color: '#333' }}>\n        <IconBag color=\"currentColor\" />\n      </div>\n      \n      {/* 彩色图标（不支持 color 属性） */}\n      <IconFacebook size={40} />\n      \n      {/* 自定义样式和事件 */}\n      <IconSearch \n        size={24}\n        className=\"hover:opacity-80\"\n        style={{ cursor: 'pointer' }}\n        onClick={() => console.log('clicked')}\n      />\n    </div>\n  )\n}\n```\n\n## 📖 API\n\n### IconProps\n\n所有单色图标组件都接受以下 props：\n\n| Prop | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `size` | `number \\| string` | `24` | 图标尺寸（宽高相同） |\n| `color` | `string` | `'currentColor'` | 图标颜色（仅单色图标有效） |\n| `className` | `string` | - | 自定义类名 |\n| `style` | `React.CSSProperties` | - | 自定义样式 |\n| ...其他 SVG 属性 | - | - | 支持所有 SVG 元素属性（除 width/height） |\n\n### 彩色图标\n\n彩色图标（如社交媒体图标）**不支持** `color` 属性，会保持原始设计颜色：\n\n```tsx\n// ✅ 正确 - 彩色图标只支持 size, className, style 等\n<IconFacebook size={32} />\n<IconTwitter size={32} className=\"hover:scale-110\" />\n\n// ❌ 错误 - 彩色图标不支持 color 属性\n<IconFacebook size={32} color=\"#FF0000\" />\n```\n\n## 🎨 可用图标\n\n当前共有 **94 个图标组件**，涵盖以下类别：\n\n### 社交媒体图标（彩色）\n\n| 组件名 | 说明 |\n|--------|------|\n| `IconFacebook` | Facebook |\n| `IconTwitter` | Twitter |\n| `IconInstagram` | Instagram |\n| `IconLinkedin` | LinkedIn |\n| `IconTiktok` | TikTok |\n| `IconYoutube` | YouTube |\n\n### 功能图标（单色）\n\n**电商相关**：`IconBag`, `IconCart`, `IconPayment`, `IconOrders`, `IconReturns`, `IconInvoice`, `IconCoupons`, `IconDiscount`, `IconSale`\n\n**用户相关**：`IconUser`, `IconSubscription`, `IconWallet`, `IconVerified`, `IconHirePurchase`\n\n**内容相关**：`IconText`, `IconPicture`, `IconVideos`, `IconEmail`, `IconChat`, `IconVoice`, `IconEndorsement`\n\n**操作相关**：`IconSearch`, `IconEdit`, `IconDelete`, `IconCopy`, `IconDownload`, `IconRefresh`, `IconAdd`\n\n**导航相关**：`IconHelp`, `IconSupport`, `IconAbout`, `IconMore`, `IconList`, `IconNetwork`\n\n**状态相关**：`IconSuccess`, `IconWrong`, `IconLoading1`, `IconNotice`, `IconStar`, `IconLike`, `IconFavorite`\n\n**设备相关**：`IconHeadphone`, `IconCharging`, `IconChargingMode`, `IconFwupdate`, `IconPlayback`, `IconLock`\n\n**物流相关**：`IconShipping`, `IconPackage`, `IconInTransit`, `IconDelivered`, `IconCalendar`, `IconScan`\n\n**支持相关**：`IconHelp`, `IconUsermanual`, `IconTroubleshooting`, `IconPolicyInquiry`, `IconInquiry`, `IconSecurity`\n\n**其他**：`Icon30DayWarranty`, `Icon3d`, `IconLobby`, `IconCountry`, `IconPositions`, `IconReferral`, `IconLive`, `IconFunctional`, `IconCustomized`, `IconContrast`, `IconEvaluate`\n\n### 完整列表\n\n查看所有图标：访问 [http://localhost:8080/icon-test](http://localhost:8080/icon-test)（需要在 playground 中启动）\n\n## 🔧 开发指南\n\n### 添加新图标\n\n1. **从 Figma 导出 SVG**\n\n在 Figma 中选择图标，右键 > 导出 > SVG\n\n2. **创建组件文件**\n\n```tsx\n// src/components/IconYourIcon.tsx\nimport React from 'react'\nimport type { IconProps } from '../types'\n\nexport const IconYourIcon: React.FC<IconProps> = ({\n  size = 24,\n  color = 'currentColor',\n  className,\n  style,\n  ...props\n}) => {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      style={style}\n      {...props}\n    >\n      {/* 将 Figma 导出的 path 粘贴到这里 */}\n      <path d=\"...\" fill={color} />\n    </svg>\n  )\n}\n\nIconYourIcon.displayName = 'IconYourIcon'\n\nexport default IconYourIcon\n```\n\n3. **更新 src/index.ts**\n\n```tsx\nexport { IconYourIcon, default as IconYourIconDefault } from './components/IconYourIcon.js'\n```\n\n4. **构建**\n\n```bash\npnpm run build\n```\n\n### 本地开发\n\n```bash\n# 启动 watch 模式\npnpm run dev\n\n# 构建\npnpm run build\n\n# 在其他包中测试\ncd ../playground\npnpm add @anker-in/web-icons\n```\n\n## 🛠️ 构建配置\n\n- **esbuild** - 快速构建 ESM 和 CJS 模块\n- **TypeScript** - 生成类型声明文件\n- **双构建** - 同时输出 ESM (`dist/esm`) 和 CJS (`dist/cjs`)\n\n## 📝 命名规范\n\n### Figma → 组件名称转换\n\n| Figma 名称 | 组件名称 |\n|-----------|---------|\n| `icon_bag` | `IconBag` |\n| `icon_search` | `IconSearch` |\n| `icon_30 day warranty` | `Icon30DayWarranty` |\n| `icon_3D` | `Icon3D` |\n\n**转换规则**：\n1. 移除 `icon_` 前缀\n2. 转换为 PascalCase（首字母大写驼峰）\n3. 数字开头的加 `Icon` 前缀\n4. 空格转为驼峰\n\n## 🤝 贡献\n\n欢迎提交 Pull Request！请确保：\n\n1. 遵循现有的命名规范\n2. 所有图标组件有清晰的 TypeScript 类型\n3. 单色图标支持 `color` 属性\n4. 彩色图标不接受 `color` 属性（使用 `Omit<IconProps, 'color'>`）\n\n## 📄 许可证\n\nGPLv3\n\n## 🔗 相关资源\n\n- [Figma 设计系统](https://www.figma.com/design/ZJKADB2lrYH2dyAqZrsfrI/IPC-To-C-Design-System_V1.0?node-id=19746-137103)\n- [Headless UI 文档](https://headless-ui-doc.netlify.app/)\n- [monorepo 根目录](../../README.md)\n\n---\n\n**维护者**: DTC IT Team  \n**版本**: 0.1.0  \n**最后更新**: 2026-04-10\n","readmeFilename":"README.md"}