بنقرة واحدة
umbraco-icons
Implement custom icons in Umbraco backoffice using official docs
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
Implement custom icons in Umbraco backoffice using official docs
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Implement UFM (Umbraco Flavored Markdown) components in Umbraco backoffice using official docs
Add a new Umbraco extension project reference to the main Umbraco instance and solution
Understand and use localization in Umbraco backoffice (foundational concept)
Implement property editor UIs in Umbraco backoffice using official docs
Quick setup for Umbraco extension development - creates instance, extension, and registers it
Review checks reference for validating Umbraco backoffice extensions
| name | umbraco-icons |
| description | Implement custom icons in Umbraco backoffice using official docs |
| version | 1.0.0 |
| location | managed |
| allowed-tools | Read, Write, Edit, WebFetch |
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.