# RelayIcon

- 
  调试
  &#xf3a2;
- 
  搜索渠道
  &#xf31d;
- 
  插件
  &#xeec3;
- 
  任务
  &#xeb95;
- 
  上箭头
  &#xf189;
- 
  还原
  &#xe963;
- 
  模型商店
  &#xf117;
- 
  更多
  &#xe388;
- 
  模型精调（填充）
  &#xe5a2;
- 
  数据源（填充）
  &#xe52e;
- 
  bot商店
  &#xe5e9;
- 
  智能体
  &#xf450;
- 
  用户
  &#xf15f;
- 
  保存
  &#xf0d6;
- 
  渠道搜索
  &#xe088;
- 
  工作流
  &#xe79c;
- 
  视频(填充)
  &#xe32e;
- 
  附件
  &#xe3e2;
- 
  右
  &#xeca0;
- 
  异常不处理
  &#xf12a;
- 
  暂停（填充蓝）
  &#xe711;
- 
  日志
  &#xe975;
- 
  时间
  &#xe508;
- 
  喜欢
  &#xe509;
- 
  收藏(填充)
  &#xea45;
- 
  清除
  &#xe8a1;
- 
  语音
  &#xec16;
- 
  播放
  &#xe776;
- 
  发送
  &#xf1a8;
- 
  不点赞（填充）
  &#xe2d5;
- 
  设置
  &#xecdd;
- 
  我的空间（填充）
  &#xe4eb;
- 
  更多技能
  &#xf4d1;
- 
  排序
  &#xeb3d;
- 
  查看示例
  &#xecda;
- 
  收藏
  &#xe32b;
- 
  MCP
  &#xec80;
- 
  PPT
  &#xf322;
- 
  渠道搜索（填充）
  &#xe863;
- 
  展开 (上下)
  &#xe48c;
- 
  任务中心（填充）
  &#xecd0;
- 
  咚咚
  &#xecec;
- 
  提醒
  &#xe31d;
- 
  日志（填充）
  &#xf1e8;
- 
  咚咚
  &#xe152;
- 
  收起 (上下)
  &#xf2ff;
- 
  数据库（填充）
  &#xe6a5;
- 
  使用量
  &#xf025;
- 
  点赞(填充)
  &#xf2a1;
- 
  向上添加
  &#xe36f;
- 
  向下添加
  &#xe0de;
- 
  钥匙
  &#xe006;
- 
  对勾
  &#xe6ca;
- 
  解锁
  &#xf0b9;
- 
  智能体（填充）
  &#xede1;
- 
  未解锁
  &#xed19;
- 
  未完成
  &#xe263;
- 
  不赞成
  &#xea9a;
- 
  我的空间
  &#xf0f1;
- 
  返回上一步
  &#xeb13;
- 
  举例
  &#xe5d6;
- 
  genie
  &#xe771;
- 
  展开
  &#xeaba;
- 
  更多hover
  &#xf394;
- 
  重命名
  &#xf3ae;
- 
  联网搜索
  &#xe011;
- 
  官方
  &#xec72;
- 
  删除
  &#xef5a;
- 
  变量
  &#xe533;
- 
  卡片（填充）
  &#xe4e2;
- 
  重命名
  &#xf055;
- 
  深度思考
  &#xe9b6;
- 
  数据源
  &#xf097;
- 
  MCP（填充）
  &#xf478;
- 
  清除
  &#xeed0;
- 
  插件（填充）
  &#xf4c4;
- 
  表格
  &#xe9bc;
- 
  筛选
  &#xea70;
- 
  关闭
  &#xe1a2;
- 
  新建正圆
  &#xf03a;
- 
  图片
  &#xe144;
- 
  文档
  &#xe5b8;
- 
  收起
  &#xe4e6;
- 
  分享
  &#xe158;
- 
  图片(填充)
  &#xe341;
- 
  日期
  &#xe8d7;
- 
  文件
  &#xf401;
- 
  发送(填充)
  &#xe3e7;
- 
  知识库（填充）
  &#xe6c3;
- 
  数据库
  &#xe5af;
- 
  任务中心
  &#xf0c3;
- 
  团队空间
  &#xe2c9;
- 
  模型精调
  &#xedcf;
- 
  前往箭头
  &#xedc9;
- 
  代码
  &#xf09c;
- 
  引用
  &#xf32b;
- 
  插件商店
  &#xeef8;
- 
  更多-1
  &#xefc5;
- 
  上传
  &#xe3bc;
- 
  链接
  &#xe968;
- 
  消息
  &#xed71;
- 
  下载
  &#xf503;
- 
  编辑
  &#xf349;
- 
  异常
  &#xeb88;
- 
  卡片
  &#xec20;
- 
  点赞
  &#xe9e1;
- 
  已完成
  &#xedee;
- 
  视频
  &#xe0d8;
- 
  工作流（填充）
  &#xe9ab;
- 
  警示
  &#xe3d1;
- 
  插件商店（填充）
  &#xeb63;
- 
  智能填充
  &#xeb92;
- 
  暂停
  &#xe10a;
- 
  下箭头
  &#xe5ab;
- 
  复制
  &#xe333;
- 
  添加
  &#xe372;
- 
  首页
  &#xe90c;
- 
  已完成（填充）
  &#xeccf;
- 
  暂停（填充）
  &#xe35e;
- 
  跳转
  &#xe452;
- 
  请求开放
  &#xe47b;
- 
  新建对话
  &#xef17;
- 
  加
  &#xee79;
- 
  精调数据（填充）
  &#xe6f4;
- 
  左
  &#xe3cf;
- 
  睁眼
  &#xe579;
- 
  数据看板
  &#xeff3;
- 
  刷新
  &#xf374;
- 
  电脑
  &#xea3f;
- 
  搜索
  &#xf466;
- 
  知识库
  &#xe571;
- 
  bot商店（填充）
  &#xe18b;
- 
  拖拽排序
  &#xef7f;
- 
  闭眼
  &#xe073;
- 
  减
  &#xf2cc;
- 
  语音(填充)
  &#xeea0;
- 
  genie（填充）
  &#xf11b;
- 
  模型商店（填充）
  &#xe5ae;
- 
  喜欢(填充)
  &#xe1be;
- 
  精调数据
  &#xe649;
- 
  疑问
  &#xe1b6;

## Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

- 兼容性最好，支持 IE6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

> 注意：新版 RelayIcon 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用 symbol 的引用方式

Unicode 使用步骤如下：

### 第一步：拷贝项目下面生成的 `@font-face`

    @font-face {
        font-family: 'font_family';
        src: url('relayicon.eot');
        src: url('relayicon.eot?#iefix') format('embedded-opentype'),
            url('relayicon.woff2') format('woff2'),
            url('relayicon.woff') format('woff'),
            url('relayicon.ttf') format('truetype'),
            url('relayicon.svg#font_family') format('svg');
      }

### 第二步：定义使用 relayicon 的样式

    .font_family {
        font-family: "font_family" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

### 第三步：挑选相应图标并获取字体编码，应用于页面

      <span class="font_family">&#x33;</span>

> "font_family" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "relayicon"。

- 调试
  .icon-tiaoshi
- 搜索渠道
  .icon-sousuoqudao
- 插件
  .icon-chajian
- 任务
  .icon-renwu
- 上箭头
  .icon-shangjiantou
- 还原
  .icon-huanyuan
- 模型商店
  .icon-moxingshangdian
- 更多
  .icon-gengduo
- 模型精调（填充）
  .icon-moxingjingtiaotianchong
- 数据源（填充）
  .icon-shujuyuantianchong
- bot商店
  .icon-botshangdian
- 智能体
  .icon-zhinengti
- 用户
  .icon-yonghu
- 保存
  .icon-baocun
- 渠道搜索
  .icon-qudaosousuo
- 工作流
  .icon-gongzuoliu
- 视频(填充)
  .icon-shipintianchong
- 附件
  .icon-fujian
- 右
  .icon-youjiantou
- 异常不处理
  .icon-yichangbuchuli
- 暂停（填充蓝）
  .icon-zantingtianchonglan
- 日志
  .icon-rizhi
- 时间
  .icon-shijian1
- 喜欢
  .icon-xihuan
- 收藏(填充)
  .icon-shoucang-tianchong
- 清除
  .icon-qingchu
- 语音
  .icon-yuyin
- 播放
  .icon-bofang
- 发送
  .icon-fasong
- 不点赞（填充）
  .icon-budianzantianchong
- 设置
  .icon-shezhi
- 我的空间（填充）
  .icon-wodekongjiantianchong
- 更多技能
  .icon-gengduojineng
- 排序
  .icon-paixu
- 查看示例
  .icon-chakanshili
- 收藏
  .icon-shoucang
- MCP
  .icon-mcp
- PPT
  .icon-ppt
- 渠道搜索（填充）
  .icon-qudaosousuotianchong
- 展开 (上下)
  .icon-zhankaishangxia
- 任务中心（填充）
  .icon-renwuzhongxintianchong3
- 咚咚
  .icon-dongdong1
- 提醒
  .icon-tixing
- 日志（填充）
  .icon-rizhitianchong
- 咚咚
  .icon-dongdong
- 收起 (上下)
  .icon-shouqishangxia
- 数据库（填充）
  .icon-shujukutianchong
- 使用量
  .icon-shiyongliang
- 点赞(填充)
  .icon-dianzantianchong
- 向上添加
  .icon-xiangshangtianjia
- 向下添加
  .icon-xiangxiatianjia
- 钥匙
  .icon-yuechi
- 对勾
  .icon-duigou
- 解锁
  .icon-jiesuo1
- 智能体（填充）
  .icon-zhinengtitianchong
- 未解锁
  .icon-weijiesuo2
- 未完成
  .icon-weiwancheng
- 不赞成
  .icon-buzancheng
- 我的空间
  .icon-wodekongjian
- 返回上一步
  .icon-fanhuishangyibu
- 举例
  .icon-juli
- genie
  .icon-genie
- 展开
  .icon-zhankai
- 更多hover
  .icon-gengduoicon
- 重命名
  .icon-zhongmingming
- 联网搜索
  .icon-lianwangsousuo
- 官方
  .icon-guanfang
- 删除
  .icon-shanchu
- 变量
  .icon-bianliang
- 卡片（填充）
  .icon-kapiantianchong
- 重命名
  .icon-zhongmingming-1
- 深度思考
  .icon-shendusikao
- 数据源
  .icon-shujuyuan
- MCP（填充）
  .icon-mcptianchong
- 清除
  .icon-jia-1
- 插件（填充）
  .icon-chajiantianchong
- 表格
  .icon-biaoge
- 筛选
  .icon-shaixuan1
- 关闭
  .icon-guanbi
- 新建正圆
  .icon-xinjianzhengyuan
- 图片
  .icon-tupian
- 文档
  .icon-wendang
- 收起
  .icon-shouqi
- 分享
  .icon-fenxiang
- 图片(填充)
  .icon-tupiantianchong
- 日期
  .icon-riqiicon
- 文件
  .icon-wenjian
- 发送(填充)
  .icon-fasongtianchong
- 知识库（填充）
  .icon-zhishikutianchong
- 数据库
  .icon-shujuku
- 任务中心
  .icon-renwuzhongxin
- 团队空间
  .icon-tuanduikongjian
- 模型精调
  .icon-moxingjingtiao
- 前往箭头
  .icon-xinjianjiantou
- 代码
  .icon-daima
- 引用
  .icon-yinyong
- 插件商店
  .icon-chajianshangdian
- 更多-1
  .icon-gengduoicon-11
- 上传
  .icon-shangchuan
- 链接
  .icon-lianjie
- 消息
  .icon-xiaoxi
- 下载
  .icon-xiazai
- 编辑
  .icon-bianji
- 异常
  .icon-yichang
- 卡片
  .icon-kapian
- 点赞
  .icon-dianzan
- 已完成
  .icon-yiwancheng
- 视频
  .icon-shipin
- 工作流（填充）
  .icon-gongzuoliutianchong
- 警示
  .icon-jingshi
- 插件商店（填充）
  .icon-chajianshangdiantianchong
- 智能填充
  .icon-zhinengtianchong
- 暂停
  .icon-zanting
- 下箭头
  .icon-xiajiantou
- 复制
  .icon-fuzhi
- 添加
  .icon-tianjia
- 首页
  .icon-shouye
- 已完成（填充）
  .icon-yiwanchengtianchong
- 暂停（填充）
  .icon-zantingtianchong
- 跳转
  .icon-tiaozhuan1
- 请求开放
  .icon-qingqiukaifang
- 新建对话
  .icon-xinjianduihua
- 加
  .icon-jia
- 精调数据（填充）
  .icon-jingtiaoshujutianchong1
- 左
  .icon-fanhui
- 睁眼
  .icon-zhengyan
- 数据看板
  .icon-shujukanban
- 刷新
  .icon-shuaxin
- 电脑
  .icon-diannao
- 搜索
  .icon-sousuo
- 知识库
  .icon-zhishiku
- bot商店（填充）
  .icon-botshangdiantianchong
- 拖拽排序
  .icon-tuozhuaipaixu1
- 闭眼
  .icon-zhengyan-1
- 减
  .icon-jian
- 语音(填充)
  .icon-yuyintianchong
- genie（填充）
  .icon-genietianchong
- 模型商店（填充）
  .icon-moxingshangdiantianchong
- 喜欢(填充)
  .icon-xihuan-tianchong
- 精调数据
  .icon-jingtiaoshuju1
- 疑问
  .icon-yiwen

## font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

### 第一步：引入项目下面生成的 fontclass 代码：

    <link rel="stylesheet" href="./relayicon.css">

### 第二步：挑选相应图标并获取类名，应用于页面：

    <span class="font_family icon-xxx"></span>

> " font_family" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "relayicon"。

- 调试
  #icon-tiaoshi
- 搜索渠道
  #icon-sousuoqudao
- 插件
  #icon-chajian
- 任务
  #icon-renwu
- 上箭头
  #icon-shangjiantou
- 还原
  #icon-huanyuan
- 模型商店
  #icon-moxingshangdian
- 更多
  #icon-gengduo
- 模型精调（填充）
  #icon-moxingjingtiaotianchong
- 数据源（填充）
  #icon-shujuyuantianchong
- bot商店
  #icon-botshangdian
- 智能体
  #icon-zhinengti
- 用户
  #icon-yonghu
- 保存
  #icon-baocun
- 渠道搜索
  #icon-qudaosousuo
- 工作流
  #icon-gongzuoliu
- 视频(填充)
  #icon-shipintianchong
- 附件
  #icon-fujian
- 右
  #icon-youjiantou
- 异常不处理
  #icon-yichangbuchuli
- 暂停（填充蓝）
  #icon-zantingtianchonglan
- 日志
  #icon-rizhi
- 时间
  #icon-shijian1
- 喜欢
  #icon-xihuan
- 收藏(填充)
  #icon-shoucang-tianchong
- 清除
  #icon-qingchu
- 语音
  #icon-yuyin
- 播放
  #icon-bofang
- 发送
  #icon-fasong
- 不点赞（填充）
  #icon-budianzantianchong
- 设置
  #icon-shezhi
- 我的空间（填充）
  #icon-wodekongjiantianchong
- 更多技能
  #icon-gengduojineng
- 排序
  #icon-paixu
- 查看示例
  #icon-chakanshili
- 收藏
  #icon-shoucang
- MCP
  #icon-mcp
- PPT
  #icon-ppt
- 渠道搜索（填充）
  #icon-qudaosousuotianchong
- 展开 (上下)
  #icon-zhankaishangxia
- 任务中心（填充）
  #icon-renwuzhongxintianchong3
- 咚咚
  #icon-dongdong1
- 提醒
  #icon-tixing
- 日志（填充）
  #icon-rizhitianchong
- 咚咚
  #icon-dongdong
- 收起 (上下)
  #icon-shouqishangxia
- 数据库（填充）
  #icon-shujukutianchong
- 使用量
  #icon-shiyongliang
- 点赞(填充)
  #icon-dianzantianchong
- 向上添加
  #icon-xiangshangtianjia
- 向下添加
  #icon-xiangxiatianjia
- 钥匙
  #icon-yuechi
- 对勾
  #icon-duigou
- 解锁
  #icon-jiesuo1
- 智能体（填充）
  #icon-zhinengtitianchong
- 未解锁
  #icon-weijiesuo2
- 未完成
  #icon-weiwancheng
- 不赞成
  #icon-buzancheng
- 我的空间
  #icon-wodekongjian
- 返回上一步
  #icon-fanhuishangyibu
- 举例
  #icon-juli
- genie
  #icon-genie
- 展开
  #icon-zhankai
- 更多hover
  #icon-gengduoicon
- 重命名
  #icon-zhongmingming
- 联网搜索
  #icon-lianwangsousuo
- 官方
  #icon-guanfang
- 删除
  #icon-shanchu
- 变量
  #icon-bianliang
- 卡片（填充）
  #icon-kapiantianchong
- 重命名
  #icon-zhongmingming-1
- 深度思考
  #icon-shendusikao
- 数据源
  #icon-shujuyuan
- MCP（填充）
  #icon-mcptianchong
- 清除
  #icon-jia-1
- 插件（填充）
  #icon-chajiantianchong
- 表格
  #icon-biaoge
- 筛选
  #icon-shaixuan1
- 关闭
  #icon-guanbi
- 新建正圆
  #icon-xinjianzhengyuan
- 图片
  #icon-tupian
- 文档
  #icon-wendang
- 收起
  #icon-shouqi
- 分享
  #icon-fenxiang
- 图片(填充)
  #icon-tupiantianchong
- 日期
  #icon-riqiicon
- 文件
  #icon-wenjian
- 发送(填充)
  #icon-fasongtianchong
- 知识库（填充）
  #icon-zhishikutianchong
- 数据库
  #icon-shujuku
- 任务中心
  #icon-renwuzhongxin
- 团队空间
  #icon-tuanduikongjian
- 模型精调
  #icon-moxingjingtiao
- 前往箭头
  #icon-xinjianjiantou
- 代码
  #icon-daima
- 引用
  #icon-yinyong
- 插件商店
  #icon-chajianshangdian
- 更多-1
  #icon-gengduoicon-11
- 上传
  #icon-shangchuan
- 链接
  #icon-lianjie
- 消息
  #icon-xiaoxi
- 下载
  #icon-xiazai
- 编辑
  #icon-bianji
- 异常
  #icon-yichang
- 卡片
  #icon-kapian
- 点赞
  #icon-dianzan
- 已完成
  #icon-yiwancheng
- 视频
  #icon-shipin
- 工作流（填充）
  #icon-gongzuoliutianchong
- 警示
  #icon-jingshi
- 插件商店（填充）
  #icon-chajianshangdiantianchong
- 智能填充
  #icon-zhinengtianchong
- 暂停
  #icon-zanting
- 下箭头
  #icon-xiajiantou
- 复制
  #icon-fuzhi
- 添加
  #icon-tianjia
- 首页
  #icon-shouye
- 已完成（填充）
  #icon-yiwanchengtianchong
- 暂停（填充）
  #icon-zantingtianchong
- 跳转
  #icon-tiaozhuan1
- 请求开放
  #icon-qingqiukaifang
- 新建对话
  #icon-xinjianduihua
- 加
  #icon-jia
- 精调数据（填充）
  #icon-jingtiaoshujutianchong1
- 左
  #icon-fanhui
- 睁眼
  #icon-zhengyan
- 数据看板
  #icon-shujukanban
- 刷新
  #icon-shuaxin
- 电脑
  #icon-diannao
- 搜索
  #icon-sousuo
- 知识库
  #icon-zhishiku
- bot商店（填充）
  #icon-botshangdiantianchong
- 拖拽排序
  #icon-tuozhuaipaixu1
- 闭眼
  #icon-zhengyan-1
- 减
  #icon-jian
- 语音(填充)
  #icon-yuyintianchong
- genie（填充）
  #icon-genietianchong
- 模型商店（填充）
  #icon-moxingshangdiantianchong
- 喜欢(填充)
  #icon-xihuan-tianchong
- 精调数据
  #icon-jingtiaoshuju1
- 疑问
  #icon-yiwen

## Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过 `font-size`, `color` 来调整样式。
- 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

### 第一步：引入项目下面生成的 symbol 代码：

    <script src="./relayicon.js"></script>

### 第二步：加入通用 CSS 代码（引入一次就行）：

    <style>
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
      </style>

### 第三步：挑选相应图标并获取类名，应用于页面：

    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xxx"></use>
      </svg>