加密货币图标
键入叉 密码-货币 用于生成 BitGo 应用程序中使用的 SVG 图标和反应组件.
安装
npm install @bitgo-forks/cryptocurrency-icons
使用量
SVG 图标
直接从软件包导入 SVG 文件 :
// Color icons (recommended)
import btcIcon from '@bitgo-forks/cryptocurrency-icons/svg/color/btc.svg';
// Monochrome variants
import btcWhite from '@bitgo-forks/cryptocurrency-icons/svg/white/btc.svg';
import btcBlack from '@bitgo-forks/cryptocurrency-icons/svg/black/btc.svg';
import btcOutline from '@bitgo-forks/cryptocurrency-icons/svg/icon/btc.svg';
反应组件
导入并使用带有 prefixId iD 命名间隔的道具 :
import BtcIcon from '@bitgo-forks/cryptocurrency-icons/react/btc';
function MyComponent() {
return (
<BtcIcon
prefixId="unique-id"
width={32}
height={32}
/>
);
}
这个 prefixId 道克在同一页上渲染多图标时可以防止CSS/ID相撞.
PNG 图标
预先交付的PNG图标有多个大小:
32/- 32x32像素32@2x/- 64x64像素(视网膜)128/- 128x128 像素
这些传统道路仍然可供现有消费者使用。 只新建光栅
没有 SVG 表示式的图标使用明文 png/ 路径 :
import faiIcon from '@bitgo-forks/cryptocurrency-icons/png/128/color/baseethfai.png';
仅使用鼠标身份声明 formats: ["png"] 内 manifest.json。 。 。 .
它们不是作为 SVG 或 React 组件生成的. 运行时间消费者应当
使用 PNG CDN 元数据,而不是假设每个显示的条目都有 SVG .
声明
这个 manifest.json 文件包含所有图标的元数据 :
{
"symbol": "BTC",
"name": "Bitcoin",
"color": "#f7931a",
"formats": ["svg"]
}
用于程序访问图标元数据、颜色、显示名称和
现有陈述。 使用现有矢量图标 formats: ["svg"]· ;
仅使用光栅例外 formats: ["png"]。 。 。 .
添加新图标
- 将您的 SVG 添加到
svg/color/目录( 小写文件名) - 将符号添加到
manifest.json - 运行生成脚本 :
npm install
npm run manifest
npm run generate
- 提交 SVG 和生成的 React 组件
添加 PNG 仅限图标
用于不适合忠实矢量化的艺术作品 。 PNG-仅限图标是一种添加型格式,不创建SVG或生成的React组件.
- 增加核定巴布亚新几内亚产出
png/数字 :png/128/color/{symbol}.png png/32/color/{symbol}.png png/32@2x/color/{symbol}@2x.png - 添加
formats: ["png"]到图标manifest.json记录. - 运行 :
npm run manifest npm run cdn-manifest npm run sync-check npm run test:pack - 在光明和黑暗的消费者背景下审查图标.
不添加 PNG 身份到 svg/color/, (中文(简体) ), react/,或生成的 SVG 反应枪管。 只有SVG的消费者会使用他们通常的通用回落;光栅意识的消费者使用PNG CDN元数据或 png/* 软件包路径.
这个 cdn-manifest.json 文件在源控件中生成并被忽略。 它包含现有的 SVG 变体地图外加可选 png 散列 PNG 资产的命名空间.
SVG需求
- 最大文件大小: 100KB(建议: < 20KB)
- 格式: 适当的向量 SVG(无嵌入式PNG/JPEG Base64数据)
- 视图框: 必须包含
viewBox属性 - 类名: 避免类似通用名称
cls-1或者说st0(将自动前置)
见 捐款额 详细指南.
脚本
| 脚本 | 说明 |
|---|---|
npm run generate | 从 SVG 生成反应组件 |
npm run manifest | 更新硬币名称和颜色的明细表.json |
npm run cdn-manifest | 生成散列的 SVG/PNG CDN 资产和元数据 |
npm run clean | 用 svgo 优化 SVG |
npm run validate | 检查 SVG 大小并检测嵌入式图像 |
npm run sync-check | 验证 SVG/反应/明显对等 |
npm run test:pack | 验证已公布的软件包内容和导出 |
npm run preflight | 执行前运行全部验证 |
npm run storybook | 用于图标库/预览的 Dev 服务器( 端口 6006) |
npm run build-storybook | 静态故事书的建立 – storybook-static/ |
npm run test:storybook | 图片库单元测试 + 静态故事书构建( smoke) |
故事本( PR 预览)
触摸图标或故事本运行的 PR 故事本 PR 预览 在 GitHub 动作中: 更改的 SVG 路径写入 stories/changed-icons.json,然后将静态构建同步到 dev 自动测试报告 脚下 cryptocurrency-icons-ci/pr-<number>/ (模式与 Playwright 报告相同;而非制作) cdn.bitgo.com) (中文(简体) ). 见 WEB-718 (英语) / CE-9917 (英语).
当地:
npm install
npm run storybook
# or verify a production build:
npm run test:storybook
测试
npm test 运行 SVG 验证、同步检查、 CDN 包检查,以及 故事书画廊逻辑 单位测试(scripts/test-storybook-gallery-logic.mjs) (中文(简体) ). 这些测试包括显示文件名的正常化、显示搜索和匹配的 PR 路径更改为 svg/<variant>/<file>.svg (规则与 stories/helpers.ts已执行 scripts/storybook-gallery-logic.mjs) (中文(简体) ).
用于故事书UI和捆绑,运行 npm run test:storybook (进行画廊测试) build-storybook) (中文(简体) ). 见 试验. md 用于更广泛的验证和发布清单.
仓库结构
cryptocurrency-icons/
├── svg/
│ ├── color/ # Full-color icons (primary)
│ ├── white/ # White monochrome
│ ├── black/ # Black monochrome
│ └── icon/ # Outline icons
├── react/ # Generated React components
├── 32/ # 32px PNG exports
├── 32@2x/ # 64px PNG exports (retina)
├── 128/ # 128px PNG exports
├── png/ # New PNG-only icon outputs
├── manifest.json # Icon metadata, including optional formats
├── .storybook/ # Storybook config (dev + PR preview builds)
├── stories/ # Storybook stories + `changed-icons.json` (CI-filled on PRs)
└── scripts/ # Generation, validation, and tests
捐款
见 捐款额 提交指南.
维护者
见 维持状态 用于维护工作流程.
许可证
CC0-1.0 (英语) - 公共领域