如何在 svg 中以角度导入字体真棒图标？答案

【问题标题】：How to import a font-awesome icon inside an svg in angular?如何在 svg 中以角度导入字体真棒图标？
【发布时间】：2021-09-17 09:52:30
【问题描述】：

我可以在 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 中嵌入并查看字体很棒的图标？

【问题讨论】：

你是否创建了 faSkullCrossbones 的变量？
@MohammadDaliri 是的。就像引用文档中的 faCoffee 一样。

标签： angular font-awesome angular-fontawesome

【解决方案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>

【讨论】：

嵌套 SVG 是有效标记 sarasoueidan.com/blog/mimic-relative-positioning-in-svg
@JHeth 啊，不知道！感谢您的链接。我已从答案中删除了不正确的陈述。
很好，这意味着我也可以在 JS 中使用它；）
在基于我的问题输出的旁注中，viewBox 应该是 ~viewBox="0 0 448 512"，否则你会得到一个意外的小图像。
viewBox 的宽度和高度在faSkullCrossbones.icon[0] 和faSkullCrossbones.icon[1] 中找到