Как изменить icon (). Abstract.children [0] .atributes из API fontawesome-svg-core? - PullRequest
Новая
       13

Как изменить icon (). Abstract.children [0] .atributes из API fontawesome-svg-core?

1 голос
/ 07 мая 2019

Проблема:

Метод icon () из API fontawesome-svg-core устанавливает некоторые свойства по умолчанию для дочерних элементов SVG, которые мне нужно изменить.

Что я хочу сделать:

Метод icon () генерирует объект со свойством html. Это свойство содержит (внутри массива) строку с тегом SVG, которую можно использовать внутри некоторого html.

следующий код 

const { icon } = require('@fortawesome/fontawesome-svg-core');
const { faVenusMars } = require('@fortawesome/free-solid-svg-icons');

icon(faVenusMars, { 
    classes: ['fa-2x']
}).html;

сгенерирует следующий html: 

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="venus-mars" class="svg-inline--fa fa-venus-mars fa-w-18 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
  <path fill="currentColor" d="M564 0h-79c-10.7 ..."></path>
</svg>

Я хочу избавиться от свойства fill="currentColor" тега 'path' и вместо этого добавить свойство "fill-rule": "evenodd".

Что я пробовал:

Я вижу свойство, которое мне нужно изменить, с помощью свойства icon(...).abstract: 

[
  {
    "tag": "svg",
    "attributes": {...},
    "children": [
      {
        "tag": "path",
        "attributes": {
          "fill": "currentColor", //  <-- I want to change this!
          "d": "M96…112z"
        }
      }
    ]
  }
]

Я пытался изменить это свойство напрямую, но, похоже, оно не работает. Итак:

  • Есть ли другой метод, кроме icon (), который мне следует использовать?
  • Есть ли какая-нибудь конфигурация в API для предотвращения добавления свойства fill?
  • Есть что-то еще, что я скучаю?

1 Ответ

0 голосов
/ 07 мая 2019

Я нашел решение.Не уверен, что это лучший, но это работает.Я использую метод toHtml : 

const setIcon = (iconRef, config={}) => {
    let myAbstract = icon(iconRef, config).abstract[0];

    myAbstract.children = myAbstract.children.map(child => {

        delete child.attributes.fill;
        child.attributes["fill-rule"] = "evenodd";
        return child;
    });

    let html = toHtml(myAbstract);

    return html;
};

Надеюсь, это когда-нибудь кому-нибудь поможет (может быть, в будущем ...)

...