Как использовать иконки unicode в vue-fortawesome?

Question

[mrFlyer]

Привет.

Есть Vue FontАwesome. Нужно в определенных ситуация отобразить без компонента по unicode.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faLocationCrosshairs } from '@fortawesome/free-solid-svg-icons';

library.add(faLocationCrosshairs);

createApp(App).component('FontAwesomeIcon', FontAwesomeIcon).mount('#app');

App.js

<template>
   <i class="fa-solid">&#xf05b;</i>
</template>

Результат отображает не найденный символ...

Что то забыл?

Сама иконка:
https://fontawesome.com/icons/location-crosshairs?...

Answer 1

[Антон Антон]

советую прочитать инструкцию https://docs.fontawesome.com/web/use-with/vue (там слева несоклько разделов) и отказаться от i совсем в пользу их компонента. в итоге получится что-то типа
<fa-icon :icon="faLocationCrosshairs" />
(да, компонент можно переименовать, для удобства, по дефолту font-awesome-icon )

а вообще достаточно подключить css со шрифтом (не увидел этого в вопросе, только svg, в примере использую https://cdnjs.cloudflare.com/ajax/libs/font-awesom...) и всё будет работать. скорее всего дело в том, что эта иконка, это не символ  а символ 
https://codepen.io/FragsterAt/pen/qEbjPvm

Comments

[mrFlyer]

Да, в том то и дело, мне нужен именно уникод. Мне иконки нужны для меток на карте через API. Туда компонент не впихнуть...

[Антон Антон]

mrFlyer, для меток на карте проще всего взять svg. кстати, в некоторые карты вполне себе компоненты впихиваются, вот кусок из приложения, использующего "vue-yandex-maps": "^2.1.3":

<yandex-map
      v-model="map"
      class="!absolute top-0 !h-screen"
      :settings="{
        location: {
          ...location,
          duration: 500,
        },
      }">
      <yandex-map-default-scheme-layer />
      <yandex-map-default-features-layer />
      <yandex-map-marker
        v-for="(marker, index) in markers"
        :key="index"
        position="top left-center"
        :settings="marker">
        <q-icon
          :color="marker.color"
          :name="`svguse:#${iconPin}`"
          size="60px"
          @click="currentClinic = index" />
      </yandex-map-marker>
    </yandex-map>

[mrFlyer]

Антон Антон, хм, да, через SVG возможно это решение как раз.

Я использую карты через OpenLayer

Конструкция получается такого вида:

import {faLocationCrosshairs} from "@fortawesome/free-solid-svg-icons";

<ol-style-icon :src="'data:image/svg+xml;utf8,'+faLocationCrosshairs" :scale="0.05"></ol-style-icon>

Но передавать туда именно faLocationCrosshairs похоже не корректно, там как это же не сам svg, а его обертка. Судя по содержанию ее, это массив и сам SVG faLocationCrosshairs.icon[4].

Т.е. результате получаем что то типа:

<ol-style-icon :src="'data:image/svg+xml;utf8,<svg width=\'4em\' height=\'4em\' viewBox=\'22 150 400 725\'><path d=\''+faLocationCrosshairs.icon[4]+'\' fill=\'red\'/></svg>'" :scale="0.05"></ol-style-icon>

Но чую уже городить начинаю и не работает такая конструкция...

[Антон Антон]

mrFlyer, для превращения импорта svg в компонент или в плэин текст или в svg спрайт для вставки с use есть несколько решений, например vite-plugin-svg-sprite или vite-svg-loader
импортировать надо прям файл svg

[Антон Антон]

судя по всему может подойти vite-svg-loader с загрузкой в raw строку и перекодированием её в dataurl или vite-plugin-svg-sprite а в качестве dataurl передавать закодированный svg с use нужной иконки из спрайта (наверное может чуть сэкономить памяти)

[Антон Антон]

mrFlyer, там, кстати, внизу ответа есть пример именно через содержимое тега i (хотя чем не устраивает вебфонт через классы - не понятно)

Answer 2

[mrFlyer]

Антон Антон

Хм... вроде получилось отобразить иконку, через костыль получается.
Но вот в OpenLayer не показывает ее почему то.

https://codesandbox.io/p/devbox/8nt75n?file=%2Fsrc...

Update Вроде получилось!

<ol-style-text :text="String.fromCodePoint(0xf05b)" font="900 18px 'Font Awesome 7 Free'"></ol-style-text>