Как мне манипулировать текстом слоя при использовании ember font-awesome? - PullRequest
Новая
       2

Как мне манипулировать текстом слоя при использовании ember font-awesome?

1 голос
/ 16 января 2020

Я использую официальную библиотеку ember font-awesome и пытаюсь добавить текст к значку со следующим кодом: 

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

Из того, что я могу см. примеры документации , которые должны работать, но никакое значение в атрибуте data-fa-transform не приводит к каким-либо изменениям.

Есть ли другой метод, который мне нужно использовать, поскольку FA теперь использует SVG?

1 Ответ

2 голосов
/ 16 января 2020

Ember Fontawesome только обрабатывает превращение <FaIcon> компонентов в иконки SVG. Причина, по которой ваш пример не работает, в том, что fontawesome ничего не делает с тегом <span>. Вам нужно сообщить fontawesome об этом элементе, чтобы получить искомое поведение.

Для этого вам нужно использовать метод dom-i2svg из fontawesome и передать его. ваш элемент, используя @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>
...