Feat/readme

.changeset/config.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": "@changesets/changelog-git",
-  "commit": true,
+  "commit": false,
   "access": "public",
   "baseBranch": "master",
   "fixed": [],

CONTRIBUTING.md

@@ -0,0 +1,25 @@
+# How to contribute
+
+**It is a pnpm monorepo repo.**
+
+## develop
+
+First of all, run `pnpm install`.
+
+Then comply with ESLINT and TS specifications, and nothing else matters.
+
+## push
+
+Before you can create a pull request, you first need to run the `npm run test` command locally.
+
+## release
+
+**Only the administrators can run**
+
+-   Run `npm run changelog` when you take some changes for per package.
+
+-   Run `npm run version` to ensure the version of package is correct, and make the changelog.
+
+-   Before publish, you should **build** the package which you want to publish.
+
+-   Run `npm run release` to publish the package. Or run the release github action.

README.en_US.md

@@ -0,0 +1,17 @@
+[中文](https://github.com/taoliujun/svg-to-component/blob/master/README.zh_CN.md) | [English](https://github.com/taoliujun/svg-to-component/blob/master/README.en_US.md)
+
+This project provides the following features:
+
+-   [CLI](./packages/cli/), provide a command line to:
+    -   Invoke the parse function to convert SVG files to React component files.
+    -   Invoke the preview function to preview SVG files.
+    -   See [README](./packages/cli/README.md).
+    -   See [CHANGELOG](./packages/cli/CHANGELOG.md).
+-   [parse](./packages/parse/), convert SVG code to React Component code, and support multi-color configuration.
+    -   See [README](./packages/parse/README.md).
+    -   See [CHANGELOG](./packages/parse/CHANGELOG.md).
+-   [preview](./packages/preview/), preview the SVG file in the browser and copy the component code after interaction.
+    -   See [README](./packages/preview/README.md).
+    -   See [CHANGELOG](./packages/preview/CHANGELOG.md).
+
+For common users, the CLI package is sufficient. For specific use, see the README of each package.

README.zh_CN.md

@@ -0,0 +1,17 @@
+[中文](https://github.com/taoliujun/svg-to-component/blob/master/README.zh_CN.md) | [English](https://github.com/taoliujun/svg-to-component/blob/master/README.en_US.md)
+
+本项目实现以下功能：
+
+-   [CLI](./packages/cli/)，提供命令行工具：
+    -   调用parse功能，将SVG文件转换为React组件文件。
+    -   调用preview功能，预览SVG文件。
+    -   查看 [README](./packages/cli/README.md)。
+    -   查看 [CHANGELOG](./packages/cli/CHANGELOG.md)。
+-   [parse](./packages/parse/)，将SVG代码转换为React代码，且支持配置多色。
+    -   查看 [README](./packages/parse/README.md)。
+    -   查看 [CHANGELOG](./packages/parse/CHANGELOG.md)。
+-   [preview](./packages/preview/)，在浏览器中预览SVG文件，并可交互后复制组件代码。
+    -   查看 [README](./packages/preview/README.md)。
+    -   查看 [CHANGELOG](./packages/preview/CHANGELOG.md)。
+
+对于普通使用者，使用CLI包即可。具体使用见各包的README。

package.json

@@ -22,7 +22,8 @@
     "version": "npm exec changeset version",
     "release": "npm exec changeset publish",
     "release:token": "cp -f .npmrc .npmrc.bak && echo \"\n//registry.npmjs.org/:_authToken=${NPM_TOKEN}\" >> .npmrc && npm exec changeset publish && cp -f .npmrc.bak .npmrc && rm .npmrc.bak",
-    "build": "pnpm run -r build",
+    "build": "pnpm run -r build && pnpm run build:md",
+    "build:md": "cp -f ./README.zh_CN.md ./README.md",
     "lint": "pnpm run -r lint",
     "lint:ts": "pnpm run -r lint:ts",
     "test": "echo 'test'",

packages/cli/CHANGELOG.md

@@ -1,15 +1,24 @@
 # svg-to-component-cli
 
+## 1.0.1
+
+### Patch Changes
+
+- ad944d2: docs: add readme
+- Updated dependencies [ad944d2]
+  - [email protected]
+  - [email protected]
+
 ## 1.0.0
 
 ### Major Changes
 
--   337b0c5: feat: release 1.0
+- 337b0c5: feat: release 1.0
 
 ### Patch Changes
 
--   Updated dependencies [337b0c5]
--   Updated dependencies [688affa]
--   Updated dependencies [b2f2ea5]
-    -   [email protected]
-    -   [email protected]
+- Updated dependencies [337b0c5]
+- Updated dependencies [688affa]
+- Updated dependencies [b2f2ea5]
+  - [email protected]
+  - [email protected]

packages/cli/README.en_US.md

@@ -0,0 +1,36 @@
+[中文](https://github.com/taoliujun/svg-to-component/blob/master/packages/cli/README.zh_CN.md) | [English](https://github.com/taoliujun/svg-to-component/blob/master/packages/cli/README.en_US.md)
+
+[![npm](https://img.shields.io/npm/v/svg-to-component-cli.svg)](https://www.npmjs.com/package/svg-to-component-cli)
+
+Features
+
+-   Convert SVG files to React component files.
+
+-   Preview SVG files in the browser, and provide color interaction to generate the React component code in using.
+    -   ![image](https://cdn.jsdelivr.net/gh/taoliujun/svg-to-component/assets/readme/preview.png)
+
+## Installation
+
+### NPM
+
+```bash
+npm add svg-to-component-cli
+```
+
+## Usage
+
+-   Convert SVG files to React component files
+
+```shell
+> npm svg-to-component parse ./my-svg-files-path
+```
+
+-   Preview SVG files
+
+```shell
+> npm svg-to-component preview ./my-svg-files-path
+```
+
+## API
+
+See `npm svg-to-component -h`.

packages/cli/README.zh_CN.md

@@ -0,0 +1,36 @@
+[中文](https://github.com/taoliujun/svg-to-component/blob/master/packages/cli/README.zh_CN.md) | [English](https://github.com/taoliujun/svg-to-component/blob/master/packages/cli/README.en_US.md)
+
+[![npm](https://img.shields.io/npm/v/svg-to-component-cli.svg)](https://www.npmjs.com/package/svg-to-component-cli)
+
+功能：
+
+-   将SVG文件转换成React组件文件。
+
+-   在浏览器中预览SVG文件，并提供颜色选项，以生成React组件的使用代码。
+    -   ![image](https://cdn.jsdelivr.net/gh/taoliujun/svg-to-component/assets/readme/preview.png)
+
+## 安装
+
+### NPM
+
+```bash
+npm add svg-to-component-cli
+```
+
+## 使用
+
+-   将SVG文件转换成React组件文件
+
+```shell
+> npm svg-to-component parse ./my-svg-files-path
+```
+
+-   预览SVG文件
+
+```shell
+> npm svg-to-component preview ./my-svg-files-path
+```
+
+## API
+
+见`npm svg-to-component -h`。

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svg-to-component-cli",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "parse svg files into react components, support dynamic colors and preview.",
     "keywords": [
         "svg",
@@ -31,7 +31,8 @@
     "scripts": {
         "lint": "eslint --cache src",
         "lint:ts": "tsc --noEmit",
-        "build": "rm -rf ./lib && tsc"
+        "build": "rm -rf ./lib && tsc && pnpm run build:md",
+        "build:md": "cp -f ./README.zh_CN.md ./README.md"
     },
     "dependencies": {
         "chalk": "^4.1.2",

packages/cli/src/preview.ts

@@ -1,7 +1,8 @@
 import path from 'path';
 import { Command } from 'commander';
 import { packagePath as previewPackagePath, componentsPath } from 'svg-to-component-preview';
 import { spawn } from 'child_process';
+import fs from 'fs';
 import { log, outputMain } from './log';
 import { generateComponentFiles } from './parse';
 
@@ -12,6 +13,9 @@
     .argument('path <string>', 'the directory of the SVG files')
     .option('--debug', 'output the debug log')
     .action(async (args, opts) => {
+        fs.rmSync(componentsPath, { recursive: true, force: true });
+        fs.mkdirSync(componentsPath);
+
         await generateComponentFiles({
             sourcePath: path.resolve(cwdPath, args),
             outputPath: componentsPath,

packages/parse/CHANGELOG.md

@@ -1,11 +1,17 @@
 # svg-to-component-parse
 
+## 1.0.1
+
+### Patch Changes
+
+- ad944d2: docs: add readme
+
 ## 1.0.0
 
 ### Major Changes
 
--   337b0c5: feat: release 1.0
+- 337b0c5: feat: release 1.0
 
 ### Minor Changes
 
--   688affa: feat: beta1
+- 688affa: feat: beta1

packages/parse/README.en_US.md

@@ -0,0 +1,33 @@
+[中文](https://github.com/taoliujun/svg-to-component/blob/master/packages/parse/README.zh_CN.md) | [English](https://github.com/taoliujun/svg-to-component/blob/master/packages/parse/README.en_US.md)
+
+[![npm](https://img.shields.io/npm/v/svg-to-component-parse.svg)](https://www.npmjs.com/package/svg-to-component-parse)
+
+Convert the SVG code to the React component code.
+
+## Installation
+
+### NPM
+
+```bash
+npm add svg-to-component-parse
+```
+
+## Usage
+
+-   Convert the SVG code to the React component code.
+
+```javascript
+import { generateReact } from 'svg-to-component-parse';
+
+const result = generateReact('YourComponentName', '<svg>...your svg code</svg>');
+```
+
+-   Get the code of the related module of the React component
+
+The helper and utils modules are referenced in the React component code, and this method provides the code and relative paths of these modules.
+
+```javascript
+import { generateComponentUtils } from 'svg-to-component-parse';
+
+const result = generateComponentUtils();
+```

packages/parse/README.zh_CN.md

@@ -0,0 +1,33 @@
+[中文](https://github.com/taoliujun/svg-to-component/blob/master/packages/parse/README.zh_CN.md) | [English](https://github.com/taoliujun/svg-to-component/blob/master/packages/parse/README.en_US.md)
+
+[![npm](https://img.shields.io/npm/v/svg-to-component-parse.svg)](https://www.npmjs.com/package/svg-to-component-parse)
+
+SVG代码转React组件代码。
+
+## 安装
+
+### NPM
+
+```bash
+npm add svg-to-component-parse
+```
+
+## 使用
+
+-   SVG代码转React组件代码
+
+```javascript
+import { generateReact } from 'svg-to-component-parse';
+
+const result = generateReact('YourComponentName', '<svg>...your svg code</svg>');
+```
+
+-   获取React组件代码的helper包
+
+React组件代码中引用了helper、utils模块，本方法提供了这些模块的代码和相对路径。
+
+```javascript
+import { generateComponentUtils } from 'svg-to-component-parse';
+
+const result = generateComponentUtils();
+```

packages/parse/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svg-to-component-parse",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "engines": {
         "node": "^20"
     },
@@ -14,8 +14,9 @@
     "scripts": {
         "lint": "eslint --cache src",
         "lint:ts": "tsc --noEmit",
-        "build": "rm -rf ./lib && tsc && npm run build:tpl",
-        "build:tpl": "cp -rf ./src/template ./lib"
+        "build": "rm -rf ./lib && tsc && pnpm run build:tpl && pnpm run build:md",
+        "build:tpl": "cp -rf ./src/template ./lib",
+        "build:md": "cp -f ./README.zh_CN.md ./README.md"
     },
     "dependencies": {
         "fast-xml-parser": "^4.2.2",