在Vue 3中使用令人敬畏的字体

本教程将介绍在Vue 3中使用令人敬畏的字体的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

在Vue 3中使用令人敬畏的字体 教程 第1张

问题描述

我正在尝试对Vue 3使用Font Awesom。

我的package.json

"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/vue-fontawesome": "^3.0.0-3",
}

导入main.js中的FontAwese

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons/faAddressBook";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faPhone);

/* eslint-disable */
createApp(App)
  .use(store)
  .use(router)
 .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app")

<template>中的此内部组件

 <font-awesome-icon :icon="['fas', 'faPhone']" />

但是当我在组件中使用它时,没有发生任何事情.in元素是doent的呈现内容,它只显示HTML注释
<!---->
怎么解决此问题并开始在任何组件中使用FontAwese?

推荐答案

这些步骤让它为我工作:

    安装prelease(3.0.0-4),vue-fontawesome兼容Vue 3,图标依赖:

    npm i --save @fortawesome/vue-fontawesome@prerelease
    npm i --save @fortawesome/fontawesome-svg-core
    npm i --save @fortawesome/free-solid-svg-icons
    

    main.js中,从@fortawesome/free-solid-svg-icons中选择要加载的图标:

    import { library } from "@fortawesome/fontawesome-svg-core";
    import { faPhone } from "@fortawesome/free-solid-svg-icons";
    
    library.add(faPhone);
    

    全局注册font-awesome-icon组件:

    import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
    
    createApp(App)
      .component("font-awesome-icon", FontAwesomeIcon)
      .mount("#app");
    

    src/App.vue中,使用如下组件(注意图标名称是phone,而不是faPhone):

    <!-- explicit style -->
    <font-awesome-icon :icon="['fas', 'phone']" />
    
    <!-- implicit style (fas is assumed) -->
    <font-awesome-icon icon="phone" />
    

demo

好了关于在Vue 3中使用令人敬畏的字体的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。