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-loader.js，模板里输出带 data-icon 的元素即可：

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

在线图标和本地图标均支持，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 按需加载，并使用 localStorage 缓存（TTL 7天）减少重复请求。
• 本地图标同样使用 localStorage 缓存，不会重复请求服务器文件。
• uploadext 插件非强制依赖，仅上传 SVG 时需要，不安装不影响在线图标选择功能。