如何将 Font Awesome IconDefinition 转换为 Kendo UI SVGIcon

Question

Kendo UI 最近刚刚在其小部件中默认使用 SVG 图标（link），但他们对 icons 的选择不是很好。我想使用 FontAwesome 图标代替，但它们有不同的变量类型。我该怎么做？

• Kendo UI 图标组件
• Font Awesome 图标定义

Answer 1

我联系了 Telerik 的支持，他们帮助了我：

我的代码

import { SVGIcon } from '@progress/kendo-svg-icons';

import { faHouse } from '@fortawesome/pro-regular-svg-icons';

public faHouse: SVGIcon = {
    name: faHouse.iconName,
    content: `<path d="${faHouse.icon[4]}" />`,
    viewBox: `0 0 ${faHouse.icon[0]} ${faHouse.icon[1]}`,
};

他们的 Stackblitz 演示。

Answer 2

我们使用 fontawesome 功能将

IconDefinition

转换为

SVGIcon

并将所有内容包装在管道中。这也尊重多个 SVG 路径（如双色调图标）。

import { Pipe, PipeTransform } from '@angular/core';
import { IconDefinition } from '@fortawesome/fontawesome-common-types';
import { icon } from '@fortawesome/fontawesome-svg-core';
import { SVGIcon } from '@progress/kendo-svg-icons';
import _ from 'lodash';

@Pipe({
   name: 'faIconToKendoSvgIcon',
})
export class FaIconToKendoSvgIconPipe implements PipeTransform {
   constructor() {}

   transform(faIcon: IconDefinition): SVGIcon {
      const i = icon(faIcon);

      return {
         name: i.iconName,
         content: _(i.html).join(''),
         viewBox: `0 0 ${faIcon.icon[0]} ${faIcon.icon[1]}`,
      };
   }
}