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

最新推荐文章于 2025-10-22 20:18:10 发布

原创

最新推荐文章于 2025-10-22 20:18:10 发布 · 931 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ht.js #ht for web #webgl #canvas #组态编辑器

本文介绍如何在组态系统中导入和使用SVG图标库，包括下载、转换、属性绑定、扩展下拉选择配置等步骤，实现图标颜色、风格等动态配置。

组态无法直接用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": [