SuperAPI AI 工具集

kendo-angular-icon

前端与建站

查看项目

更新于 10-16 07:42

技能介绍

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 与文档的开发者。

限制

该工具主要围绕图标检索与组件使用说明。关于收费、价格、平台支持范围、性能效果等信息,资料中暂未提供。