Back to Details

umbraco-icons

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Umbraco Icons

Umbraco 图标

What is it?

什么是自定义图标？

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.
图标是扩展开发者可以注册并在Umbraco后台各处使用的自定义视觉元素。自定义图标通过清单（manifest）进行注册，之后可在任何支持icon属性的扩展中使用。图标被定义为从JavaScript模块导出的SVG内容。

Documentation

文档参考

Always fetch the latest docs before implementing:
在实现前请务必获取最新文档：

Reference Example

参考示例

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.
Umbraco源码中包含一个可用示例：
位置：
/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/icons/
该示例演示了如何注册和使用自定义SVG图标。请参考此示例以遵循生产环境的实现规范。

Workflow

实现流程

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What icons needed? SVG source available?
  3. Generate files - Create manifest + icon files based on latest docs
  4. Explain - Show what was created and how to use the icons
  1. 获取文档 - 使用WebFetch获取上述链接的文档
  2. 需求确认 - 确定需要哪些图标？是否有可用的SVG源文件？
  3. 生成文件 - 根据最新文档创建清单文件和图标文件
  4. 说明文档 - 展示创建的内容以及如何使用这些图标

Minimal Examples

最简示例

Manifest (umbraco-package.json)

清单文件 (umbraco-package.json)

json
{
  "name": "My Icons Package",
  "extensions": [
    {
      "type": "icons",
      "alias": "My.Icons",
      "name": "My Custom Icons",
      "js": "/App_Plugins/MyPackage/icons.js"
    }
  ]
}
json
{
  "name": "My Icons Package",
  "extensions": [
    {
      "type": "icons",
      "alias": "My.Icons",
      "name": "My Custom Icons",
      "js": "/App_Plugins/MyPackage/icons.js"
    }
  ]
}

Icons Registry (icons.ts)

图标注册表 (icons.ts)

typescript
export default [
  {
    name: 'my-custom-icon',
    path: () => import('./icons/my-custom-icon.js'),
  },
  {
    name: 'my-other-icon',
    path: () => import('./icons/my-other-icon.js'),
  },
];
typescript
export default [
  {
    name: 'my-custom-icon',
    path: () => import('./icons/my-custom-icon.js'),
  },
  {
    name: 'my-other-icon',
    path: () => import('./icons/my-other-icon.js'),
  },
];

Icon File (icons/my-custom-icon.ts)

图标文件 (icons/my-custom-icon.ts)

typescript
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>`;
typescript
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>`;

Using Custom Icons

使用自定义图标

typescript
// 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
  },
};
typescript
// 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
  },
};

In HTML Templates

在HTML模板中使用

html
<umb-icon name="my-custom-icon"></umb-icon>
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
html
<umb-icon name="my-custom-icon"></umb-icon>
就是这样！请始终获取最新文档，保持示例简洁，生成完整可运行的代码。