umbraco-icons

Umbraco アイコン

これは何ですか？

アイコンは、拡張機能の作者が Umbraco バックオフィス全体で使用するために登録できるカスタムの視覚的要素です。カスタムアイコンはマニフェストを通じて登録され、その後、アイコンプロパティを受け入れるあらゆる拡張機能で使用できます。アイコンは、JavaScript モジュールからエクスポートされた SVG コンテンツとして定義されます。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/icons
• 基盤: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 拡張機能レジストリ: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry

リファレンス例

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>

以上です！ 常に最新のドキュメントを取得し、例を最小限に保ち、完全に動作するコードを生成してください。