使用 ember font-awesome 时如何操作图层文本？

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 才能获得您正在寻找的行为。

做那个你需要使用dom-i2svg method from fontawesome and pass it your element using @ember/render-modifiers。

// 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>

使用 ember font-awesome 时如何操作图层文本？

How do I manipulate layer text when using ember font-awesome?

ember.js

font-awesome