未找到文档指引：如何在GoJS中使用angular-fontawesome SVG图标？

AI 小北

2026-7-4

在GoJS画布中使用angular-fontawesome的SVG图标

angular-fontawesome本质是对Font Awesome图标的Angular封装，要在GoJS里用这些图标，核心是获取到图标的SVG代码，再传递给GoJS渲染，下面是两种实用方法：

方法一：直接获取原始SVG代码

因为angular-fontawesome的图标全部来自Font Awesome，你可以直接拿到对应图标的原生SVG：

确认你要使用的图标名称（比如组件里的faUser对应Font Awesome的user图标）
复制该图标的完整SVG代码
在GoJS中通过go.Picture加载：将SVG代码转成Data URL，作为source传入，示例：

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">...</svg>'; // 替换成目标图标SVG
const dataUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(svgString);

myDiagram.nodeTemplate = new go.Node("Auto")
  .add(new go.Picture({ width: 24, height: 24, source: dataUrl }));

方法二：通过angular-fontawesome底层库提取SVG

利用angular-fontawesome依赖的@fortawesome/fontawesome-svg-core库，在Angular代码中直接生成SVG字符串：

导入依赖并注册图标：

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faUser, faEdit } from '@fortawesome/free-solid-svg-icons';

// 把需要的图标添加到库
library.add(faUser, faEdit);

生成目标图标的SVG字符串：

// 生成SVG节点
const svgNode = dom.icon(faUser).node;
// 序列化为字符串
const svgString = new XMLSerializer().serializeToString(svgNode);

传递给GoJS渲染：
把生成的svgString存入GoJS模型数据，在模板中动态生成Data URL：

// 假设模型数据里包含svgString字段
myDiagram.nodeTemplate = new go.Node("Auto")
  .add(new go.Picture({
    width: 24,
    height: 24,
    source: (data) => 'data:image/svg+xml;utf8,' + encodeURIComponent(data.svgString)
  }));