vue3使用font-awesome

在Vue 3中使用Font Awesome可以为你提供一套图标库，你可以很方便地在项目中使用这些图标。以下是集成和使用Font Awesome的步骤：

• 环境：vue3、ts,其实这里使用js和ts感觉都差不多

1. 安装 Font Awesome
   首先，你需要安装Font Awesome。这可以通过npm或yarn来完成：

   
   npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome
   
   # 或者
   yarn add @fortawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome
   

2. 引入 Font Awesome 图标库
   在你的Vue项目中，你需要在主文件（如main.js或main.ts）中引入Font Awesome的图标库：

   // main.ts
   import { createApp } from 'vue';
   import { library } from '@fortawesome/fontawesome-svg-core';
   import { faUser, faLock } from '@fortawesome/free-solid-svg-icons';
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
   
   library.add(faUser, faLock); // 添加你需要的图标,这里是局部使用图表
   
   export default { // 方法一
     // ...
     components: {
       FontAwesomeIcon
     }
   };
   // 或者方法2
   const app = createApp(App);
   app.component('FontAwesomeIcon', FontAwesomeIcon);// 全局组件的形式，不要使用app.use引入插件的形式引入啊，这里需要已全局组件的方式引入才不会导致ts报错
   

   这里，faUser和faLock是示例图标，你可以添加你需要使用的任何图标。

3. 在组件中使用 Font Awesome 图标
   现在，你可以在你的Vue组件中使用FontAwesomeIcon组件来显示图标：

   <template>
     <div>
       <FontAwesomeIcon icon="user" />
       <FontAwesomeIcon icon="lock" />
       <!-- 或者使用具名图标 -->
       <FontAwesomeIcon :icon="['fas', 'user']" />
       <FontAwesomeIcon :icon="['fas', 'lock']" />
     </div>
   </template>
   

   在上面的例子中，你可以直接使用图标的名称，也可以使用一个数组来指定图标的前缀（通常是fas，代表solid风格）和图标的名称。

4. 使用不同样式的图标
   Font Awesome 提供了多种图标样式，包括solid、regular、light等。你可以通过修改icon属性的第二个元素来使用不同样式的图标：

   <template>
     <div>
       <FontAwesomeIcon :icon="['fas', 'user']" /> <!-- solid style -->
       <FontAwesomeIcon :icon="['far', 'user']" /> <!-- regular style -->
       <FontAwesomeIcon :icon="['fal', 'user']" /> <!-- light style -->
     </div>
   </template>
   

   确保你引入了你打算使用的样式的图标库。例如，如果你要使用regular样式的图标，你需要引入对应的图标库：

   import { faUser as faUserRegular } from '@fortawesome/free-regular-svg-icons';
   library.add(faUserRegular);
   

以上步骤应该能够帮助你在Vue 3项目中使用Font Awesome。记得查看Font Awesome的官方文档，了解更多的定制和使用选项。