我如何将图标导入Laravel＆＃x2B; vue.js

Question

最近，我遇到了将Fontawesome Icons进口到Laravel的Vue.js的问题。这样，我可以从教程中导入旋转器图标。但是，如何获得其他此类图标的名称或以另一种更简单的方式导入它们？

app.js：

require('./bootstrap');


import { createApp } from 'vue'


import Home from './components/Home.vue';
import Offers from './components/Offers.vue';

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faSpinner } from "@fortawesome/free-solid-svg-icons";

const app=createApp({});

app.component('home',Home);
app.component('offers',Offers);
app.component("font-awesome-icon", FontAwesomeIcon);
library.add(faSpinner);

app.mount('#app');

vue组件：

<font-awesome-icon 
   icon="spinner" 
   size="3x" 
   spin fixed-width>
 </font-awesome-icon>

Answer 1

这些方向在这里找到：。

import Vue from 'vue'
import App from './App'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* add icons to the library */
library.add(faUserSecret)

/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

---

<template>
  <div id="app">
    <!-- Add the style and icon you want -->
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>