在Nuxt项目中引入fontawesome

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

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

安装

Yarn:

1
2
3
4
5
6
7
// 套件
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:

1
2
3
4
5
6
7
// 套件
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,放入以下内容:

    1
    2
    3
    4
    5
    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部分分别添加如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    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版本,则是这样:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /*
    ** 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 为例:

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

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

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

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

OK!

更多使用参考Nuxt Font Awesome

参考

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

Nuxt Font Awesome