图标库
用 pixicon 引入 Font Awesome、Remix、Lucide 等常用图标 CDN，并按各库写法补全。
先引入，再写图标
Pixorla 收录 7 个常用图标 CDN。用 pixicon-<slug> 或 CDN 库写入引用后，HTML 面板才会出现该库的图标名补全。作品里还没有引入时，不会列出图标。
如何引入
纯 CSS 库（Font Awesome、Bootstrap Icons、Remix、Boxicons、Material）在 HTML 面板输入 pixicon-<slug> 后按 Tab，写入 <link>；在 CSS 面板则写入 @import。Lucide / Feather 是脚本库，只在 HTML 或 JavaScript 面板可用，写入 <script>。也可以从编辑器工具菜单的 CDN 库搜索这些包。JavaScript 面板不提供纯 CSS 图标指令。
图标名补全
引入成功后，在对应位置输入即可补全。图标名只加载你正在用的库，不会一次拉齐全部。同时引入多个库时，符合当前输入的候选会一起出现。
对照表
指令、库名与一条典型写法。下面按写法分类说明。
| 指令 | 图标库 | 典型写法 |
|---|---|---|
| pixicon-fontawesome | Font Awesome | <i class="fas fa-home"></i> |
| pixicon-bootstrap | Bootstrap Icons | <i class="bi bi-house"></i> |
| pixicon-remix | Remix Icon | <i class="ri-home-line"></i> |
| pixicon-lucide | Lucide | <i data-lucide="trash-2"></i> |
| pixicon-feather | Feather Icons | <i data-feather="heart"></i> |
| pixicon-boxicons | Boxicons | <i class="bx bxs-home"></i> |
| pixicon-material | Material Icons | <i class="material-icons">favorite</i> |
写在 class 上的库
Font Awesome、Bootstrap Icons、Remix、Boxicons 写在 class 上。可输入完整类名（fa-home、ri-home-line），或官网常见的短名（home、home-line）。Boxicons 官网写法是 bx bxs-home：先写样式前缀 bx / bxs / bxl，再补图标类。CSS 面板里也可在 .fa-、.ri-、.bx- 等选择器后续补全。
<i class="fas fa-home"></i> <i class="bi bi-house"></i> <i class="ri-home-line"></i> <i class="bx bxs-home"></i>
Lucide 与 Feather
官网写法是 data-lucide="trash-2" 或 data-feather="heart"。也可以写成 class="icon-trash-2"（或 lucide- / feather- 前缀）。预览会自动调用 createIcons / replace 画出图标；把代码拷到站外时，需要在脚本加载后自己调用这两行。
<i data-lucide="trash-2"></i> <i class="icon-trash-2"></i> <i data-feather="heart"></i>
Material Icons
给元素加上 class="material-icons"，把图标名写在标签文本里，例如 <i class="material-icons">favorite</i>。span、i、div 都可以。补全出现在该元素的文本里，而不是 class 属性里。
<i class="material-icons">favorite</i> <div class="material-icons">home</div>