Font Awesome — программное изменение значков SVG.

Font Awesome — самая известная библиотека иконок для веб-разработки. SVG — хороший вариант для рендеринга значков, когда вы используете только несколько значков.

Работая над статьей Custom Event с RxJS, я узнал, что Font Awesome заменяет тег значка на SVG при рендеринге, что затрудняет изменение значка.

Это,

изменяет это,

  .  .

На заметку:

точка — это настраиваемый класс. Font Awesome сделал этот пользовательский класс одним из классов визуализированного SVG. Этот механизм полезен для таргетинга на SVG.
far стал префиксом data-prefix SVG.
круг превратился в значок данных .

Техника

Получение SVG через class / id , который добавляется в тег значка.
Измените data-prefix или data- icon в соответствии с вашими требованиями. .

//1.  Получить SVGlet dot = document.querySelector ('. Dot')//2. Изменить префикс данных или значок данных icon = dot.getAttribute ('data-prefix') === 'far'?  'fas': 'far'dot.setAttribute (' data-prefix ', icon)