在Nuxt项目中引入fontawesome

在nuxt中引入fontawesome的方法跟引入其他外部库基本一样,因为初次接触nuxt,所以引入fontawesome时,参考网上的各种vue fontaswesome的文章,一直无法显示,踩坑不少,最后才意识到我是要在nuxt里面引入啊。

记录下最后的解决方法,没准能给同我一般的nuxt小白节省点时间。

安装

Yarn:

// 套件
yarn add nuxt-fontawesome

// package,不收费
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

Npm:

// 套件
npm i nuxt-fontawesome

// package,不收费
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-brands-svg-icons

备:Nuxt Font Awesome 中使用了官方提供的 vue-fontawesome

配置

  • 新建plugin

    在plugins目录下,新建文件:font-awesome.js,放入以下内容:

    import Vue from 'vue'
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
    
    Vue.component('font-awesome-icon', FontAwesomeIcon)
    Vue.config.productionTip = false
    

    这里,引入了FontAwesomeIcon,同时通过Vue.component,生成可供使用的组件,组件的标签为font-awesome-icon。Vue.config.productionTip设置为false,表示关闭生产模式下给出的提示。

  • 配置nuxt.config.js

    nuxt.config.js文件中,在plugins,module部分分别添加如下代码:

    plugins: [
      'xxxx',
       // 引入我们刚刚新增的文件font-awesome.js
      '~/plugins/font-awesome'
    ]
    
    .....
    
    modules: [
      'xxxxx',
       // 引入我们新增的套件nuxt-fontawesome
       'nuxt-fontawesome'
    ]
    
    ....
     /*
      ** FontAwesome module configuration 配置FontAwesome
      */
      fontawesome: {
        // See https://github.com/vaso2/nuxt-fontawesome
        // 这里设置了组建的标签为fa
        // 如果不设置,则默认为在font-awesome.js中,生成的:font-awesome-icon
        component: 'fa',
        imports: [
          {
            set: '@fortawesome/free-solid-svg-icons',
            icons: ['fas']
          },
          {
            set: '@fortawesome/free-regular-svg-icons',
            icons: ['far']
          },
          {
            set: '@fortawesome/free-brands-svg-icons',
            icons: ['fab']
          }
        ]
      },
    .......
    

    这里,把三个免费的package都添加进来了。如果需要添加收费的pro版本,则是这样:

     /*
      ** FontAwesome module configuration
      */
      fontawesome: {
        // See https://github.com/vaso2/nuxt-fontawesome
        component: 'fa',
        imports: [
          {
            set: '@fortawesome/pro-regular-svg-icons',
            icons: ['faAdjust']
          }
        ]
      }
    

    [当然,这里set的库,都是之前通过npm / yarn 已经安装过的 ,具体参考:Nuxt Font Awesome]

使用

设定完成,就可以使用了,以一个简单的fontawesome icon 为例:

<i class="fas fa-music"></i>

在vue页面中引用上述music的icon时,这样写:

### 如果设置中,额外设置了component: 'fa':
<fa :icon="['fas', 'music']" />

### 如果没有设置component
<font-awesome-icon :icon="['fas', 'music']" />

OK!

更多使用参考Nuxt Font Awesome

参考

推荐: 【Nuxt教學】實作引用 Fontawesome 5 到Nuxt專案

Nuxt Font Awesome