Iconify 图标选择器插件（1CMS）

用于在后台字段中选择 Iconify 图标或上传本地 SVG 图标，并在前台自动渲染为内联 SVG。了解过Iconify的小伙伴都知道，这个平台图标数量非常庞大，总有你喜欢的一款。

安装

• 安装应用后会自动注册一个输入组件：iconify。
• 可选依赖：如需使用「上传 SVG」功能，需同时安装 uploadext 插件以确保 .svg 后缀被允许上传。若不需要上传功能，不安装 uploadext 也可正常使用 Iconify 在线图标。

后台使用

• 在字段类型中选择 iconify。
• 字段值保存格式有两种：
  • Iconify 在线图标：prefix:name（例如 ri:home-4-line）
  • 本地 SVG 图标：local:/upload/icons/filename.svg
• 可选配置：
  • 图标集 collections：分号分隔（如 ri;mdi;bi），留空使用默认图标集。

上传本地 SVG

• 编辑字段时，点击「上传SVG」按钮即可上传自定义 SVG 文件。
• 文件保存至 /upload/icons/ 目录。
• 上传时会自动处理：
  • 移除 <script> 标签及事件属性（安全清洗）
  • 将固定颜色值替换为 currentColor，便于前端用 CSS 控制颜色

选择器说明

• 打开图标选择器后，除 Iconify 在线图标集外，还有两个 Tab：
  • 本地图标：展示已上传的所有本地 SVG。
  • 全部图标集：跨全部 Iconify 图标集搜索，不限于当前图标集，输入关键字后展示结果（本地图标不在其搜索范围内）。

前台渲染

插件会在前台自动注入 iconify-core.js 与 iconify-loader.js，模板里输出带 data-icon 的元素即可：

<i data-icon="{$.icon}"></i>

手动引入时注意顺序：iconify-core.js 必须在 iconify-loader.js 之前（后台选择器同理，iconify-core.js 要在 iconify-picker.js 之前）。

在线图标和本地图标均支持，local: 前缀的图标会直接请求服务器文件，在线图标走 Iconify API。

颜色控制

本地 SVG 上传后颜色已替换为 currentColor，通过 CSS 的 color 属性即可控制颜色，与 UnoCSS / Tailwind 的 text-* 工具类完全兼容：

<style>
    [data-icon] svg {
        display: block;
        width: 2rem;
        height: 2rem;
    }
</style>

<!-- 红色图标 -->
<i data-icon="{$.icon}" style="color:red"></i>

<!-- 配合 UnoCSS -->
<i data-icon="{$.icon}" class="text-blue-500 w-8 h-8"></i>

说明

• Iconify 在线图标通过 Iconify API 按图标集批量加载（同一图标集的多个图标合并为 1 个请求，URL 超过 1000 字符自动切块），全局并发上限 2，遇 429 自动退避重试并更换限流桶，并使用 localStorage 缓存（TTL 7天）减少重复请求。
• 本地图标同样使用 localStorage 缓存，不会重复请求服务器文件。
• 缓存策略：只有「真正用到」的图标才写入 localStorage（后台选中并预览的图标、前台页面渲染的图标、本地上传的 SVG）。选择器里搜索/翻页浏览到的图标只进内存，关掉页面即释放，避免为了找一个图标翻几十页后留下大量用不到的缓存。
• uploadext 插件非强制依赖，仅上传 SVG 时需要，不安装不影响在线图标选择功能。