feat: Support hex color

Author: fwh1990

README.md

@@ -92,6 +92,9 @@ npx iconfont
 
 // 多色：红色+橘色
 <iconfont name="alipay" color="{{['red', 'orange']}}" size="300" />
+
+// 不同格式的颜色写法
+<iconfont name="alipay" color="{{['#333', 'rgb(50, 124, 39)']}}" />
 ```
 
 # 更新图标

src/libs/generateComponent.ts

@@ -16,7 +16,9 @@ import {
 const ATTRIBUTE_FILL_MAP = ['path'];
 
 export const generateComponent = (data: XmlData, config: Config) => {
-  const svgTemplates: string[] = [];
+  const svgTemplates: string[] = [
+    '<wxs src="./iconfont.wxs" module="helper" />\n',
+  ];
   const names: string[] = [];
   const saveDir = path.resolve(config.save_dir);
   const fileName = basename(config.save_dir) || 'iconfont';
@@ -53,6 +55,7 @@ export const generateComponent = (data: XmlData, config: Config) => {
 
   fs.writeFileSync(path.join(saveDir, fileName + '.js'), jsFile);
   fs.writeFileSync(path.join(saveDir, fileName + '.json'), getTemplate('icon.json'));
+  fs.writeFileSync(path.join(saveDir, fileName + '.wxs'), getTemplate('icon.wxs'));
 
   console.log(`\n${colors.green('√')} All icons have been putted into dir: ${colors.green(config.save_dir)}\n`);
 };
@@ -97,8 +100,7 @@ const addAttribute = (domName: string, sub: XmlData['svg']['symbol'][number]['pa
       if (attributeName === 'fill') {
         const color = replaceHexToRgb(sub.$[attributeName]);
 
-        template += ` ${attributeName}='{{colorIsString ? color || '${color}' : color[${counter.colorIndex}] || '${color}'}}'`;
-        //template += ` ${attributeName}='{{typeof color == 'string' ? color : color[${counter.colorIndex}] || '${color}'}}'`;
+        template += ` ${attributeName}='{{helper.getColor(colors, ${counter.colorIndex}, '${color}')}}'`;
         counter.colorIndex += 1;
       } else {
         template += ` ${attributeName}='${sub.$[attributeName]}'`;

src/templates/icon.js.template

@@ -11,19 +11,50 @@ Component({
     // string || string[]
     color: {
       type: null,
-    },
+      observer: function (color, originalColor) {
+        if (color !== originalColor) {
+          this.setData({
+            colors: this.fixColor()
+          });
+        }
+      }
+    }
   },
   data: {
-    colorIsString: false,
-  },
-  attached: function() {
-    this.setData({
-      colorIsString: typeof this.properties.color === 'string',
-    });
-  },
-  moved: function() {
-    this.setData({
-      colorIsString: typeof this.properties.color === 'string',
-    });
+    colors: ''
   },
+  methods: {
+    fixColor: function() {
+      var color = this.data.color;
+      var self = this;
+
+      if (typeof color === 'string') {
+        return color.indexOf('#') === 0 ? this.hex2rgb(color) : color;
+      }
+
+      return color.map(function (item) {
+        return item.indexOf('#') === 0 ? self.hex2rgb(item) : item;
+      });
+    },
+    hex2rgb: function(hex) {
+      var rgb = [];
+
+      //去除前缀 # 号
+      hex = hex.substr(1);
+
+      if (hex.length === 3) {
+        // 处理 '#abc' 成 '#aabbcc'
+        hex = hex.replace(/(.)/g, '$1$1');
+      }
+
+      hex.replace(/../g, function(color) {
+        // 按16进制将字符串转换为数字
+        rgb.push(parseInt(color, 0x10));
+
+        return color;
+      });
+
+      return 'rgb(' + rgb.join(',') + ')';
+    }
+  }
 })

src/templates/icon.wxs.template

@@ -0,0 +1,20 @@
+/**
+ *
+ * @param {string | string[]} color
+ * @param {number} arrayIndex
+ * @param {string} defaultColor
+ * @return {string}
+ */
+var getColor = function(color, arrayIndex, defaultColor) {
+  if (!color) {
+    return defaultColor;
+  }
+
+  if (typeof color === 'string') {
+    return color;
+  }
+
+  return color[arrayIndex] || defaultColor;
+};
+
+module.exports.getColor = getColor;