@bm-fe/icons 0.2.0-beta.0 → 0.2.0-beta.2

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.0-beta.1] - 2026-03-18
+
+### Fixed
+
+- 生成器将 SVG 连字符属性（如 `clip-path`）转换为 React camelCase（`clipPath`）
+
+## [0.2.0-beta.0] - 2026-03-18
+
+### Changed
+
+- **BREAKING**: 重新设计 API — 移除 IconBase 包装组件，改为直接导出 SVG 组件
+- 组件使用 `forwardRef`，支持 `size` prop 和 `currentColor`
+- 重写生成器脚本，直接输出 SVG 组件
+
 ## [0.1.0-beta.0] - 2024-01-XX
 
 ### Added
@@ -19,4 +33,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - 移除 Vue2/Vue3 适配层，仅保留 React 适配层
-

package/README.md

@@ -38,6 +38,31 @@ function App() {
 }
 ```
 
+### 站内信/通知相关图标（本次新增）
+
+```tsx
+import { Envelope, Back, MarkRead, EmptyIllustration, ErrorIllustration } from '@bm-fe/icons';
+
+export function Example() {
+  return (
+    <div style={{ display: 'grid', gap: 12, color: '#111' }}>
+      {/* 线性图标：跟随 currentColor */}
+      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+        <Envelope size={20} />
+        <Back size={24} />
+        <MarkRead size={24} />
+      </div>
+
+      {/* 插画：默认使用 CSS 变量；若未提供变量会使用 fallback 色，便于预览 */}
+      <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
+        <EmptyIllustration size={96} />
+        <ErrorIllustration size={96} />
+      </div>
+    </div>
+  );
+}
+```
+
 ### React 组件 Props
 
 | Prop | 类型 | 默认值 | 说明 |
@@ -290,6 +315,16 @@ function getFlagUrl(countryCode) {
 - **currentColor**: 图标颜色继承父元素的 `color` 属性，可通过 CSS 自定义颜色
 - **固定色**: 图标保持原始设计颜色，不支持颜色自定义
 
+### 插画类 SVG 的 CSS 变量说明
+
+部分插画（例如 `EmptyIllustration` / `ErrorIllustration`）使用 CSS 变量着色：
+
+- `--notification-empty-icon`
+- `--notification-empty-bg`
+- `--notification-bg`
+
+当宿主没有提供这些变量时，SVG 内部会使用 `var(--token, fallback)` 的 fallback 颜色，因此在编辑器/预览器里也能看到图形。
+
 ## 尺寸规范
 
 推荐尺寸：`12 | 16 | 20 | 24 | 32`

package/core/manifest.json

@@ -142,6 +142,14 @@
       "componentName": "AZN",
       "colorStrategy": "fixed"
     },
+    {
+      "name": "back",
+      "category": "product",
+      "file": "svg/product/back.svg",
+      "componentName": "Back",
+      "colorStrategy": "currentColor",
+      "subcategory": "line"
+    },
     {
       "name": "BDT",
       "category": "currency",
@@ -422,6 +430,30 @@
       "componentName": "EGP",
       "colorStrategy": "fixed"
     },
+    {
+      "name": "empty-illustration",
+      "category": "product",
+      "file": "svg/product/empty-illustration.svg",
+      "componentName": "EmptyIllustration",
+      "colorStrategy": "fixed",
+      "subcategory": "line"
+    },
+    {
+      "name": "envelope",
+      "category": "product",
+      "file": "svg/product/envelope.svg",
+      "componentName": "Envelope",
+      "colorStrategy": "currentColor",
+      "subcategory": "line"
+    },
+    {
+      "name": "error-illustration",
+      "category": "product",
+      "file": "svg/product/error-illustration.svg",
+      "componentName": "ErrorIllustration",
+      "colorStrategy": "fixed",
+      "subcategory": "line"
+    },
     {
       "name": "EUR",
       "category": "currency",
@@ -766,6 +798,14 @@
       "componentName": "Markets",
       "colorStrategy": "currentColor"
     },
+    {
+      "name": "mark-read",
+      "category": "product",
+      "file": "svg/product/mark-read.svg",
+      "componentName": "MarkRead",
+      "colorStrategy": "currentColor",
+      "subcategory": "line"
+    },
     {
       "name": "medium",
       "category": "product",
@@ -2393,5 +2433,5 @@
       "file": "svg/flags/zw.png"
     }
   ],
-  "generatedAt": "2026-03-18T09:15:53.349Z"
+  "generatedAt": "2026-04-08T08:29:45.114Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bm-fe/icons",
-  "version": "0.2.0-beta.0",
+  "version": "0.2.0-beta.2",
   "description": "BitMart 图标库（SVG 源 + React 适配层）",
   "main": "react/dist/index.js",
   "types": "react/dist/index.d.ts",
@@ -28,9 +28,19 @@
     "README.md",
     "CHANGELOG.md"
   ],
+  "scripts": {
+    "build": "npm run optimize:images && npm run generate:manifest && npm run generate:react && npm run build:react",
+    "optimize:images": "npx tsx scripts/optimize-images.ts",
+    "generate:manifest": "npx tsx scripts/generate-manifest.ts",
+    "generate:react": "npx tsx scripts/generate-react.ts",
+    "build:react": "cd react && npx tsup",
+    "type-check": "tsc --noEmit",
+    "dev": "echo 'Icons: run build to generate components'",
+    "yalc:publish": "yalc publish --push"
+  },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",
@@ -56,14 +66,5 @@
     "type": "git",
     "url": "https://gitlab.bitmartpro.com/exchange/web-frontend/infra/design-tokens.git",
     "directory": "packages/icons"
-  },
-  "scripts": {
-    "build": "npm run optimize:images && npm run generate:manifest && npm run generate:react && npm run build:react",
-    "optimize:images": "npx tsx scripts/optimize-images.ts",
-    "generate:manifest": "npx tsx scripts/generate-manifest.ts",
-    "generate:react": "npx tsx scripts/generate-react.ts",
-    "build:react": "cd react && npx tsup",
-    "type-check": "tsc --noEmit",
-    "dev": "echo 'Icons: run build to generate components'"
   }
-}
+}

package/react/dist/Back.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface BackProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
+
+export const Back = React.forwardRef<SVGSVGElement, BackProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path
+            d="M15 19l-7-7 7-7"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+      </svg>
+    );
+  }
+);
+
+Back.displayName = 'Back';

package/react/dist/EmptyIllustration.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export interface EmptyIllustrationProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
+
+export const EmptyIllustration = React.forwardRef<SVGSVGElement, EmptyIllustrationProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 96 96"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path d="M90.0001 15.3047H17.5107V67.8816H90.0001V15.3047Z" fill="var(--notification-empty-icon, #B8B8B8)" />
+          <path
+            d="M47.3775 42.7603H81.4463L90 15.3047H17.5106L6 52.2497H44.4206L47.3775 42.7603Z"
+            fill="var(--notification-empty-bg, #D8D8D8)"
+          />
+          <path
+            d="M64.6594 81.5597C72.2116 81.5597 78.3338 75.4375 78.3338 67.8853C78.3338 60.3332 72.2116 54.2109 64.6594 54.2109C57.1073 54.2109 50.985 60.3332 50.985 67.8853C50.985 75.4375 57.1073 81.5597 64.6594 81.5597Z"
+            fill="var(--notification-bg, #FFFFFF)"
+          />
+          <path
+            d="M37.1363 88.3651C40.8942 88.3651 43.9407 85.3187 43.9407 81.5607C43.9407 77.8028 40.8942 74.7563 37.1363 74.7563C33.3783 74.7563 30.3319 77.8028 30.3319 81.5607C30.3319 85.3187 33.3783 88.3651 37.1363 88.3651Z"
+            fill="var(--notification-empty-bg, #D8D8D8)"
+          />
+          <path
+            d="M64.6594 81.5587C72.2119 81.5587 78.3338 75.4368 78.3338 67.8843H50.985C50.985 75.4368 57.1069 81.5587 64.6594 81.5587Z"
+            fill="var(--notification-empty-bg, #D8D8D8)"
+          />
+      </svg>
+    );
+  }
+);
+
+EmptyIllustration.displayName = 'EmptyIllustration';

package/react/dist/Envelope.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export interface EnvelopeProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
+
+export const Envelope = React.forwardRef<SVGSVGElement, EnvelopeProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path
+            d="M18.3333 5.83331L10.8408 10.6058C10.5865 10.7535 10.2977 10.8313 10.0037 10.8313C9.70968 10.8313 9.42088 10.7535 9.16663 10.6058L1.66663 5.83331"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M16.6666 3.33331H3.33329C2.41282 3.33331 1.66663 4.07951 1.66663 4.99998V15C1.66663 15.9205 2.41282 16.6666 3.33329 16.6666H16.6666C17.5871 16.6666 18.3333 15.9205 18.3333 15V4.99998C18.3333 4.07951 17.5871 3.33331 16.6666 3.33331Z"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+      </svg>
+    );
+  }
+);
+
+Envelope.displayName = 'Envelope';

package/react/dist/ErrorIllustration.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export interface ErrorIllustrationProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
+
+export const ErrorIllustration = React.forwardRef<SVGSVGElement, ErrorIllustrationProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="-5 -14.5 96 96"
+        fill="none"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path
+            d="M68.4911 32.0384C58.8375 32.0384 51.0103 39.8637 51.0103 49.5192C51.0103 59.1746 58.8356 67 68.4911 67C78.1465 67 85.9719 59.1746 85.9719 49.5192C85.9719 39.8637 78.1465 32.0384 68.4911 32.0384ZM70.9488 60.5693H66.0315V55.6521H70.9488V60.5693ZM70.9488 51.632H66.0315V37.9734H70.9488V51.632Z"
+            fill="var(--notification-empty-icon, #B8B8B8)"
+          />
+          <path
+            d="M42.5853 0.00188513C26.682 0.00188513 11.6759 5.82757 0 16.4668L9.4632 26.8762C18.5457 18.6022 30.2178 14.0695 42.5853 14.0695C54.9529 14.0695 66.6269 18.6003 75.7075 26.8743L85.1707 16.465C73.4948 5.82568 58.4868 0 42.5853 0V0.00188513Z"
+            fill="var(--notification-empty-icon, #B8B8B8)"
+            fillOpacity="0.7"
+          />
+          <path
+            d="M61.3342 28.0749C46.7822 20.3418 28.4137 22.2416 15.7389 33.778L25.2021 44.1874C31.7874 38.1939 40.7436 36.2169 48.8931 38.2543C51.6316 33.501 56.0494 29.839 61.3361 28.0749H61.3342Z"
+            fill="var(--notification-empty-icon, #B8B8B8)"
+            fillOpacity="0.7"
+          />
+          <path
+            d="M45.8909 49.638C41.4901 48.5788 36.6784 49.6644 33.1238 52.9023L42.587 63.3117L47.4986 57.9082C46.4752 55.3487 45.906 52.5593 45.8909 49.638Z"
+            fill="var(--notification-empty-icon, #B8B8B8)"
+            fillOpacity="0.7"
+          />
+      </svg>
+    );
+  }
+);
+
+ErrorIllustration.displayName = 'ErrorIllustration';

package/react/dist/MarkRead.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export interface MarkReadProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size — number (px) or string ("1.5em"). Default: "1em" */
+  size?: number | string;
+}
+
+export const MarkRead = React.forwardRef<SVGSVGElement, MarkReadProps>(
+  ({ size, width, height, className, ...props }, ref) => {
+    const sizeValue = typeof size === 'number' ? `${size}px` : size;
+    return (
+      <svg
+        ref={ref}
+        width={sizeValue ?? width ?? '1em'}
+        height={sizeValue ?? height ?? '1em'}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        className={className}
+        {...props}
+      >
+        <path
+            d="M13 6H19.6025L19.7373 6.8418L21.9873 20.8418L22.1738 22H1.82617L2.0127 20.8418L4.2627 6.8418L4.39746 6H11V2H13V6ZM4.17383 20H19.8262L18.7012 13H5.29883L4.17383 20ZM5.61914 11H18.3809L17.8984 8H6.10156L5.61914 11Z"
+            fill="currentColor"
+          />
+      </svg>
+    );
+  }
+);
+
+MarkRead.displayName = 'MarkRead';