fontawesome module

模块在nuxt.js项目中使用字体很棒的图标。在引擎盖下使用vue-fondawesome

发行说明

• 使用NPM添加依赖性

$ yarn add @nuxtjs/fontawesome -D

// or to also add the free icon packs

$ yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D

• 在您的nuxt.config中添加@nuxtjs/fontawesome到buildModules
• 配置加载图标/整个集合

使用“ fontawesome”密钥：

  // nuxt.config.js
  buildModules: [
    '@nuxtjs/fontawesome' ,
  ] ,

  fontawesome : {
    icons : {
      solid : [ 'faCog' , ... ] ,
      ...
    }
  }
}

或在模块列表中包含选项

  // nuxt.config.js
  buildModules: [
    [ '@nuxtjs/fontawesome' , {
      component : 'fa' ,
      suffix : true ,
      proIcons : { // if you have bought the Pro packages
        // list the icons you want to add, not listed icons will be tree-shaked
        solid : [
          'faHome' ,
          'faHeart'
        ] ,
        // include all icons. But dont do this.
        regular : true
      }
    } ]
  ] 

• 默认值： FontAwesomeIcon

更改组件名称。例如，将其设置为fa以使用 。另请参见后缀

强烈建议将pascalcase用于组件名称

• 默认值： true

布尔值指示是否应全球注册层组件。组件的名称为${options.component}-layers ，fe

• 默认值： true

布尔值指示是否应全球注册层组件。组件的名称为${options.component}-layers-text ，fe

您将使用哪些图标。 Fontawesome目前支持5个图标样式，其中3个是免费的（部分）。

此选项是带有样式名称为属性的对象，并且一个带有您希望从这些样式中使用的所有图标名称的数组

  icons: {
    solid : [ 'faHome' , ... ] ,
    regular : [ ... ] ,
    light : [ ... ] ,
    duotone : [ ... ] ,
    brands : [ ... ]
  }

尽管不建议您使用true来包括完整的图标集：

  icons: {
    solid : true
  }

有关如何使用的图标，请参阅icons ，但始终使用Pro Imports。

• 默认值： true

如果该模块应自动将Fontawesome样式添加到全局CSS配置中。它通过将@fortawesome/fontawesome-svg-core/styles.css取消变成 @nuxt.options.css属性来起作用。

• 默认值： false

布尔值是否将-icon附加到图标组件名称。此选项存在是因为组件名称选项也用于图层组件，并且您可能不想将“ -icon”添加到这些组件

  // config
  component: 'Fa' ,
  suffix : true

  // usage
  < fa - icon / >
  < fa-layer /> 

  // config
  component: 'FaIcon' ,
  suffix : false

  // usage
  < fa - icon / >
  < fa-icon-layers />

从所选软件包导入图标/整个集合。这是旧配置，可能会在将来的版本中删除。改用icons

• 默认值： [] ，这里不会导入任何图标（请参见下文，可以在以后加载.vue文件）
  • set - 导入节点软件包的路径，例如@fortawesome/free-solid-svg-icons
  • icons - 导入的图标数组['faAdjust', 'faArchive'] 。

  imports: [
    {
      set : '@fortawesome/free-solid-svg-icons' ,
      icons : [ 'faHome' ]
    }
  ] 

您可以在example文件夹下找到更多详细信息。另外，请参阅Vue-Fonawesome以获取其他参考

• 确保您已经安装了图标软件包yarn add @fortawesome/free-solid-svg-icons -D
• 并已将模块配置添加到您的nuxt.config.js

默认组件名称是：

使用component选项集，将附加-layers和-layers-text后缀（请参见下图）

  // nuxt.config
  fontawesome : {
    icons : {
      solid : [ 'faHome' ] ,
      regular : [ 'faAdjust' ]
    }
  } ,

• 使用全球图标：

< template >
  < div >
    < font-awesome-icon :icon = " ['fas', 'adjust'] "  />
    < font-awesome-icon icon = " dollar-sign "  style = " font-size : 30 px " />
    < font-awesome-icon icon = " cog " />

    < font-awesome-layers class = " fa-4x " >
      < font-awesome-icon icon = " circle " />
      < font-awesome-icon icon = " check " transform = " shrink-6 " :style = " { color: 'white' } " />
    font-awesome-layers >

    < font-awesome-layers full-width class = " fa-4x " >
      < font-awesome-icon icon = " calendar " />
      < font-awesome-layers-text transform = " shrink-8 down-3 " value = " 27 " class = " fa-inverse " />
    font-awesome-layers >
  div >
template >

< script >script >