umbraco-icons by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-icons图标是扩展作者可以注册的自定义视觉元素,用于整个 Umbraco 后台界面。自定义图标通过清单文件注册,然后可以在任何接受图标属性的扩展中使用。图标被定义为从 JavaScript 模块导出的 SVG 内容。
在实现之前,请务必获取最新的文档:
Umbraco 源代码包含一个可运行的示例:
位置 : /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/icons/
此示例演示了如何注册和使用自定义 SVG 图标。请研究此示例以了解生产模式。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
{
"name": "My Icons Package",
"extensions": [
{
"type": "icons",
"alias": "My.Icons",
"name": "My Custom Icons",
"js": "/App_Plugins/MyPackage/icons.js"
}
]
}
export default [
{
name: 'my-custom-icon',
path: () => import('./icons/my-custom-icon.js'),
},
{
name: 'my-other-icon',
path: () => import('./icons/my-other-icon.js'),
},
];
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>`;
// 在任何扩展清单中
const manifest = {
type: 'headerApp',
kind: 'button',
alias: 'My.HeaderApp',
name: 'My App',
meta: {
label: 'My App',
icon: 'my-custom-icon', // 使用您的自定义图标
},
};
<umb-icon name="my-custom-icon"></umb-icon>
就是这样!请务必获取最新的文档,保持示例简洁,并生成完整可运行的代码。
每周安装数
75
代码仓库
GitHub 星标数
17
首次出现
2026年2月4日
安全审计
安装于
github-copilot55
cursor25
opencode23
codex23
gemini-cli21
amp21
Icons are custom visual elements that extension authors can register for use throughout the Umbraco backoffice. Custom icons are registered through the manifest and can then be used in any extension that accepts an icon property. Icons are defined as SVG content exported from JavaScript modules.
Always fetch the latest docs before implementing:
The Umbraco source includes a working example:
Location : /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/icons/
This example demonstrates how to register and use custom SVG icons. Study this for production patterns.
{
"name": "My Icons Package",
"extensions": [
{
"type": "icons",
"alias": "My.Icons",
"name": "My Custom Icons",
"js": "/App_Plugins/MyPackage/icons.js"
}
]
}
export default [
{
name: 'my-custom-icon',
path: () => import('./icons/my-custom-icon.js'),
},
{
name: 'my-other-icon',
path: () => import('./icons/my-other-icon.js'),
},
];
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
},
};
<umb-icon name="my-custom-icon"></umb-icon>
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
Weekly Installs
75
Repository
GitHub Stars
17
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
github-copilot55
cursor25
opencode23
codex23
gemini-cli21
amp21
Angular Core 核心架构深度解析:Ivy渲染、依赖注入与变更检测机制
481 周安装
Better Auth 电子邮件与密码最佳实践:安全登录、验证与密码重置配置指南
8,900 周安装
Defuddle CLI:网页内容提取工具,一键移除广告导航,节省AI令牌使用量
9,200 周安装
Penpot UI/UX 设计指南:使用 MCP 服务器和 AI 辅助工具进行专业设计
8,900 周安装
Microsoft Docs 文档搜索技能 - 一站式查询 Azure、.NET、VS Code、GitHub 等技术文档
9,000 周安装
Azure DevOps CLI 完整指南:安装、身份验证与命令大全(2025最新版)
9,000 周安装
现代JavaScript模式指南:ES6+语法、函数式编程与性能优化实战
9,000 周安装