在使用ember字体时，我该如何操作图层文本呢？

Question

我正在使用official ember font-awesome library，并尝试使用以下代码向图标添加一些文本：

  <span class="fa-layers fa-lg">
    <FaIcon @icon="circle" @size="3x" />
    <span class="fa-layers-text  fa-inverse" data-fa-transform="shrink-8">
      27
    </span>
  </span>

从我在documentation examples上看到的应该可以工作，但data-fa-transform属性中的值没有产生任何更改。

因为FA现在使用SVG，所以我需要使用不同的方法吗？

Answer 1

Ember Fontawesome只处理将<FaIcon>组件转换为SVG图标。您的示例不起作用的原因是因为fontawesome没有对<span>标记做任何事情。为了得到你想要的行为，你需要告诉fontawesome关于这个元素的信息。

要做到这一点，您需要使用@ember/render-modifiers中的dom-i2svg方法，并使用your将其传递给您的元素。

// app/components/layer-icon.js
import Component from '@glimmer/component';
import { dom } from '@fortawesome/fontawesome-svg-core';
import { next } from '@ember/runloop';

export default class LayerIconComponent extends Component {
  scanDom(element) {
    next(() => {
      dom.i2svg({node: element});
    });
  }
}

//app/components/layer-icon.hbs
<span class="fa-layers fa-lg" {{did-insert this.scanDom}}>
  <FaIcon @icon="circle" @size="3x" />
  <span class="fa-layers-text  fa-inverse" data-fa-transform="shrink-8">
    27
  </span>
</span>