# 图标

> 图标素材库：Fluent UI System Icons 目录和你自己的 SVG 图标、按名称或标签搜索、检视面板、用 SVG 标记创建和编辑一个图标、净化器保留和移除什么，以及一个图标用在哪里。

**Icons** 是 Assets 根下面的第二个类别：产品随附的 Fluent UI System Icons 目录里的每一个字形，加上你用 SVG 标记拼出来的图标。面板标题是“图标”，配一行“完整的 Fluent UI System Icons 目录，加上操作员自有的安全 SVG 图标。”，还有一枚数量胶囊。读它需要**查看 Logic**；创建、编辑和删除你自己的图标需要**配置 Logic**。

## 目录 {#the-catalog}

卡片上方是：**搜索**（“名称或标签”）、**来源**和**每页**。搜索不分大小写，匹配任何图标的名称，也匹配目录字形的搜索标签（一个字形可以靠名称里没有的标签被找到）；每敲一个键都会从第一页重建列表，并丢掉列表不再显示的那个选中项。卡片显示字形、名称和来源（目录字形是**系统**，你的是**我的**）；结果为空时说“没有图标符合这些筛选条件。”，并给出**清除筛选**。目录按名称排序；你的某个图标和某个目录字形共用同一段时，两张卡片都会列出来，而在那个地址上你的胜出。

## 检视面板 {#the-inspector}

| 行 | 它显示什么 |
| --- | --- |
| 字形 | 以 112 像素画出 |
| 地址 | `Assets.Icons.<segment>` |
| 来源 | Fluent UI System Icons 图标库，或者我的素材库 |
| 格式 | 内置字形，或者净化后的 SVG |
| 搜索标签 | 对目录字形来说，是名称之外还能被搜索匹配上的那些词 |

目录字形显示“系统图标是只读的。”。你的图标为能配置的角色提供**编辑**和**删除**。

## 新建用户图标 {#new-user-icon}

Icons 那一行上的命令会在网格的位置上打开“新建用户图标”（“用惰性的 SVG 标记创建一个可寻址的图标。”）。

| 字段 | 它是什么 | 取值 / 默认值 | 效果 |
| --- | --- | --- | --- |
| 名称 | 显示名称；它规整出来的那一段就是地址。 | 必填，默认为空。 | 仪表画面和变量持有的正是这个地址。之后可以在编辑里重命名，指向旧地址的每一处引用都会跟着走。 |
| SVG 标记 | 图标的标记，以文本粘贴进来。 | 必填；占位提示写着 `<svg viewBox="0 0 24 24">…</svg>`。 | 边打字边净化；右边的预览以 112 像素显示净化之后的结果，或者显示“SVG 有效时会出现一个安全的预览。”。 |

字段下面有一行错误提示，说缺了什么（“必须填写名称和 SVG 标记。”“必须填写名称。”），或者说净化器拒绝了什么；两个字段都合法之前，**创建图标**一直置灰。**取消**或者**返回**会不创建就离开。成功之后那张卡片会被露出来（搜索和来源筛选会在它们本来会挡住这张卡片时被清掉），操作记录条说“图标已创建。”。

### 净化器保留什么、拒绝什么 {#what-the-sanitizer-keeps-and-refuses}

图标标记是一种经过校验的数据格式，绝不是可执行的内容。净化器保留惰性的 SVG：`svg`、`g`、`defs`、`symbol`、`use`、那些形状（`path`、`rect`、`circle`、`ellipse`、`line`、`polyline`、`polygon`）、`text` 和 `tspan`、`title` 和 `desc`、渐变和 `stop`、`pattern`、`mask`、`clipPath` 和 `marker`，连同它们的几何、上色和文字属性，一个只限于这几类属性的 `style` 属性，以及内部引用（`href="#id"`、`url(#id)`）。其余的一律移除：`script` 和 `style` 元素、`foreignObject`、事件属性、外部和 `data:` 的 URL、未知属性、非法 id，以及指向并不存在的 id 的引用。移除不会被报告：图标编辑器只显示净化后的预览，没有列出修复的那一行，图标按净化后的标记保存。只有[导入图元](assets-symbols#import-symbol)会统计它做过的修复。它直接拒绝这样的标记：空的、不是良构 XML 的、没有 `<svg>` 根的、超过 512 KB 的、超过 4096 个元素的，或者带着重复 id 的。预览绝不显示未净化的标记，而存下来的图标每一次被读取时都会再净化一遍。

## 编辑 {#edit}

**编辑**打开“编辑 `<name>`”（“重命名在按回车或焦点离开该字段时保存，并会一并带走引用；有效的 SVG 更改会自动保存。”）：一个**名称**字段，它是一个重命名字段，下面是标记。你打名称的时候有一行预览影响范围（“重命名会更新读取这个地址的 2 处位置。”“没有任何引用使用当前地址。”，或者新名称规整之后还是同一段时的“有效地址不会改变，没有引用需要更新。”）。按回车，或者离开这个字段，就提交：图标保留它的 id 和它的标记，指向旧地址的每一处带根引用都被改写，操作记录条说“图标已重命名，更新了 N 处引用。”。已经被占用的名称就地在字段下面被拒绝。一次合法的标记更改会在你停手半秒之后保存（“图标已保存。”）；不合法的草稿不保存，并说明原因。**返回**回到目录，保留最后一份合法的标记。

## 删除 {#delete}

**删除**会问“要删除‘X’吗？指向它地址的引用会变成无法解析。 此操作无法撤销。”。此后返回那个地址的变量会解析不到任何东西，这由[验证](validation)列出来。操作记录条说“图标已删除。”。

## 一个图标用在哪里 {#where-an-icon-is-used}

一个输出为图标的[变量](logic-variables#output-types)返回 `Assets.Icons.<name>`，绑上去的[图标](component-icon)仪表画面组件把它画出来：目录字形按字体字形画，你的图标按它的标记画。

## 这个素材库不做的事 {#what-the-library-does-not-do}

它不导入 SVG 文件（请粘贴标记），不给你的图标加标签，不给它们上色（图标的颜色由画它的那个组件决定），不编辑也不隐藏目录里的字形，也不导出。