Svg Icons（通过 Iconify）
Edge 提供了官方集成，用于通过 Iconify 渲染图标。Iconify 拥有超过 100 套开源图标集，你可以使用统一的 API 来引用它们。
安装
Edge 与 Iconify 的集成是一个插件，你必须从 npm 包仓库安装它。
npm i edge-iconify
接下来是将该插件注册到 Edge。
import edge from 'edge.js'
import { edgeIconify } from 'edge-iconify'
edge.use(edgeIconify)
安装 Iconify 图标包
在渲染图标之前，你必须安装 Iconify 图标包。Iconify 提供了多种分发包。不过，Edge 集成仅支持 JSON 集合。
让我们安装并使用 HeroIcons 图标集。
npm i @iconify-json/heroicons
import { Edge } from 'edge.js'
import { edgeIconify, addCollection } from 'edge-iconify'
import { icons as heroIcons } from '@iconify-json/heroicons'
/**
* 添加 heroIcons 集合
*/
addCollection(heroIcons)
const edge = Edge.create()
/**
* 注册插件
*/
edge.use(edgeIconify)
用法
完成设置后，你可以使用 @svg 标签渲染图标。svg 标签接受图标标识符，以及一个可选的用于在输出 SVG 元素上定义的属性集合。
@svg('heroicons:arrow-left-solid')
输出
<svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"></path></svg>
在下面的示例中，我们为图标定义了自定义的宽度、高度和颜色。
@svg('heroicons:arrow-left-solid', {
width: 40,
height: 40,
color: 'purple'
})
输出
<svg width="40" height="40" viewBox="0 0 24 24" color="purple"><path fill="currentColor" fill-rule="evenodd" d="M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"></path></svg>
在标记内联渲染
你可以使用 svg 全局辅助方法，将 SVG 图标与原始文本标记一起渲染（不换行）。
<button> {{ svg('heroicons:archive-box') }} Delete post <button>
查找图标标识符
你可以从 Iconify 图标集浏览器 查看可用的图标。
- 首先选择你正在使用的图标集。
- 搜索你想使用的图标。
- 点击并复制显示在图标预览旁边的标识符。
查找并安装图标包
遗憾的是，我们尚未在 Iconify 网站上看到针对其 JSON 集合的详细安装指南。你可以使用下表来查阅这些集合及其 npm 包名。
下表汇总自 Iconify collections.json 文件。