mcpField
U
umbraco-icons

umbraco-icons

github.com/umbraco设计与 UI27389 次安装6 周前更新
代码仓库

关于 umbraco-icons

umbraco-icons 是面向 Umbraco 扩展作者的技能，指导注册并在后台扩展中使用自定义 SVG 图标。它包含查阅最新文档、生成清单与图标文件的工作流程。

主要功能

  1. 01注册自定义 SVG 图标
  2. 02通过清单配置图标扩展
  3. 03在扩展中引用图标
  4. 04按文档生成完整代码

适用场景

  1. 01为 Umbraco 后台扩展添加品牌图标
  2. 02创建并注册扩展包图标
  3. 03在接受图标属性的扩展中使用自定义图标

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-icons

安装后在 Claude Code 中输入/umbraco-icons确认已加载。

详细介绍

Umbraco 图标

这是什么？

图标是扩展作者可以注册并在整个 Umbraco 后台中使用的自定义视觉元素。自定义图标通过清单注册，之后可用于任何接受图标属性的扩展。图标定义为从 JavaScript 模块导出的 SVG 内容。

文档

实现前，请务必获取最新文档：

参考示例

Umbraco 源代码中包含一个可运行的示例：

位置：/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/icons/

此示例演示了如何注册和使用自定义 SVG 图标。请参考此示例了解生产环境中的实践模式。

工作流

  1. 获取文档 - 对上述 URL 使用 WebFetch
  2. 提出问题 - 需要哪些图标？是否有 SVG 源文件？
  3. 生成文件 - 根据最新文档创建清单和图标文件
  4. 说明 - 展示创建的内容以及如何使用这些图标

最小示例

清单（umbraco-package.json）
{
  "name": "My Icons Package",
  "extensions": [
    {
      "type": "icons",
      "alias": "My.Icons",
      "name": "My Custom Icons",
      "js": "/App_Plugins/MyPackage/icons.js"
    }
  ]
}
图标注册表（icons.ts）
export default [
  {
    name: 'my-custom-icon',
    path: () => import('./icons/my-custom-icon.js'),
  },
  {
    name: 'my-other-icon',
    path: () => import('./icons/my-other-icon.js'),
  },
];
图标文件（icons/my-custom-icon.ts）
export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>`;
使用自定义图标
// In any extension manifest
const manifest = {
  type: 'headerApp',
  kind: 'button',
  alias: 'My.HeaderApp',
  name: 'My App',
  meta: {
    label: 'My App',
    icon: 'my-custom-icon',  // Use your custom icon
  },
};
在 HTML 模板中
<umb-icon name="my-custom-icon"></umb-icon>

就是这样！务必获取最新文档，保持示例简洁，并生成完整可运行的代码。

评论

支持 Markdown