angular - 如何以 Angular 方式在 svg 中导入字体很棒的图标？

Question

我可以在 Angular 中嵌入一个字体很棒的图标。如文档中所述:https://www.npmjs.com/package/@fortawesome/angular-fontawesome 。这有效。

home.component.html

<fa-icon [icon]="faSkullCrossbones"></fa-icon>

一旦我在 svg 中嵌入了一个很棒的字体图标，该图标就不会出现。它确实存在于 DOM 中。我的代码编辑器(VS-code)将 fa-icon 标记为红色。

home.component.html

<svg viewBox='0 0 1000 1000' xmlns="http://www.w3.org/2000/svg">
  <fa-icon [icon]="faSkullCrossbones"></fa-icon>
</svg>

html 输出

<svg _ngcontent-nwq-c23="" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <fa-icon _ngcontent-nwq-c23="" class="ng-fa-icon" style="color: white;" ng-reflect-icon="[object Object]">
    <svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="skull-crossbones" class="svg-inline--fa fa-skull-crossbones fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path fill="currentColor" d="M439.15 453.06L297.17 384l141.99-69.06c7.9-3.95 11.11-13.56 7.15-21.46L432 264.85c-3.95-7.9-13.56-11.11-21.47-7.16L224 348.41 37.47 257.69c-7.9-3.95-17.51-.75-21.47 7.16L1.69 293.48c-3.95 7.9-.75 17.51 7.15 21.46L150.83 384 8.85 453.06c-7.9 3.95-11.11 13.56-7.15 21.47l14.31 28.63c3.95 7.9 13.56 11.11 21.47 7.15L224 419.59l186.53 90.72c7.9 3.95 17.51.75 21.47-7.15l14.31-28.63c3.95-7.91.74-17.52-7.16-21.47zM150 237.28l-5.48 25.87c-2.67 12.62 5.42 24.85 16.45 24.85h126.08c11.03 0 19.12-12.23 16.45-24.85l-5.5-25.87c41.78-22.41 70-62.75 70-109.28C368 57.31 303.53 0 224 0S80 57.31 80 128c0 46.53 28.22 86.87 70 109.28zM280 112c17.65 0 32 14.35 32 32s-14.35 32-32 32-32-14.35-32-32 14.35-32 32-32zm-112 0c17.65 0 32 14.35 32 32s-14.35 32-32 32-32-14.35-32-32 14.35-32 32-32z"></path>
    </svg>
  </fa-icon>
</svg>

我应该如何在 svg 中嵌入并查看字体很棒的图标？

Answer 1

很难给出完美的答案，因为这取决于您到底想要实现什么目标。

一种方法是完全避免 fa-icon 组件，并将图标路径手动渲染为您自己的 SVG 对象的一部分。

<svg viewBox='0 0 1000 1000' xmlns="http://www.w3.org/2000/svg">
  <path [attr.d]="faSkullCrossbones.icon[4]"></path>
</svg>

另一种方法是将 fa-icon 渲染到 SVG 的 symbol 中然后将其嵌入 use .

<fa-icon [icon]="faSkullCrossbones" symbol="foobar"></fa-icon>

<svg viewBox='0 0 1000 1000' xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="#foobar" />
</svg>