组态icon图标，iconfont、SVG图片可以在组态中转换成图纸或者图标，并且自动化保存到图标目录下同样命名的文件夹内的步骤；data.a()、data.ca()，带前缀和不带前缀的属性获取及设置

组态无法直接用iconfont，那么下载了awesome这类图标库后https://fontawesome.com/download，如何组态中使用呢？具体步骤如下：

1. 下载SVG图标库：awesome离线文件包

fontawesome

[fontawesome-pro-5.14.0-web.zip]

2. 转换成HT图标：取svg目录放到组态的assets目录指定位置，逐个目录分别文件全选批量转换SVG

直接点击编辑，是图纸模式另存为，可以右键转换成图标，这样就可以暴露变量了，注意不是创建图标拖放svg进去。

 

批量转换功能比较脆弱，而且中间过程无前端进度条提示（转换完成后会提示），如果发生报错：Failed to load resource: net::ERR_INSUFFICIENT_RESOURCES，那么重启浏览器登录组态再来操作即可，转换后的图标文件，自动存放到图标中同样层级命名的文件夹内！

目前无进度提示，可以在组态服务后台查看日志输出！转换一遍即可，随后assets资源文件的svg可以删掉了，矢量图标就成功了组态系统内置的了！

3. 属性绑定变量：通过文件全局替换来对生成的json矢量图标批量做数据绑定

 

 

将下面：（注意，vscode检索的时候，提示xxx个文件中有xxx个结果，要确定两个xxx是一样的，并且与目录中所有要替换的svg图标数量一致，否则这个替换标记在图标json文件中就没有唯一性了！比如下面还有的步骤，确实会出现结果数量比文件数量要多的情况）

JSON   "comps": [

替换成：

JSON   "modified": "Mon Aug 01 2022 23:33:01 GMT+0800 (中国标准时间)",   "background": "rgb(32,37,46)",   "dataBindings": [     {       "attr": "icon-background",       "valueType": "Color"     },     {       "attr": "icon-borderWidth",       "valueType": "PositiveNumber"     },     {       "attr": "icon-borderColor",       "valueType": "Color"     }   ],   "comps": [

再将下面（当然，最重要的是background属性的替换，另外两个可以不处理！图标颜色最重要）：

JSON "background": "#000000"

JSON "borderColor": null

JSON "borderWidth": 0

分别替换成：

JSON "background": {   "func": "attr@icon-background",   "value": "#000000" }

JSON  "borderColor": {      "func": "attr@icon-borderColor",      "value": "#000000"  }

JSON  "borderWidth": {      "func": "attr@icon-borderWidth",      "value": 0  }

注意，这里固定文件内搜索结果可能有多个，因为矢量图可以是多个组合，形成多色矢量图，还有可能多色矢量的其他属性比如opacity等，对于多色的矢量图标想要暴露多个配置，可以单独手动设置，批量替换只能解决单色的较为通用的大部分！

此外，这一步操作，如果SVG图标太多到大几千个，VS CODE会卡死，而且下次启动也会有记录会自动加载上次处理的自动打开的矢量图标文件，关闭的时候又会一个个提示是否保存，非常难受，卸载VS CODE或删除工作区目录下.vscode文件夹都没用，要清理本地缓存，目录在如下，可以直接删除掉再打开VS CODE即可恢复初始状态：

另外，即时没有卡死，也提示转换完成，但是VS CODE会把这些文件都tab标签页全部打开，每个要关闭时，会提示是否保存，这么多个一个个手动确定怎么行？同样也是这个步骤，删除下面目录，这不会导致已经替换成功的失效！

Plain Text C:\Users\jone\AppData\Roaming\Code

 

4. 图标ICON属性：配置其他图标的ICON属性，固定用以下函数func通常不需要修改，除非有对特定的多色svg单独定制化加多属性配置

组态图标数据绑定中，有属性attr和函数func两个选项，其中函数参数data、view，可以实现一个属性分身为多个变量暴露出去并做逻辑处理给到原来的属性变量！HT矢量数据绑定原理！

 

4.1 路径属性函数绑定

图片路径属性用func，不用attr，用以下函数体内容直接复制过去：

黄底色的命名是当前用来被复用嵌套的图标定义的名称，涉及多个图标被嵌套到某个图标内时，需要通过图标的前缀来区别！

注意，传入的data是最上层图标拖放到图纸上形成的拓扑图元对象，对于图标及嵌套图标所有属性传入都是同一个对象没有区别，并且data.a()是根据属性绝对名称来获取值或者设置值的，所以func内不能用data.a()，而要用data.ca()，用以自动补上逐层嵌套的图标前缀来做区分！详见4.3

另外，对于矢量图标内置已数据绑定的icon-background变量，新版已经从下面func里面移出掉了（本篇部分截图未作更新），没有必要多此一举，直接在最上层图标做数据绑定时定义改变量即可，直接使用！

JavaScript function func(data,view){     var typeArr = ['duotone','light','regular','solid'] //枚举下拉选择     var typetmp = typeArr[data.ca('iconType')] //类型选择     var path = data.ca('path')                 //图标路径     if(path != undefined){         if(path.indexOf('.') == -1){           //传入图标文件名称时             path = 'symbols/demo/AiotOS/icons/' + typetmp + '/' + path + '.json'         }else if(path.indexOf(typetmp) == -1){ //图标类型发生变化时             typeArr.forEach((curType,index)=>{                 if(curType != typetmp){        //路径中先前的类型名称换成新的                     path = path.replace(curType,typetmp)                                }             })         }     }     data.ca('path',path)                      //回写过去     return path } //整体复制的话需要带上这句，因为属性func外层已经是函数体 return func(data,view)

4.2 数据绑定变量定义

4.1中函数内用到的变量相呼应，需要在数据绑定中定义这5个变量

但是直接像如上界面一个个参照创建这几个变量，操作非常不方便，可以直接复制粘贴数据json段：

注意，上面截图是旧的变量名称还是"iconColor"，下面更新成了"icon-background"（直接用矢量svg绑定的变量名称）。无需像之前那样在func属性中用"iconColor"中间过渡！

JSON    ,{       "attr": "icon-background",       "valueType": "Color",       "name": "颜色",       "group": "图标"     },     {       "attr": "path",       "valueType": "Image",       "name": "名称",       "group": "图标"     },     {       "attr": "iconHeight",       "valueType": "PositiveNumber",       "name": "高度",       "group": "图标"     },     {       "attr": "iconWidth",       "valueType": "PositiveNumber",       "name": "宽度",       "group": "图标"     },     {       "attr": "iconType",       "valueType": "Level",       "defaultValue": 1,       "group": "图标",       "name": "风格"     }

4.3 关于前缀设置

【重要】组态图标symbol层层嵌套，最底层图标有数据绑定暴露变量（未设置前缀predix），中间过渡图标嵌套过程中，不需要下一层都要对上一层图标数据绑定暴露一遍，只需要对最上一层需要被子图纸用到的图标做数据绑定即可！

图标嵌套中，可以拖放进来同一个图标的多个实例，前缀是用来在数据绑定中这多个实例的，比如拖放两个相同的仪表嵌套进来，显然两个仪表是要绑定不同的数据作为变量暴露出去关联各自的物联中台数据点，那么一定要有区分，这就体现在前缀上。

注意，选中图标实例时在各自的属性不论是attr还是func里，可以都是一样的比如变量名为xxx，在全局dataBindings数据绑定中，命名就需要时a.xxx、b.xxx，这样通过a、b各自的前缀设置来区分。

必须要设置前缀的还有另一种情况，就是当图标嵌套，需要把自身的dataBindings都复制粘贴追加到被嵌套的图标内，如果发下变量有冲突，比如都叫font，会导致图纸上只有一处配置且变量同时起作用，而本来应该各自不同设置的，这时就一定要对其单独加上前缀。

在对图标做数据绑定取变量名称的时候，可以注意可能未来会被嵌套给其他图标用的情况，命名是常规通用的，还是要取名独特的一般不会跟其他发生冲突重复的命名呢？其实都没关系，用好图标的前缀即可！前缀相当于命名空间，避免变量空间污染的问题。

5. 扩展下拉选择：设置组态扩展数据类型，让图标库有变动的目录暴露的变量做成可下拉选择配置的枚举类型

如4中的tapeArr，对应duotone、light、regular、solid四个固定字符串，分别对应了1中下载、2中转换并保持结构的目录名称。在官方svg库也是这样，特地为同一个SGV图标设计了多重不同的风格，可供选择。

显然这个选择最好能在组态中也能下拉选择风格配置，不要手动填或者写死。那么在组态config.js中需要增加扩展的枚举类型变量：

JavaScript     var valueTypes = {         // 自定义值类型         GuanDao: {             type: 'enum',             values: ['flowAdd', 'flowReduce'],             i18nLabels: ['FlowRight', 'FlowLeft'] // 编辑器自动将 i18nLabels 内容转成 labels 值         },         Level: {             type: 'enum',             values: [0, 1, 2, 3],             i18nLabels: ['类型Ⅰ', '类型Ⅱ', '类型Ⅲ', '类型Ⅳ']         },         TimeSet: {             type: 'enum',             values: ['null', 'date', 'time', 'week', 'date_time', 'fan'],             i18nLabels: ['', 'DateSet', 'TimeSet', 'WeekSet', 'DateTimeSet', 'Fan'] // 编辑器自动将 i18nLabels 内容转成 labels 值         }     };

随后，在图标的数据绑定中类型列表中就会多了一个“Level类型”，而且下拉选择有“类型Ⅰ” 到“类型Ⅳ”，拖放到组态中，就可以有下拉选择了！如下图所示：

 

 

6. 图纸最终使用：拖放4中配置好ICON属性的图标到图纸中（可以是当前组件下ICON属性，也可以是整个组件IMAGE路径属性，见第7节）

如果直接使用2中转换成的HT图标或3中绑定变量的，那么没有特别的地方，跟常规图标一样，这里不做重点说明。

主要是对于一些需要设置图标ICON的图标组件，比如输入框（symbols/demo/ht/ui/input2.json）需要有放大镜图标，并且ICON图标属性设置只有一个变量暴露对外，填写图标地址。

那么怎么能用上1中的SVG矢量图标库，并且方便在矢量库官方进行检索，根据名称来配置？而且还能设置颜色等其他属性？

ht目录结构也缺乏组件标签管理，仅根据文件名称是在不方便，做归类也多此一举，也不便于定期更新同步官方的矢量库版本并维持检索和归类方式一致！

可以直接对照awesome的官网地址搜索图标，因为我们这里在步骤1中打包了离线的pro专业版，包含了7千个图标（虽然目前最新官方是1.6万个），不影响常规的我们在网站检索，获得的图标英文名称，作为组态中需要填入的部分，其余部分因为目录固定，组态程序识别处理全路径

前面1~5配置起来比较繁琐，就是为了用起来简单，如下2~3步：

6.1 检索awesome图标

6.2 图纸中输入图标名称

 

 

粘贴后生成的全路径，可以点击右侧图标，就进入到矢量图标（内置demo账号下的不可编辑），如果想要订制修改，可以复制到用户目录，实现对单一图标针对定制化配置！

注意，也支持直接输入本地指定的图标路径，可以是SVG图标或其他图标，当然，这种情况下其他配置属性比如类型、背景颜色配置可能就没有效果了！

6.3 完成其他图标配置项

运行预览，完成

7. 嵌套图标地址属性func暴露变量实现图纸界面属性可动态配置：

除了以上对于组件Component有icon图标属性的时候可以用这种方式，每个图标symbol带的图标内想直接用图片名称路径，也都是可以设置变量暴露出来动态配置图标symbol路径的，并且func属性函数也跟4.1一样可以从一个属性变量，通过函数，来对应多个变量数据绑定暴露给图纸或者嵌套图标来做界面配置的：

​ 

8. 嵌套的图标如果有设置数据绑定，那么在被嵌套的图标中可直接用该变量：

8.1 可行：func属性函数绑定中对绑定的数据变量赋值

​

 ​

8.2 可行：渲染元素中对嵌套的图标暴露属性赋值（注意是“渲染元素”而非“事件处理”）

 

8.3 可行：现不用组件中的图标属性直接换成图标嵌套一样起作用

这种情况下，渲染元素中data.ca()操作底层图标对外的暴露绑定的数据变量，一样凑效，注意，包括前面的步骤，都是不需要当前图标中做数据绑定定义再暴露的，直接使用底层图标对外数据绑定暴露的变量即可，不需要在当前图标上去做数据绑定定义！

 

8.4 能支持：渲染元素中实例化ui组件以API设置图标非组件及其他图标嵌套，也能行但是需要特别处理，默认是不可行的！！

直接当前图标渲染元素创建ui对象并api调用设置该对象的图标、传入url路径地址，同时渲染元素中调用传入路径的图标对外的数据绑定，则对变量的操作不起作用！！

直接重写ht.ui.drawable.ImageDrawable（基类为ht.ui.drawable.Drawable）代替setIcon里的默认实现，或者不代替也调用基类的方法，只是加上自己的代码来实现传入的做了数据绑定databindings的图纸数据变量动态改变图标的显示内容，如果不在重写函数中实例化ht.Node，传入基类draw的data，也是徒劳的！即便改图标做了数据绑定且在其变量定义中有设置初始值，setIcon并不会显示数据绑定中的变量值以数据绑定中的初始值来呈现界面！

 

不过，用.setIconDrawable(new ht.ui.drawable.ImageDrawable())代替.setIcon()有个好处就是可以将“染色”作为参数传入，这样就可以起到修改图标颜色的作用！

不过也有限制，不是所有的图标都能被“染色”，通常图标是内置矩形等，都是能被染色的！（图标内SVG矢量线段或者嵌入的IMAGE是这样的图标，这类染色不了）

JavaScript //textField.setIcon(data.ca('iconPath')); textField.setIconDrawable(new ht.ui.drawable.ImageDrawable(data.ca('iconPath'),'centerUniform',data.ca('iconColor')));

终极方式，就是需要通过在重写的draw函数中，创建ht.Node示例，node.setImage()加载图标json、data.a()设置数据绑定的变量，然后将改node实例传入到基类的draw即可，详见：

9. 其他

9.1 图标URL通过ht.Data/ht.Node过渡，用图元节点setIcon设置了上述矢量图标，调用a.('icon-background','yellow')可设置颜色！

对于经过上述步骤处理后的svg图标，都默认有做数据绑定背景颜色"icon-background"，如果直接被图元节点ht.Node使用，比如node.s('icon','symbols/demo/AiotOS/icons/light/tachometer-alt-slow.json')，那么可以通过node.a('icon-background','yellow')可以设置颜色，避免默认黑色，不需要去修改原始svg图标的背景色，也不需要非得再数据绑定到图纸上界面配置！