iconfont-cli · anzhen9 · Jul 3, 2025 · Jul 3, 2025
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,6 @@ node_modules/
 .idea/
 build/
 /iconfont.json
-.DS_Store
+.DS_Store
+package-lock.json
+yarn.lock
diff --git a/README.md b/README.md
@@ -11,6 +11,7 @@
 - 头条小程序（字节跳动）
 - 快手小程序
 - QQ小程序
+- 鸿蒙元服务ASCF框架
 - ...
 
 # 特性
@@ -95,6 +96,9 @@ npx iconfont-kuaishou
 
 # QQ小程序
 npx iconfont-qq
+
+# 鸿蒙元服务
+npx iconfont-harmony
 ```
 生成后查看您设置的保存目录中是否含有所有的图标
 
@@ -103,7 +107,7 @@ npx iconfont-qq
 在生成代码之前，你可以顺便参考[snapshots目录](https://github.com/iconfont-cli/mini-program-iconfont-cli/tree/master/snapshots)自动生成的快照文件。
 
 # Step 4
-#### 微信小程序 | QQ小程序
+#### 微信小程序 | QQ小程序 | 鸿蒙元服务ASCF框架
 在根目录的`app.json`文件中引入全局图标组件，避免每个page都引入（麻烦）。
 ```json5
 // 绝对路径

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mini-program-iconfont-cli",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "main": "index.js",
   "keywords": [
     "mini-program",
@@ -12,7 +12,8 @@
     "baidu-program",
     "toutiao-program",
     "kuaishou-program",
-    "qq-program"
+    "qq-program",
+    "harmony-program"
   ],
   "repository": "git@github.com:fwh1990/mini-program-iconfont-cli.git",
   "author": "范文华 <531362022@qq.com>",
@@ -25,7 +26,8 @@
     "iconfont-baidu": "./commands/createBaiduIcon.js",
     "iconfont-toutiao": "./commands/createToutiaoIcon.js",
     "iconfont-kuaishou": "./commands/createKuaishouIcon.js",
-    "iconfont-qq": "./commands/createQqIcon.js"
+    "iconfont-qq": "./commands/createQqIcon.js",
+    "iconfont-harmony": "./commands/createHarmonyIcon.js"
   },
   "dependencies": {
     "axios": "^0.19.0",

diff --git a/scripts/config/harmony.json b/scripts/config/harmony.json
@@ -0,0 +1,7 @@
+{
+  "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js",
+  "use_rpx": false,
+  "save_dir": "./snapshots/harmony",
+  "trim_icon_prefix": "icon",
+  "default_icon_size": 20
+}
diff --git a/scripts/update-snapshot.sh b/scripts/update-snapshot.sh
@@ -6,3 +6,4 @@ npx ts-node src/commands/createKuaishouIcon.ts --config ./scripts/config/kuaisho
 npx ts-node src/commands/createBaiduIcon.ts --config ./scripts/config/baidu.json
 npx ts-node src/commands/createAlipayIcon.ts --config ./scripts/config/alipay.json
 npx ts-node src/commands/createWechatIcon.ts --config ./scripts/config/wechat.json
+npx ts-node src/commands/createHarmonyIcon.ts --config ./scripts/config/harmony.json
diff --git a/snapshots/harmony/harmony.css b/snapshots/harmony/harmony.css
@@ -0,0 +1,3 @@
+.icon {
+  background-repeat: no-repeat;
+}
diff --git a/snapshots/harmony/harmony.hxml b/snapshots/harmony/harmony.hxml
@@ -0,0 +1,8 @@
+<!--alipay-->
+<view has:if="{{name === 'alipay'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z' fill='{{(isStr ? colors : colors[0]) || 'rgb(91,139,212)'}}' /%3E%3Cpath d='M979.456 729.6c-13.824-4.608-329.216-101.888-319.488-111.104 46.592-55.808 78.848-185.344 78.848-185.344v-27.648h-185.344V335.872h226.816v-41.472h-226.816V192.512H460.8v97.28H257.024v41.472H460.8v69.632H298.496v27.648h333.824c0 13.824-23.04 106.496-46.08 148.48-4.608-9.216-153.088-60.416-236.544-65.024-88.064 4.608-157.696 32.256-189.952 97.28-46.592 120.32 27.648 241.152 194.56 241.152 27.648 0 162.304-13.824 264.192-153.088 27.648 13.824 185.344 92.672 282.624 143.872-92.672 111.104-231.936 180.736-389.12 180.736-280.576 1.024-508.928-226.304-509.44-506.88v-3.072C1.024 231.424 227.84 3.072 508.928 2.56h3.072c280.576-1.024 508.928 226.304 509.44 506.88v3.072c4.608 82.944-13.824 152.576-41.984 217.088z' fill='{{(isStr ? colors : colors[1]) || 'rgb(91,139,212)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
+<!--user-->
+<view has:if="{{name === 'user'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M518.07603918 6.737455c-174.95658274 0-316.73174462 141.77516188-316.73174465 316.73174464 0 82.95355218 32.42729765 159.11999552 84.46179858 214.92511241 16.59071043 18.09895683 35.44379047 33.93554407 55.80511691 47.5097617 50.5262545 33.93554407 111.61023382 53.54274731 176.46482916 53.5427473s126.69269785-19.60720323 176.46482915-53.5427473c20.36132644-13.57421762 39.21440646-29.41080486 55.80511691-47.5097617C803.13460934 482.58919514 834.80778381 406.42275179 834.80778381 323.46919964c0-174.95658274-141.77516188-316.73174462-316.73174463-316.73174464z m166.66122752 501.491929c-22.62369604 20.36132644-49.01800811 36.95203687-77.67468975 47.50976169-27.90255844 10.55772482-58.06748652 16.59071043-88.98653777 16.59071044s-61.83810252-6.03298562-88.98653779-16.59071044c-28.65668166-11.31184801-55.0509937-27.14843525-77.67468975-47.50976169C300.88855716 462.98199189 269.21538268 396.61915017 269.21538268 323.46919964c0-137.25042267 111.61023382-248.86065649 248.8606565-248.86065651s248.86065649 111.61023382 248.86065648 248.86065651c0 73.14995053-31.67317446 139.51279228-82.19942896 184.76018436z' fill='{{(isStr ? colors : colors[0]) || 'rgb(38,50,56)'}}' /%3E%3Cpath d='M341.61121002 586.65819695C205.11491054 652.26691548 110.84951037 791.77970775 110.84951037 953.16207287c0 18.85308003-15.08246403 33.93554407-33.93554406 33.93554407s-33.93554407-15.08246403-33.93554409-33.93554407c0-177.97307556 98.03601619-332.56833185 242.82767089-414.76776082 16.59071043 18.09895683 35.44379047 33.93554407 55.80511691 48.2638849zM993.17365612 953.16207287c0 18.85308003-15.08246403 33.93554407-33.93554408 33.93554407s-33.93554407-15.08246403-33.93554405-33.93554407c0-161.38236511-94.26540019-300.8951574-230.76169966-366.50387592 20.36132644-13.57421762 39.21440646-29.41080486 55.80511691-47.5097617 144.79165469 81.44530576 242.82767087 236.04056206 242.82767088 414.01363762z' fill='{{(isStr ? colors : colors[1]) || 'rgb(21,187,223)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
+<!--setup-->
+<view has:if="{{name === 'setup'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M720.36316 371.018l-56.188-172.934c-4.654-14.322-20.036-22.16-34.358-17.506l-78.07 25.366c-7.25 2.356-15.224 0.726-20.912-4.346a256.276 256.276 0 0 0-41.218-29.96c-6.576-3.842-10.58-10.922-10.58-18.538V71.03c0-15.058-12.208-27.266-27.266-27.266h-181.834c-15.058 0-27.266 12.208-27.266 27.266v82.114c0 7.614-4.002 14.69-10.576 18.534a256.258 256.258 0 0 0-41.168 29.934c-5.69 5.074-13.664 6.704-20.916 4.348l-78.12-25.382c-14.322-4.654-29.704 3.184-34.356 17.506L1.34316 371.016c-4.654 14.322 3.184 29.704 17.506 34.356l78.05 25.36c7.252 2.356 12.754 8.364 14.366 15.816a253.468 253.468 0 0 0 15.718 48.46c3.072 6.984 2.162 15.076-2.322 21.248l-48.22 66.37c-8.852 12.182-6.15 29.234 6.032 38.084l147.108 106.882c12.182 8.852 29.234 6.15 38.086-6.032l48.188-66.326c4.484-6.17 11.894-9.538 19.484-8.776 8.404 0.844 16.926 1.284 25.552 1.284 8.604 0 17.104-0.44 25.486-1.28 7.588-0.76 14.998 2.606 19.48 8.776l48.184 66.32c8.852 12.182 25.902 14.884 38.086 6.032l147.108-106.882c12.182-8.852 14.882-25.902 6.032-38.084l-48.176-66.308c-4.486-6.174-5.394-14.268-2.32-21.252a253.424 253.424 0 0 0 15.75-48.544c1.612-7.454 7.114-13.46 14.368-15.816l77.968-25.334c14.322-4.65 22.16-20.032 17.506-34.352z m-359.472 120.706c-54.924 0-99.448-44.524-99.448-99.448s44.524-99.448 99.448-99.448 99.448 44.524 99.448 99.448-44.526 99.448-99.448 99.448z' fill='{{(isStr ? colors : colors[0]) || 'rgb(91,110,162)'}}' /%3E%3Cpath d='M360.89116 516.228c-68.346 0-123.952-55.604-123.952-123.952s55.604-123.952 123.952-123.952 123.952 55.604 123.952 123.952-55.606 123.952-123.952 123.952z m0-198.894c-41.324 0-74.944 33.62-74.944 74.944s33.618 74.944 74.944 74.944 74.944-33.618 74.944-74.944-33.62-74.944-74.944-74.944z' fill='{{(isStr ? colors : colors[1]) || 'rgb(134,219,213)'}}' /%3E%3Cpath d='M335.33916 646.46c8.404 0.844 16.926 1.284 25.552 1.284 8.604 0 17.104-0.44 25.486-1.278 7.588-0.76 14.998 2.606 19.48 8.776l48.184 66.32c8.852 12.182 25.902 14.884 38.086 6.032l74.012-53.772c-121.448-49.224-191.894-126.576-231.428-211.328-28.45-10.642-48.762-38.098-48.762-70.216a74.514 74.514 0 0 1 13.154-42.348c-23.962-126.424-1.346-249.502 6.73-306.166h-35.896c-15.058 0-27.266 12.208-27.266 27.266v82.114c0 7.614-4.002 14.69-10.576 18.536a256.152 256.152 0 0 0-41.166 29.934c-5.69 5.074-13.664 6.704-20.916 4.348L91.89116 180.578c-14.322-4.654-29.704 3.184-34.356 17.506L1.34316 371.016c-4.654 14.322 3.184 29.704 17.506 34.356l78.05 25.36c7.252 2.356 12.754 8.364 14.366 15.816a253.468 253.468 0 0 0 15.718 48.46c3.072 6.984 2.162 15.076-2.322 21.248l-48.22 66.37c-8.852 12.182-6.15 29.234 6.032 38.084l147.108 106.882c12.182 8.852 29.234 6.15 38.086-6.032l48.188-66.326c4.484-6.168 11.894-9.536 19.484-8.774z' opacity='.1' fill='{{(isStr ? colors : colors[2]) || 'rgb(51,51,51)'}}' /%3E%3Cpath d='M1004.51916 274.936l-69.236-69.236c-25.976-25.976-68.09-25.976-94.066 0L576.30116 470.614a33.62 33.62 0 0 0-9.412 29.166l2.754 16.948a41.288 41.288 0 0 1-11.558 35.818l-25.652 25.652 99.586 99.586 25.652-25.652a41.286 41.286 0 0 1 35.818-11.558l16.948 2.754a33.62 33.62 0 0 0 29.166-9.412L1004.51916 369c25.976-25.976 25.976-68.09 0-94.064z' fill='{{(isStr ? colors : colors[3]) || 'rgb(247,185,109)'}}' /%3E%3Cpath d='M667.65916 542.558c-12.176-12.176-12.176-31.92 0-44.096l197.396-197.396c12.176-12.176 31.92-12.176 44.096 0 12.176 12.176 12.176 31.92 0 44.096l-197.396 197.396c-12.176 12.176-31.918 12.176-44.096 0z' fill='{{(isStr ? colors : colors[4]) || 'rgb(253,226,124)'}}' /%3E%3Cpath d='M657.67116 652.132a41.274 41.274 0 0 1 31.768-11.996c-59.072-47.372-67.294-184.166 2.842-285.502l-115.98 115.98a33.62 33.62 0 0 0-9.412 29.166l2.754 16.948a41.288 41.288 0 0 1-11.558 35.818l-25.652 25.652 99.586 99.586 25.652-25.652z' opacity='.1' fill='{{(isStr ? colors : colors[5]) || 'rgb(51,51,51)'}}' /%3E%3Cpath d='M402.00116 852.312l146.338-146.338-44.096-44.096-146.338 146.338a45.4 45.4 0 0 1-15.862 10.294l-68.064 26.086a37.556 37.556 0 0 0-22.032 22.738l-20.978 60.356a17.81 17.81 0 0 0 4.23 18.444l28.884 28.884a17.816 17.816 0 0 0 18.444 4.23l60.356-20.978a37.556 37.556 0 0 0 22.738-22.032l26.086-68.064a45.4 45.4 0 0 1 10.294-15.862z' fill='{{(isStr ? colors : colors[6]) || 'rgb(73,80,89)'}}' /%3E%3Cpath d='M504.23916 661.878l44.094 44.094-29.092 29.094-44.094-44.096z' opacity='.1' fill='{{(isStr ? colors : colors[7]) || 'rgb(51,51,51)'}}' /%3E%3Cpath d='M590.08516 747.722l-127.59-127.59c-9.862-9.862-9.862-25.85 0-35.712l20.222-20.222c9.862-9.862 25.85-9.862 35.712 0l127.59 127.59c9.862 9.862 9.862 25.85 0 35.712l-20.222 20.222c-9.86 9.862-25.85 9.862-35.712 0z' fill='{{(isStr ? colors : colors[8]) || 'rgb(253,226,124)'}}' /%3E%3Cpath d='M518.43116 564.198c-9.862-9.862-25.85-9.862-35.712 0l-20.222 20.222c-9.862 9.862-9.862 25.85 0 35.712l100.512 100.512c-38.162-57.234-28.442-108.238-16.758-128.628l-27.82-27.818z' opacity='.1' fill='{{(isStr ? colors : colors[9]) || 'rgb(51,51,51)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
diff --git a/snapshots/harmony/harmony.js b/snapshots/harmony/harmony.js
@@ -0,0 +1,63 @@
+Component({
+  properties: {
+    // alipay | user | setup
+    name: {
+      type: String,
+    },
+    // string | string[]
+    color: {
+      type: null,
+      observer: function(color) {
+        this.setData({
+          colors: this.fixColor(),
+          isStr: typeof color === 'string',
+        });
+      }
+    },
+    size: {
+      type: Number,
+      value: 20,
+      observer: function(size) {
+        this.setData({
+          svgSize: size,
+        });
+      },
+    },
+  },
+  data: {
+    colors: '',
+    svgSize: 20,
+    quot: '"',
+    isStr: true,
+  },
+  methods: {
+    fixColor: function() {
+      var color = this.data.color;
+      var hex2rgb = this.hex2rgb;
+
+      if (typeof color === 'string') {
+        return color.indexOf('#') === 0 ? hex2rgb(color) : color;
+      }
+
+      return color.map(function (item) {
+        return item.indexOf('#') === 0 ? hex2rgb(item) : item;
+      });
+    },
+    hex2rgb: function(hex) {
+      var rgb = [];
+
+      hex = hex.substr(1);
+
+      if (hex.length === 3) {
+        hex = hex.replace(/(.)/g, '$1$1');
+      }
+
+      hex.replace(/../g, function(color) {
+        rgb.push(parseInt(color, 0x10));
+        return color;
+      });
+
+      return 'rgb(' + rgb.join(',') + ')';
+    }
+  }
+});
diff --git a/snapshots/harmony/harmony.json b/snapshots/harmony/harmony.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
diff --git a/src/commands/createHarmonyIcon.ts b/src/commands/createHarmonyIcon.ts
@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+
+import colors from 'colors';
+import { getConfig } from '../libs/getConfig';
+import { fetchXml } from '../libs/fetchXml';
+import { generateHarmonyComponent } from '../libs/generateHarmonyComponent';
+
+const config = getConfig();
+
+fetchXml(config.symbol_url).then((result) => {
+  generateHarmonyComponent(result, config);
+}).catch((e) => {
+  console.error(colors.red(e.message || 'Unknown Error'));
+  process.exit(1);
+});
diff --git a/src/commands/help.ts b/src/commands/help.ts
@@ -13,5 +13,6 @@ console.log([
   '    ' + colors.green.bold('npx iconfont-toutiao [--config]') + '  : Generate toutiao icon component',
   '    ' + colors.green.bold('npx iconfont-kuaishou [--config]') + '  : Generate kuaishou icon component',
   '    ' + colors.green.bold('npx iconfont-qq [--config]') + '       : Generate qq icon component',
+  '    ' + colors.green.bold('npx iconfont-harmony [--config]') + '       : Generate harmony icon component',
   '',
 ].join('\n'));
diff --git a/src/libs/generateHarmonyComponent.ts b/src/libs/generateHarmonyComponent.ts
@@ -0,0 +1,64 @@
+import fs from 'fs';
+import path, { basename } from 'path';
+import mkdirp from 'mkdirp';
+import glob from 'glob';
+import colors from 'colors';
+import { XmlData } from './fetchXml';
+import { Config } from './getConfig';
+import { getTemplate } from './getTemplate';
+import { generateCase } from "./utils"
+import {
+   replaceIsRpx,
+  replaceNames,
+  replaceSize,
+} from './replace';
+// import { whitespace } from './whitespace';
+
+
+export const generateHarmonyComponent = (data: XmlData, config: Config) => {
+  const svgTemplates: string[] = [];
+  const names: string[] = [];
+  const saveDir = path.resolve(config.save_dir);
+  const fileName = basename(config.save_dir) || 'iconfont';
+
+  mkdirp.sync(saveDir);
+  glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file));
+
+  data.svg.symbol.forEach((item) => {
+    const iconId = item.$.id;
+    const iconIdAfterTrim = config.trim_icon_prefix
+      ? iconId.replace(
+        new RegExp(`^${config.trim_icon_prefix}(.+?)$`),
+        (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1')
+      )
+      : iconId;
+
+    names.push(iconIdAfterTrim);
+    svgTemplates.push(
+      `<!--${iconIdAfterTrim}-->\n<view has:if="{{name === '${iconIdAfterTrim}'}}" style="background-image: url({{quot}}data:image/svg+xml, ${generateCase(item, {
+        hexToRgb: true
+      })}{{quot}});` +
+      ' width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />'
+    );
+
+    console.log(`${colors.green('√')} Generated icon "${colors.yellow(iconId)}"`);
+  });
+
+  fs.writeFileSync(path.join(saveDir, fileName + '.css'), getTemplate('harmony.css'));
+  fs.writeFileSync(
+    path.join(saveDir, fileName + '.hxml'),
+    svgTemplates.join('\n\n')
+  );
+
+  let jsFile = getTemplate('harmony.js');
+
+  jsFile = replaceSize(jsFile, config.default_icon_size);
+  jsFile = replaceNames(jsFile, names);
+  jsFile = replaceIsRpx(jsFile, config.use_rpx);
+
+  fs.writeFileSync(path.join(saveDir, fileName + '.js'), jsFile);
+  fs.writeFileSync(path.join(saveDir, fileName + '.json'), getTemplate('harmony.json'));
+
+  console.log(`\n${colors.green('√')} All icons have been putted into dir: ${colors.green(config.save_dir)}\n`);
+};
+
diff --git a/src/templates/harmony.css.template b/src/templates/harmony.css.template
@@ -0,0 +1,3 @@
+.icon {
+  background-repeat: no-repeat;
+}
diff --git a/src/templates/harmony.js.template b/src/templates/harmony.js.template
@@ -0,0 +1,63 @@
+Component({
+  properties: {
+    // #names#
+    name: {
+      type: String,
+    },
+    // string | string[]
+    color: {
+      type: null,
+      observer: function(color) {
+        this.setData({
+          colors: this.fixColor(),
+          isStr: typeof color === 'string',
+        });
+      }
+    },
+    size: {
+      type: Number,
+      value: #size#,
+      observer: function(size) {
+        this.setData({
+          svgSize: #rpx-1:size / 750 * wx.getSystemInfoSync().windowWidth:##rpx-0:size:#,
+        });
+      },
+    },
+  },
+  data: {
+    colors: '',
+    svgSize: #rpx-1:#size# / 750 * wx.getSystemInfoSync().windowWidth:##rpx-0:#size#:#,
+    quot: '"',
+    isStr: true,
+  },
+  methods: {
+    fixColor: function() {
+      var color = this.data.color;
+      var hex2rgb = this.hex2rgb;
+
+      if (typeof color === 'string') {
+        return color.indexOf('#') === 0 ? hex2rgb(color) : color;
+      }
+
+      return color.map(function (item) {
+        return item.indexOf('#') === 0 ? hex2rgb(item) : item;
+      });
+    },
+    hex2rgb: function(hex) {
+      var rgb = [];
+
+      hex = hex.substr(1);
+
+      if (hex.length === 3) {
+        hex = hex.replace(/(.)/g, '$1$1');
+      }
+
+      hex.replace(/../g, function(color) {
+        rgb.push(parseInt(color, 0x10));
+        return color;
+      });
+
+      return 'rgb(' + rgb.join(',') + ')';
+    }
+  }
+});
diff --git a/src/templates/harmony.json.template b/src/templates/harmony.json.template
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}