图标 Provider

可以使用 YCloudDynamicIcon 组件按名称渲染图标。按名称使用图标前，需要先通过 provideYCloudIcons 注册它。

建议先了解 Angular 依赖注入的工作方式。

注册图标

在应用的 providers 中使用 provideYCloudIcons 注册图标。

app.config.ts

import { ApplicationConfig } from '@angular/core';
import {
  provideYCloudIcons,
  YCloudSquareCheck,
  YCloudCircleAlert,
} from '@ycloud-web/icons-angular';

export const appConfig: ApplicationConfig = {
  providers: [provideYCloudIcons(YCloudSquareCheck, YCloudCircleAlert)],
};

之后就可以通过名称引用已注册的图标：

app.html

<svg ycloudIcon="square-check"></svg> <svg ycloudIcon="circle-alert"></svg>

名称如何解析

每个注册图标都会按图标名称保存。对于内置 YCloud Icons，通常是 kebab-case 格式的图标名称。

例如，注册 YCloudSquareCheck 后，可以这样使用：

<svg ycloudIcon="square-check"></svg>

如果图标定义了别名，这些别名也会自动注册。

注册自定义图标

provideYCloudIcons 也可以注册自定义图标数据对象。

custom-icon.ts

import { YCloudIconData } from '@ycloud-web/icons-angular';

export const MyCustomIcon: YCloudIconData = {
  name: 'my-custom-icon',
  node: [['circle', { cx: 12, cy: 12, r: 8 }]],
};

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideYCloudIcons } from '@ycloud-web/icons-angular';
import { MyCustomIcon } from './custom-icon';

export const appConfig: ApplicationConfig = {
  providers: [provideYCloudIcons(MyCustomIcon)],
};

app.html

<svg ycloudIcon="my-custom-icon"></svg>

使用自定义图标节点

如果你有来自本地来源的自定义图标节点，可以使用 ycloudLegacyIcon 将它们转换为图标数据对象。

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { CirclePlayIcon, provideYCloudIcons, ycloudLegacyIcon } from '@ycloud-web/icons-angular';
import { customIconNode } from './custom-icon';

export const appConfig: ApplicationConfig = {
  providers: [
    provideYCloudIcons(
      ycloudLegacyIcon('circle-play', CirclePlayIcon, ['play-circle']),
      ycloudLegacyIcon('custom-icon', customIconNode, ['custom']),
    ),
  ],
};

之后可以同时使用主名称和任意别名：

app.html

<svg ycloudIcon="circle-play"></svg>
<svg ycloudIcon="play-circle"></svg>
<svg ycloudIcon="custom-icon"></svg>
<svg ycloudIcon="custom"></svg>

转换自定义图标映射

如果已经有一组自定义图标节点映射，可以使用 ycloudLegacyIconMap 将其转换为图标数据对象。

app.config.ts

import { ApplicationConfig } from '@angular/core';
import {
  Circle,
  provideYCloudIcons,
  UserRoundX,
  ycloudLegacyIconMap,
} from '@ycloud-web/icons-angular';
import { customIconNode } from './custom-icon';

export const appConfig: ApplicationConfig = {
  providers: [provideYCloudIcons(Circle, ...ycloudLegacyIconMap({ UserRoundX, customIconNode }))],
};

它会把对象 key 转换为 kebab-case 格式的图标名称：

• UserRoundX → user-round-x
• customIconNode → custom-icon-node

原始对象 key 也会作为别名添加，因此下面两种写法都可以使用：

<svg ycloudIcon="UserRoundX"></svg> <svg ycloudIcon="user-round-x"></svg>