Aplus-icon

Appearance

图标构建 ​

目录结构 ​

aplus-frontend-icon 是一个monorepo单仓多包项目,文件夹结构如下:

所有需要添加的 svg 图标文件

├── package.json
├── packages
│   ├── icons  //真正会发版的图标库
│   │   ├── Readme.md
│   │   ├── dist
│   │   ├── package.json
│   │   ├── scripts
│   │   │   └── build
│   │   │       ├── generate-vue-icons.ts
│   │   │       ├── index.ts
│   │   │       ├── utils
│   │   │       │   ├── paths.ts
│   │   │       │   └── run.ts
│   │   │       └── wash-svg-data.ts
│   │   ├── src
│   │   │   └── svg //源svg文件会放在这里，新添加的图标需要放在这里
│   │   ├── tsconfig.json
│   │   └── vite.config.ts
│   └── site //文档网站
│       ├── package.json
│       ├── public
│       │   ├── logo-black.png
│       │   ├── logo-white.png
│       │   └── logo.jpg
│       ├── template
│       │   └── IconDisplay
│       │       ├── Category.jsx
│       │       ├── CopyableIcon.vue
│       │       ├── fields.js
│       │       ├── icon.less
│       │       ├── index.jsx
│       │       └── themeIcons.jsx
│       └── vite.config.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.json
├── vite-env.d.ts
└── vite-shime.d.ts

构建命令 ​

  • 构建图标

项目根目录下执行

bash
  pnpm build:icons # 图标构建
  • 文档开发和发布

项目根目录下执行

bash
  pnpm docs:dev #文档开发启动

  pnpm docs:build #文档生成构建
  • 代码检查

项目根目录下执行

bash
  pnpm lint #只检查不修复问题

  pnpm lint:fix #检查并修复问题
  • 图标库发布

项目根目录下执行

bash
  pnpm release:major #发布主版本

  pnpm release:minor  #发布小版本

  pnpm release:patch #发布小迭代

  pnpm release:major:beta #发布主版本beta

  pnpm release:minor:beta  #发布小版本beta

  pnpm release:patch:beta #发布小迭代beta

  pnpm commit #代码提交

发版操作流程 ​

  1. 新图标拷贝到aplus-frontend-uicon/packages/icons/src/svg中

  2. 执行pnpm commit 填写更改信息，一路回车

  3. 根据实际需要运行上述图标库发布命令

  4. aplus-frontend-icon流水线运行发布最新文档