@shulex/icons 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,100 @@
1
+ # @shulex/icons
2
+
3
+ Shulex 图标组件库,基于 React 的 SVG 图标组件。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ npm install @shulex/icons
9
+ # or
10
+ pnpm add @shulex/icons
11
+ ```
12
+
13
+ ## 使用
14
+
15
+ ```tsx
16
+ import { SearchOutlined } from '@shulex/icons';
17
+
18
+ function App() {
19
+ return (
20
+ <div>
21
+ <SearchOutlined style={{ fontSize: 24, color: '#1890ff' }} />
22
+ </div>
23
+ );
24
+ }
25
+ ```
26
+
27
+ ## 开发
28
+
29
+ ### 预览图标
30
+
31
+ ```bash
32
+ pnpm dev
33
+ ```
34
+
35
+ 启动 Playground 开发服务器,在浏览器中预览所有图标。支持:
36
+ - 实时预览所有图标
37
+ - 搜索图标
38
+ - 调整图标大小和颜色
39
+ - 点击图标复制 import 语句
40
+ - 新生成的图标会自动显示(无需修改代码)
41
+
42
+ ### 当前工作流程
43
+
44
+ 1. **添加 SVG 文件**
45
+ 将 SVG 图标文件复制到 `static/` 文件夹
46
+ 图标设计稿:https://www.figma.com/design/IhHjRADCpQ8S8jGgzqIcCA/%E5%B7%A5%E5%8D%95%E7%B3%BB%E7%BB%9F%E8%AE%BE%E8%AE%A1%E7%BB%84%E4%BB%B6?node-id=690-4864&m=dev
47
+
48
+ 2. **生成图标组件**
49
+ ```bash
50
+ pnpm generate
51
+ ```
52
+ 自动将 `static/` 下的 SVG 文件转换为 React 组件,输出到 `src/icons/`
53
+
54
+ 3. **预览图标**
55
+ ```bash
56
+ pnpm dev
57
+ ```
58
+ 在浏览器中查看生成的图标效果
59
+
60
+ 4. **构建**
61
+ ```bash
62
+ pnpm build
63
+ ```
64
+ 打包生成 `dist/` 目录
65
+
66
+ ### 未来工作流程(规划中)
67
+
68
+ 未来将支持从 Figma 直接同步图标资源:
69
+
70
+ 1. **同步 Figma 图标**
71
+ ```bash
72
+ pnpm sync
73
+ ```
74
+ 自动从 Figma 拉取最新图标并生成组件
75
+
76
+ 2. **构建发布**
77
+ ```bash
78
+ pnpm build
79
+ ```
80
+
81
+ > **说明**:`pnpm sync` 命令会执行 `pull` + `generate`,即先从 Figma 同步 SVG 资源,再生成 React 组件。
82
+
83
+ ## 发布
84
+
85
+ ```bash
86
+ pnpm release
87
+ ```
88
+
89
+ 自动完成版本号升级和发布到 npm。
90
+
91
+ ## 脚本说明
92
+
93
+ | 命令 | 说明 |
94
+ |------|------|
95
+ | `pnpm dev` | 启动 Playground 预览所有图标 |
96
+ | `pnpm generate` | 从 `static/` 生成图标组件到 `src/icons/` |
97
+ | `pnpm build` | 构建生产版本 |
98
+ | `pnpm pull` | 从 Figma 拉取 SVG 文件(未来) |
99
+ | `pnpm sync` | 同步 Figma + 生成组件(未来) |
100
+ | `pnpm release` | 自动升级版本并发布 |
@@ -0,0 +1,9 @@
1
+ import ShulexIcon from "../components/ShulexIcon.mjs";
2
+ import * as React from "react";
3
+ const InnerSvg = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m9.33 12.26.54 2.95H8.26l.54-2.95zM15.26 12.26q.75 0 1.2.62.48.6.47 1.77 0 1.13-.46 1.76t-1.2.63h-.57v-4.78z" }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M19.5 7a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-15a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3zM6.09 18.25v.25h1.6l.36-1.94h2.04l.36 1.94h1.6v-.25l-1.62-7.44-2.73-.01zm7.07-7.45v7.7h2.12q.92 0 1.64-.4.73-.43 1.16-1.27.43-.86.43-2.18t-.43-2.18a3 3 0 0 0-1.16-1.25 3 3 0 0 0-1.64-.42z", clipRule: "evenodd" }), /* @__PURE__ */ React.createElement("path", { d: "M17.5 4a3 3 0 0 1 2.83 2H3.67A3 3 0 0 1 6.5 4zM15.5 1a3 3 0 0 1 2.83 2H5.67A3 3 0 0 1 8.5 1z" }));
4
+ const AdMailFilled = (props, ref) => /* @__PURE__ */ React.createElement(ShulexIcon, { ...props, ref, Icon: InnerSvg, colored: false });
5
+ const RefIcon = React.forwardRef(AdMailFilled);
6
+ if (process.env.NODE_ENV !== "production") {
7
+ RefIcon.displayName = "AdMailFilled";
8
+ }
9
+ export default RefIcon;
@@ -1,9 +1,9 @@
1
1
  import ShulexIcon from "../components/ShulexIcon.mjs";
2
2
  import * as React from "react";
3
3
  const InnerSvg = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9 13a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-6c0-1.1.9-2 2-2zM22 21a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zM22 17a1 1 0 1 1 0 2h-4a1 1 0 1 1 0-2zM22 13a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zM9 1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2zM21 1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2z" }));
4
- const AppListOutlined = (props, ref) => /* @__PURE__ */ React.createElement(ShulexIcon, { ...props, ref, Icon: InnerSvg, colored: false });
5
- const RefIcon = React.forwardRef(AppListOutlined);
4
+ const AppListFilled = (props, ref) => /* @__PURE__ */ React.createElement(ShulexIcon, { ...props, ref, Icon: InnerSvg, colored: false });
5
+ const RefIcon = React.forwardRef(AppListFilled);
6
6
  if (process.env.NODE_ENV !== "production") {
7
- RefIcon.displayName = "AppListOutlined";
7
+ RefIcon.displayName = "AppListFilled";
8
8
  }
9
9
  export default RefIcon;
@@ -1,9 +1,9 @@
1
1
  import ShulexIcon from "../components/ShulexIcon.mjs";
2
2
  import * as React from "react";
3
3
  const InnerSvg = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22m1 5a1 1 0 1 0-2 0v6q0 .41.3.71l4.24 4.24a1 1 0 0 0 1.41-1.41L13 11.59z", clipRule: "evenodd" }));
4
- const ClockCircleOutlined = (props, ref) => /* @__PURE__ */ React.createElement(ShulexIcon, { ...props, ref, Icon: InnerSvg, colored: false });
5
- const RefIcon = React.forwardRef(ClockCircleOutlined);
4
+ const ClockCircleFilled = (props, ref) => /* @__PURE__ */ React.createElement(ShulexIcon, { ...props, ref, Icon: InnerSvg, colored: false });
5
+ const RefIcon = React.forwardRef(ClockCircleFilled);
6
6
  if (process.env.NODE_ENV !== "production") {
7
- RefIcon.displayName = "ClockCircleOutlined";
7
+ RefIcon.displayName = "ClockCircleFilled";
8
8
  }
9
9
  export default RefIcon;
@@ -1,9 +1,9 @@
1
1
  import ShulexIcon from "../components/ShulexIcon.mjs";
2
2
  import * as React from "react";
3
3
  const InnerSvg = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M10.87 1.56a3 3 0 0 1 2.41.07l7 3.46a2.9 2.9 0 0 1 1.62 2.6v8.62a2.9 2.9 0 0 1-1.62 2.6l-7 3.46a3 3 0 0 1-2.41.07l-.15-.07-7-3.46a2.9 2.9 0 0 1-1.62-2.6V7.7c0-1.1.63-2.11 1.62-2.6l7-3.46zM7.29 8.65a.9.9 0 0 0-.74 1.63l.08.04 4.47 2.03v4.42a.9.9 0 0 0 1.8 0v-4.42l4.47-2.03a.9.9 0 0 0-.74-1.64L12 10.78l-4.63-2.1z", clipRule: "evenodd" }));
4
- const IntegrationOutlined = (props, ref) => /* @__PURE__ */ React.createElement(ShulexIcon, { ...props, ref, Icon: InnerSvg, colored: false });
5
- const RefIcon = React.forwardRef(IntegrationOutlined);
4
+ const IntegrationFilled = (props, ref) => /* @__PURE__ */ React.createElement(ShulexIcon, { ...props, ref, Icon: InnerSvg, colored: false });
5
+ const RefIcon = React.forwardRef(IntegrationFilled);
6
6
  if (process.env.NODE_ENV !== "production") {
7
- RefIcon.displayName = "IntegrationOutlined";
7
+ RefIcon.displayName = "IntegrationFilled";
8
8
  }
9
9
  export default RefIcon;
@@ -1,9 +1,9 @@
1
- export { default as AdMailColored } from './AdMailColored';
1
+ export { default as AdMailFilled } from './AdMailFilled';
2
2
  export { default as AdMailOutlined } from './AdMailOutlined';
3
3
  export { default as AiFilled } from './AiFilled';
4
4
  export { default as AmazonLogoColored } from './AmazonLogoColored';
5
5
  export { default as AmazonLogoFilled } from './AmazonLogoFilled';
6
- export { default as AppListOutlined } from './AppListOutlined';
6
+ export { default as AppListFilled } from './AppListFilled';
7
7
  export { default as AppstoreFilled } from './AppstoreFilled';
8
8
  export { default as AppstoreOutlined } from './AppstoreOutlined';
9
9
  export { default as ArchiveFilled } from './ArchiveFilled';
@@ -38,7 +38,7 @@ export { default as ChannelOutlined } from './ChannelOutlined';
38
38
  export { default as CheckCircleFilled } from './CheckCircleFilled';
39
39
  export { default as CheckCircleOutlined } from './CheckCircleOutlined';
40
40
  export { default as CheckOutlined } from './CheckOutlined';
41
- export { default as ClockCircleOutlined } from './ClockCircleOutlined';
41
+ export { default as ClockCircleFilled } from './ClockCircleFilled';
42
42
  export { default as ClockOutlined } from './ClockOutlined';
43
43
  export { default as CloseCircleFilled } from './CloseCircleFilled';
44
44
  export { default as CloseCircleOutlined } from './CloseCircleOutlined';
@@ -121,7 +121,7 @@ export { default as InfoCircleFilled } from './InfoCircleFilled';
121
121
  export { default as InfoCircleOutlined } from './InfoCircleOutlined';
122
122
  export { default as InstagramLogoColored } from './InstagramLogoColored';
123
123
  export { default as InstagramLogoFilled } from './InstagramLogoFilled';
124
- export { default as IntegrationOutlined } from './IntegrationOutlined';
124
+ export { default as IntegrationFilled } from './IntegrationFilled';
125
125
  export { default as IntercomLogoColored } from './IntercomLogoColored';
126
126
  export { default as ItalicOutlined } from './ItalicOutlined';
127
127
  export { default as JijiaLogoColored } from './JijiaLogoColored';
@@ -185,7 +185,6 @@ export { default as RichTextOutlined } from './RichTextOutlined';
185
185
  export { default as RightOutlined } from './RightOutlined';
186
186
  export { default as RobotFilled } from './RobotFilled';
187
187
  export { default as RobotOutlined } from './RobotOutlined';
188
- export { default as SalesforceLogoColored } from './SalesforceLogoColored';
189
188
  export { default as ScanOutlined } from './ScanOutlined';
190
189
  export { default as SearchOutlined } from './SearchOutlined';
191
190
  export { default as SelfStudyOutlined } from './SelfStudyOutlined';
@@ -1,9 +1,9 @@
1
- export { default as AdMailColored } from "./AdMailColored.mjs";
1
+ export { default as AdMailFilled } from "./AdMailFilled.mjs";
2
2
  export { default as AdMailOutlined } from "./AdMailOutlined.mjs";
3
3
  export { default as AiFilled } from "./AiFilled.mjs";
4
4
  export { default as AmazonLogoColored } from "./AmazonLogoColored.mjs";
5
5
  export { default as AmazonLogoFilled } from "./AmazonLogoFilled.mjs";
6
- export { default as AppListOutlined } from "./AppListOutlined.mjs";
6
+ export { default as AppListFilled } from "./AppListFilled.mjs";
7
7
  export { default as AppstoreFilled } from "./AppstoreFilled.mjs";
8
8
  export { default as AppstoreOutlined } from "./AppstoreOutlined.mjs";
9
9
  export { default as ArchiveFilled } from "./ArchiveFilled.mjs";
@@ -38,7 +38,7 @@ export { default as ChannelOutlined } from "./ChannelOutlined.mjs";
38
38
  export { default as CheckCircleFilled } from "./CheckCircleFilled.mjs";
39
39
  export { default as CheckCircleOutlined } from "./CheckCircleOutlined.mjs";
40
40
  export { default as CheckOutlined } from "./CheckOutlined.mjs";
41
- export { default as ClockCircleOutlined } from "./ClockCircleOutlined.mjs";
41
+ export { default as ClockCircleFilled } from "./ClockCircleFilled.mjs";
42
42
  export { default as ClockOutlined } from "./ClockOutlined.mjs";
43
43
  export { default as CloseCircleFilled } from "./CloseCircleFilled.mjs";
44
44
  export { default as CloseCircleOutlined } from "./CloseCircleOutlined.mjs";
@@ -121,7 +121,7 @@ export { default as InfoCircleFilled } from "./InfoCircleFilled.mjs";
121
121
  export { default as InfoCircleOutlined } from "./InfoCircleOutlined.mjs";
122
122
  export { default as InstagramLogoColored } from "./InstagramLogoColored.mjs";
123
123
  export { default as InstagramLogoFilled } from "./InstagramLogoFilled.mjs";
124
- export { default as IntegrationOutlined } from "./IntegrationOutlined.mjs";
124
+ export { default as IntegrationFilled } from "./IntegrationFilled.mjs";
125
125
  export { default as IntercomLogoColored } from "./IntercomLogoColored.mjs";
126
126
  export { default as ItalicOutlined } from "./ItalicOutlined.mjs";
127
127
  export { default as JijiaLogoColored } from "./JijiaLogoColored.mjs";
@@ -185,7 +185,6 @@ export { default as RichTextOutlined } from "./RichTextOutlined.mjs";
185
185
  export { default as RightOutlined } from "./RightOutlined.mjs";
186
186
  export { default as RobotFilled } from "./RobotFilled.mjs";
187
187
  export { default as RobotOutlined } from "./RobotOutlined.mjs";
188
- export { default as SalesforceLogoColored } from "./SalesforceLogoColored.mjs";
189
188
  export { default as ScanOutlined } from "./ScanOutlined.mjs";
190
189
  export { default as SearchOutlined } from "./SearchOutlined.mjs";
191
190
  export { default as SelfStudyOutlined } from "./SelfStudyOutlined.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shulex/icons",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "private": false,
5
5
  "description": "Shulex 图标组件库",
6
6
  "license": "MIT",
@@ -22,17 +22,9 @@
22
22
  "files": [
23
23
  "dist"
24
24
  ],
25
- "scripts": {
26
- "build": "unbuild",
27
- "generate": "rimraf src/icons && cross-env TS_NODE_PROJECT=tsconfig.node.json node --no-warnings=ExperimentalWarning --loader ts-node/esm scripts/generate.ts",
28
- "prepublishOnly": "yarn build",
29
- "publish:npm": "npm publish --access public",
30
- "pull": "node syncByFigma.js",
31
- "release": "bumpp --no-tag --no-commit --no-push && yarn publish --access public",
32
- "sync": "yarn pull && yarn generate"
33
- },
34
25
  "dependencies": {
35
- "@rc-component/util": "^1.2.2"
26
+ "@rc-component/util": "^1.2.2",
27
+ "classnames": "^2.5.1"
36
28
  },
37
29
  "devDependencies": {
38
30
  "@svgr/core": "^8.1.0",
@@ -45,8 +37,10 @@
45
37
  "@types/lodash-es": "^4.17.12",
46
38
  "@types/node": "^24.1.0",
47
39
  "@types/react": "^18",
40
+ "@types/react-dom": "^18",
48
41
  "@types/through2": "^2.0.41",
49
42
  "@types/vinyl": "^2.0.12",
43
+ "@vitejs/plugin-react": "^4.3.4",
50
44
  "axios": "^1.13.2",
51
45
  "bumpp": "^10.4.0",
52
46
  "cross-env": "^7.0.3",
@@ -57,10 +51,23 @@
57
51
  "gulp-rename": "^2.1.0",
58
52
  "lodash-es": "^4.17.21",
59
53
  "react": "^18",
54
+ "react-dom": "^18",
60
55
  "rimraf": "^6.0.1",
61
56
  "through2": "^4.0.2",
62
57
  "ts-node": "^10.9.2",
63
58
  "unbuild": "^3.5.0",
59
+ "vite": "^6.0.7",
64
60
  "vinyl": "^3.0.1"
61
+ },
62
+ "engines": {
63
+ "node": "20.x"
64
+ },
65
+ "scripts": {
66
+ "build": "unbuild",
67
+ "dev": "vite --config playground/vite.config.ts",
68
+ "generate": "rimraf src/icons && cross-env TS_NODE_PROJECT=tsconfig.node.json node --no-warnings=ExperimentalWarning --loader ts-node/esm scripts/generate.ts",
69
+ "pull": "node syncByFigma.js",
70
+ "release": "bumpp --no-tag --no-push && pnpm publish --access public",
71
+ "sync": "pnpm pull && pnpm generate"
65
72
  }
66
- }
73
+ }
@@ -1,9 +0,0 @@
1
- import ShulexIcon from "../components/ShulexIcon.mjs";
2
- import * as React from "react";
3
- const InnerSvg = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "none", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { fill: "#1D2C47", d: "m9.33 12.26.54 2.95H8.26l.54-2.95zM15.26 12.26q.75 0 1.2.62.48.6.47 1.77 0 1.13-.46 1.76t-1.2.63h-.57v-4.78z" }), /* @__PURE__ */ React.createElement("path", { fill: "#1D2C47", fillRule: "evenodd", d: "M19.5 7a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-15a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3zM6.09 18.25v.25h1.6l.36-1.94h2.04l.36 1.94h1.6v-.25l-1.62-7.44-2.73-.01zm7.07-7.45v7.7h2.12q.92 0 1.64-.4.73-.43 1.16-1.27.43-.86.43-2.18t-.43-2.18a3 3 0 0 0-1.16-1.25 3 3 0 0 0-1.64-.42z", clipRule: "evenodd" }), /* @__PURE__ */ React.createElement("path", { fill: "#1D2C47", d: "M17.5 4a3 3 0 0 1 2.83 2H3.67A3 3 0 0 1 6.5 4zM15.5 1a3 3 0 0 1 2.83 2H5.67A3 3 0 0 1 8.5 1z" }));
4
- const AdMailColored = (props, ref) => /* @__PURE__ */ React.createElement(ShulexIcon, { ...props, ref, Icon: InnerSvg, colored: true });
5
- const RefIcon = React.forwardRef(AdMailColored);
6
- if (process.env.NODE_ENV !== "production") {
7
- RefIcon.displayName = "AdMailColored";
8
- }
9
- export default RefIcon;
@@ -1,4 +0,0 @@
1
- import { ShulexIconProps } from '../components/ShulexIcon';
2
- import * as React from "react";
3
- declare const RefIcon: React.ForwardRefExoticComponent<Omit<ShulexIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
4
- export default RefIcon;
@@ -1,9 +0,0 @@
1
- import ShulexIcon from "../components/ShulexIcon.mjs";
2
- import * as React from "react";
3
- const InnerSvg = (props) => /* @__PURE__ */ React.createElement("svg", { xmlnsXlink: "http://www.w3.org/1999/xlink", fill: "none", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { fill: "url(#pattern0_2640_56549)", d: "M1 4H23V19H1z" }), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("pattern", { id: "pattern0_2640_56549", width: 1, height: 1, patternContentUnits: "objectBoundingBox" }, /* @__PURE__ */ React.createElement("use", { xlinkHref: "#image0_2640_56549", transform: "matrix(.00467 0 0 .00667 0 0)" }))));
4
- const SalesforceLogoColored = (props, ref) => /* @__PURE__ */ React.createElement(ShulexIcon, { ...props, ref, Icon: InnerSvg, colored: true });
5
- const RefIcon = React.forwardRef(SalesforceLogoColored);
6
- if (process.env.NODE_ENV !== "production") {
7
- RefIcon.displayName = "SalesforceLogoColored";
8
- }
9
- export default RefIcon;