feat: add plugin to replace icons (#2671)

* feat: add plugin to replace icons

* feat: add plugin to replace icons

* feat: add plugin to replace icons

* feat: add plugin to replace icons

* feat: add plugin to replace icons

Author: oasis-cloud

packages/nutui-replace-icons/.gitignore

@@ -0,0 +1,2 @@
+types
+node_modules

packages/nutui-replace-icons/README.md

@@ -0,0 +1,56 @@
+## 功能说明
+
+用于替换组件库内置的 Icon 库。
+
+## 使用方法
+
+### Taro 生态下
+
+1. Taro 环境中需要在 config/index.js 文件中增加如下代码
+
+```html
+{ h5: { compile: { include: [path.resolve(__dirname, '../node_modules')], } },
+mini: { compile: { include: [path.resolve(__dirname, '../node_modules')], } } }
+```
+
+2. 在 babel.config.js 文件中增加如下代码
+
+```js
+const { repleaceIcons } = require('@nutui/replace-icons')
+{
+  plugins: [
+    [
+      repleaceIcons({
+        targetIconLibary: '@test/aa',
+        iconMap: {
+          Loading: Star,
+        },
+      }),
+    ],
+  ]
+}
+```
+
+### H5 生态下
+
+1. 需要将 nutui 组件库包含在编译中。
+
+### 原始代码
+
+```jsx
+import { Loading } from '@nutui/icons-react'
+
+export default () => {
+  return <Loading />
+}
+```
+
+### 替换后代码
+
+```jsx
+import { Star as Loading } from '@test/aa'
+
+export default () => {
+  return <Loading />
+}
+```

packages/nutui-replace-icons/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@nutui/replace-icons",
+  "version": "1.0.2",
+  "description": "",
+  "keywords": [
+    "Taro",
+    "nutui",
+    "nutui react",
+    "nutui icons",
+    "Plugin"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": "",
+  "homepage": "",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "types/index.d.ts",
+  "files": [
+    "dist",
+    "index.js",
+    "types"
+  ],
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "vitest"
+  },
+  "bugs": {
+    "url": ""
+  },
+  "dependencies": {
+    "@babel/cli": "^7.25.7",
+    "@babel/core": "^7.23.9",
+    "@babel/generator": "^7.24.5",
+    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-react": "^7.25.7",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.6.8",
+    "vitest": "^1.5.0"
+  },
+  "devDependencies": {
+    "@types/lodash.kebabcase": "^4.1.9",
+    "@types/node": "^18.13.0",
+    "prettier": "^3.2.5",
+    "rollup": "^2.79.0",
+    "rollup-plugin-ts": "^3.0.2",
+    "typescript": "^5.4.5"
+  }
+}

packages/nutui-replace-icons/rollup.config.js

@@ -0,0 +1,22 @@
+const path = require('path')
+const ts = require('rollup-plugin-ts')
+
+const cwd = __dirname
+
+const base = {
+  external: ['@tarojs/service'],
+  plugins: [ts()],
+}
+
+// 供 CLI 编译时使用的 Taro 插件入口
+const compileConfig = {
+  input: path.join(cwd, 'src/index.ts'),
+  output: {
+    file: path.join(cwd, 'dist/index.js'),
+    format: 'cjs',
+    sourcemap: true,
+  },
+  ...base,
+}
+
+module.exports = [compileConfig]

packages/nutui-replace-icons/src/index.ts

@@ -0,0 +1,3 @@
+import { replaceIcons } from './replace-icons'
+
+export default replaceIcons

packages/nutui-replace-icons/src/replace-icons.ts

@@ -0,0 +1,35 @@
+import { IOptions } from './type'
+
+function replace(options: IOptions) {
+  const sourceLibrary = options.sourceLibrary || []
+  const targetLibrary = options.targetLibrary
+  return {
+    visitor: {
+      ImportDeclaration(path) {
+        if (sourceLibrary.indexOf(path.node.source.value) > -1) {
+          // 替换包名称
+          path.node.source.value = targetLibrary
+          path.node.specifiers.forEach((specifier) => {
+            // 根据 iconMappings 进行替换
+            const iconMappings = options.iconMappings
+            if (iconMappings && iconMappings[specifier.imported.name]) {
+              specifier.imported.name = iconMappings[specifier.imported.name]
+            }
+          })
+        }
+      },
+    },
+  }
+}
+
+export function replaceIcons(
+  options: IOptions = {
+    sourceLibrary: ['@nutui/icons-react', '@nutui/icons-react-taro'],
+    targetLibrary: '',
+  }
+) {
+  if (!options.targetLibrary) {
+    return {}
+  }
+  return replace(options)
+}

packages/nutui-replace-icons/src/type.ts

@@ -0,0 +1,5 @@
+export interface IOptions {
+  sourceLibrary: string[]
+  targetLibrary: string
+  iconMappings?: { [key: string]: string }
+}

packages/nutui-replace-icons/test/__snapshots__/replace-case.test.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`replace Loading icons with Star 1`] = `
+"import { Star as Loading } from "@test/aa";
+import { ArrowSize6 as Arrow } from "@test/aa";
+const ReplaceOne = () => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Loading, null), " ", /*#__PURE__*/React.createElement(Arrow, null));
+};"
+`;

packages/nutui-replace-icons/test/replace-case.test.ts

@@ -0,0 +1,29 @@
+import babel from '@babel/core'
+import { describe, expect, it } from 'vitest'
+import { replaceIcons } from '../src/replace-icons'
+
+const plugin = replaceIcons({
+  targetLibrary: '@test/aa',
+  iconMappings: {
+    Loading: 'Star',
+  },
+})
+
+const babelOptions = {
+  presets: ['@babel/preset-react'],
+  plugins: [plugin],
+}
+const caseIns = `
+import { Loading } from '@nutui/icons-react'
+import { ArrowSize6 as Arrow } from '@nutui/icons-react'
+const ReplaceOne = () => {
+  return <><Loading /> <Arrow /></>
+}
+`
+describe('', () => {
+  it('replace Loading icons with Star', () => {
+    const ast = babel.transformSync(caseIns, babelOptions)
+    // @ts-ignore
+    expect(ast.code).toMatchSnapshot()
+  })
+})

packages/nutui-replace-icons/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "removeComments": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "target": "ES2015",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "module": "ESNext",
+    "sourceMap": true,
+    "declaration": true,
+    "declarationDir": "types",
+    "isolatedModules": false,
+    "types": ["node"]
+  },
+  "include": [
+    "./src"
+  ]
+}