图标

本文将详细介绍与图标相关的操作，用户可直接调用内置图标库中丰富的素材，快速满足各类设计需求。同时，还支持自主新建图标文件素材，灵活定制专属图标，进一步丰富数据可视化的视觉效果。

新建

步骤一：进入图标列表

1. 登录河图账号，在左侧菜单栏中，找到并点击素材库选项，进入素材库页面。

2. 在素材库页面中，选择图标分类，进入图标列表。

3. 点击新建，进入图标详情页面。

步骤二：新建图标

1. 填写图标名称分类

• 输入名称： 在名称字段中输入图标名称。

• 输入分类： 在分类字段中输入分类名称。

2. 上传文件

• 拖拽上传： 将SVG格式的图标文件从本地文件夹中拖拽到上传区域。

• 点击上传： 点击上传，打开文件浏览器，选择SVG格式的图标文件，点击打开按钮完成上传。

3. 输入可视区大小

• 可视区大小 viewBox 默认值： 0 0 32 32

• 将 svg 文件以记事本方式打开，查看并复制 viewBox 值到可视区大小文本框

4. 输入图形ID

• 输入图形ID默认值： shape。

• 将 svg 文件以记事本方式打开，查看并复制 id 值到图形ID文本框。

5. 点击保存，完成图标创建。

上传的 svg 文件的格式要求：

单 path 文件需要以下格式

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <path id="shape" d="XXXXXXX"/>
</svg>

• svg 标签上必须有 viewBox 属性，默认为 0 0 32 32。

• path 标签上必须有id属性，默认为shape。

• 如果 viewBox与id与默认值不同，需要在新建图标的表单中分别指定可视化大小与图形 ID。

• path 内部不需要有颜色相关的属性，例如：fill。

多 path 文件需要以下格式

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="shape" viewBox="0 0 32 32">
        <path d="XXXXXXX"/>
        <path d="XXXXXXX"/>
    </symbol>
</svg>

• 如果图标有多个 path 组成，需要用symbol标签包起来，id和viewBox加到symbol标签上。
• 其他同上。

编辑

鼠标悬停在图标上，点击编辑，可修改名称、分类。

删除

鼠标悬停在图标上，点击删除。在弹出的提示中，点击确定按钮，完成删除。

图标在设计器内使用说明

1. 内置图标

   进入设计器，在界面左侧找到并点击素材区域，选择图标，呈现出包含 24 种类别的内置图标库，选中图标按住鼠标左键将其拖拽至画布内使用。

2. 自定义图标

   进入设计器，在界面左侧找到并点击素材区域，选择图标，在图标分类列表最下方即为自定义图标分类，选中图标按住鼠标左键将其拖拽至画布内使用。