Kendo UI for Angular 图标助手
用途
该工具用于在 Kendo UI for Angular 的图标库中检索图标。当用户需要为某个操作、概念或界面元素寻找图标,或咨询图标相关问题时,可通过它按名称、用途或关键词进行搜索,从而快速定位可用图标。
主要能力
核心是 kendo_icon_assistant 这一 MCP 工具,支持按查询语句检索图标,并可通过 limit 参数控制返回数量。资料给出的示例调用包括:
- 查询“save document”,limit=0.3
- 查询“user profile avatar account”,limit=0.3
- 查询“navigation arrow chevron”,limit=0.5
调用形式:
kendo_icon_assistant({
query="<Description of the icon purpose or keyword>",
limit=0.3 // Adjust based on expected count: 0.1 for ~1 icon, 0.3 for a few icons, 1.0 for many
})
使用方式
SVG 图标(推荐)
优先使用 SVG 图标而非字体图标。需确保安装所需包:
npm install @progress/kendo-svg-icons @progress/kendo-angular-icons
然后使用 kendo-svg-icon 组件,并从 @progress/kendo-angular-icons 引入 KENDO_ICONS:
import { Component } from "@angular/core";
import { KENDO_ICONS } from "@progress/kendo-angular-icons";
import { paperclipIcon } from "@progress/kendo-svg-icons";
@Component({
selector: "my-app",
standalone: true,
imports: [KENDO_ICONS],
template: `
<kendo-svg-icon [icon]="icons.paperclip"></kendo-svg-icon>
`,
})
export class AppComponent {
public icons = { paperclip: paperclipIcon };
}
还可调用 kendo_component_assistant 获取 SVGIcon 组件的完整 API 参考与文档:
kendo_component_assistant({
query="How to use the SVGIcon component with custom icons and size options?",
component="SVGIcon"
})
字体图标(回退方案)
若无法使用 SVG,则使用字体图标。需在 index.html 中添加字体图标样式表:
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
然后使用 kendo-icon 组件,同样从 @progress/kendo-angular-icons 引入 KENDO_ICONS:
import { Component } from "@angular/core";
import { KENDO_ICONS } from "@progress/kendo-angular-icons";
@Component({
selector: "my-app",
standalone: true,
imports: [KENDO_ICONS],
template: `
<kendo-icon name="paperclip"></kendo-icon>
`,
})
export class AppComponent {}
可调用 kendo_component_assistant 获取 Icon 组件的完整 API 参考与文档:
kendo_component_assistant({
query="How to use the Icon component with font icons?",
component="Icon"
})
适用场景
适用于 Angular 项目中需要为按钮、导航、用户信息、文件操作等界面元素挑选图标的场景,也适用于需要查阅 Kendo UI for Angular 图标组件 API 与文档的开发者。
限制
该工具主要围绕图标检索与组件使用说明。关于收费、价格、平台支持范围、性能效果等信息,资料中暂未提供。