@nanawan/icon-builder 0.6.1

package/README.md

@@ -0,0 +1,233 @@
+## Intro
+
+`@pui/icon-builder` is a tool to build svg images to icon fonts.
+
+## Installation
+
+### npm
+
+```shell
+npm i @pui/icon-builder -D
+```
+
+### yarn
+
+```shell
+yarn add @pui/icon-builder -D
+```
+
+### pnpm
+
+```shell
+pnpm add @pui/icon-builder -D
+```
+
+## Usage
+
+### Commands
+
+#### build
+
+Build svg into icon font.
+
+```shell
+npx vi build
+
+# watch mode
+npx vi build -w
+```
+
+#### generate
+
+Generate components from svg, support esm, cjs, sfc, types.
+
+```shell
+npx vi generate
+```
+
+#### figma
+
+Pull the svg icon in the figma document to the local.
+
+```shell
+npx vi figma -f <file> -t <token>
+#or token from process.env
+VI_FIGMA_TOKEN=<token> npx vi figma -f <file>
+```
+
+## Configuration File
+
+```js
+// vi.config.ts
+import { defineConfig } from '@pui/icon-builder'
+
+export default defineConfig({
+  name: 'i-icons',
+  namespace: 'i',
+  fontFamilyClassName: 'i--set',
+  entry: './svg-icons',
+  output: './icons',
+  figma: {},
+  generate: {}
+})
+```
+
+## Configuration Type Declaration
+
+```ts
+export interface VIConfig {
+  /**
+   * @default `pui-icons`
+   * font name.
+   */
+  name?: string
+  /**
+   * @default `var-icon`
+   * font name prefix.
+   */
+  namespace?: string
+  /**
+   * @default `true`
+   * output base64
+   */
+  base64?: boolean
+  /**
+   * @default `./svg`
+   * svg icons folder path.
+   */
+  entry?: string
+  /**
+   * @default `./dist`
+   * svg icons folder path.
+   */
+  output?: string
+  /**
+   * @default `var-icon--set`
+   * icon font family class name.
+   */
+  fontFamilyClassName?: string
+  /**
+   * @default `normal`
+   * icon font weight.
+   */
+  fontWeight?: string
+  /**
+   * @default `normal`
+   * icon font style.
+   */
+  fontStyle?: string
+  /**
+   * @default `false`
+   * Whether to output files
+   */
+  emitFile?: boolean
+  /**
+   * icon font public path
+   */
+  publicPath?: string
+   /**
+   * icon font public url
+   */
+  publicURL?: string
+  /**
+   * icon filenames, e.g. ['window-close', 'cog']
+   */
+  filenames?: string[]
+  /**
+   * generate command related options
+   */ 
+  generate?: {
+    /**
+     * @default `./svg`
+     * svg icons folder path
+     */
+    entry?: string
+    /**
+     * @default `XIcon`
+     * wrapper component name, svg file names should avoid using names like x-icon.svg
+     */
+    wrapperComponentName?: string
+    /**
+     * @default `x`
+     * unplugin-vue-components resolver namespace, please same as `wrapperComponentName` namespace
+     */
+    resolverNamespace?: string
+    /**
+     * @default `vue3`
+     * frameworks supported by the icon library
+     */
+    framework?: 'vue3' | 'react'
+    /**
+     * @default `false`
+     * only generate components, do not generate cjs, esm modules and types
+     */
+    componentsOnly?: boolean
+    /**
+     * @default () => false
+     * is colorful icon
+     */
+    colorful?: (name: string, content: string) => boolean 
+    output?: {
+      /**
+       * @default `./svg-components`
+       * component output path
+       */
+      component?: string
+      /**
+       * @default `./svg-types`
+       * ts declaration output path
+       */
+      types?: string
+      /**
+       * @default `./svg-esm`
+       * es module format output path
+       */
+      esm?: string
+      /**
+       * @default `./svg-cjs`
+       * commonjs module format output path
+       */
+      cjs?: string
+      /**
+       * @default `./resolver`
+       * unplugin-vue-components resolver output path
+       */
+      resolver?: string
+    }
+  }
+  /**
+   * figma parsing options
+   */
+  figma?: {
+    /**
+     * figma token
+     * @see https://www.figma.com/developers/api#authentication
+     */
+    token?: string
+    /**
+     * figma file id
+     */
+    file?: string
+    /**
+     * @default `Icons`
+     * figma icons page name
+     */
+    pageName?: string
+    /**
+     * @default `false`
+     * whether to skip downloading svg files when a file with the same name exists locally
+     */
+    skipExisting?: boolean
+    /**
+     * @default `false`
+     * whether to clear the output directory before downloading
+     */
+    clean?: boolean
+    /**
+     * @default `./svg-figma`
+     * output path
+     */
+    output?: string
+  }
+}
+```

package/bin/index.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+import { Command } from 'commander'
+import { build, figma, generate } from '../dist/index.js'
+
+const program = new Command()
+
+program
+  .command('build')
+  .option('-w --watch', 'Watch icons for changes and rebuild')
+  .description('Build icon fonts from svg files')
+  .action(build)
+
+program
+  .command('generate')
+  .option('-e --entry <entry>', 'Svg files directory')
+  .option('-f --framework <framework>', 'Framework name, such as vue3, react')
+  .option('--componentsOnly <componentsOnly>', 'Only generate components, do not generate cjs, esm modules and types')
+  .option('--resolverNamespace <resolverNamespace>', 'Resolver namespace')
+  .option('--wrapperComponentName <wrapperComponentName>', 'Wrapper component name')
+  .option('--outputComponents <outputComponents>', 'Output svg component directory')
+  .option('--outputTypes <outputTypes>', 'Output types directory')
+  .option('--outputEsm <outputEsm>', 'Output esm directory')
+  .option('--outputCjs <outputCjs>', 'Output cjs directory')
+  .option('--outputResolver <outputResolver>', 'Output resolver directory')
+  .description('Generate icon components from svg files')
+  .action(generate)
+
+program
+  .command('figma')
+  .option('-t --token <token>', 'Figma token')
+  .option('-f --file <file>', 'Figma file id')
+  .option('-p --pageName <pageName>', 'Figma icons page name')
+  .option('-s --skipExisting', 'Whether to skip downloading svg files when a file with the same name exists locally')
+  .option('-c --clean', 'Whether to clear the output directory before downloading')
+  .option('-o --output', 'Output path')
+  .description('Parse icons from figma')
+  .action(figma)
+
+program.parse()

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@nanawan/icon-builder",
+  "type": "module",
+  "version": "0.6.1",
+  "description": "icon builder of pui",
+  "keywords": [
+    "pui",
+    "icon",
+    "builder"
+  ],
+  "author": "haoziqaq <357229046@qq.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/puijs/pui-iconx"
+  },
+  "bugs": "https://github.com/puijs/pui-iconx/issues",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "bin": {
+    "vi": "bin/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup"
+  },
+  "dependencies": {
+    "commander": "^11.1.0",
+    "@pui/webfont": "0.0.9",
+    "chokidar": "3.6.0",
+    "fs-extra": "^11.1.1",
+    "picocolors": "^1.0.0",
+    "unconfig": "0.3.13",
+    "@vue/compiler-sfc": "^3.4.29",
+    "typescript": "^5.2.2",
+    "esbuild": "0.21.5",
+    "hash-sum": "^2.0.0",
+    "@pui/axle": "^0.9.0",
+    "rattail": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.9.0",
+    "@types/hash-sum": "^1.0.2",
+    "@pui/eslint-config": "^3.1.4",
+    "@pui/release": "0.2.5",
+    "eslint": "^8.53.0",
+    "prettier": "^3.1.0",
+    "simple-git-hooks": "^2.9.0",
+    "tsup": "^8.0.1"
+  }
+}