@nuxtjs/fontawesome
模块在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 } } ] ]
模块选项
component
- 默认值：
FontAwesomeIcon
更改组件名称。例如，将其设置为fa以使用<fa icon="" ... /> 。另请参见后缀
强烈建议将pascalcase用于组件名称
useLayers
- 默认值：
true
布尔值指示是否应全球注册层组件。组件的名称为${options.component}-layers ，fe <fa-layers ... />
useLayersText
- 默认值：
true
布尔值指示是否应全球注册层组件。组件的名称为${options.component}-layers-text ，fe <fa-layers-text ... />
icons
您将使用哪些图标。 Fontawesome目前支持5个图标样式，其中3个是免费的（部分）。
此选项是带有样式名称为属性的对象，并且一个带有您希望从这些样式中使用的所有图标名称的数组
icons: { solid : [ \'faHome\' , ... ] , regular : [ ... ] , light : [ ... ] , duotone : [ ... ] , brands : [ ... ] }
尽管不建议您使用true来包括完整的图标集：
icons: { solid : true }
proIcons
有关如何使用的图标，请参阅icons ，但始终使用Pro Imports。
addCss
- 默认值：
true
如果该模块应自动将Fontawesome样式添加到全局CSS配置中。它通过将@fortawesome/fontawesome-svg-core/styles.css取消变成 @nuxt.options.css属性来起作用。
suffix
- 默认值：
false
布尔值是否将-icon附加到图标组件名称。此选项存在是因为组件名称选项也用于图层组件，并且您可能不想将“ -icon”添加到这些组件
// config component: \'Fa\' , suffix : true // usage < fa - icon / > < fa-layer />
// config component: \'FaIcon\' , suffix : false // usage < fa - icon / > < fa-icon-layers />
imports弃用
从所选软件包导入图标/整个集合。这是旧配置，可能会在将来的版本中删除。改用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
默认组件名称是：
-
<font-awesome-icon> -
<font-awesome-layers> -
<font-awesome-layers-text>
使用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 >
- 使用本地导入的图标
< template > < div > < fa-layers full-width class = \" fa-4x \" > < fa :icon = \" fas.faCircle \" /> < fa-layers-text transform = \" shrink-12 \" value = \" GALSD \" class = \" fa-inverse \" /> </ fa-layers > < fa :icon = \" fas.faAddressBook \" /> < fa :icon = \" faGithub \" /> </ div > </ template > < script > import { fas } from \' @fortawesome/free-solid-svg-icons \' import { faGithub } from \' @fortawesome/free-brands-svg-icons \' export default { computed : { fas () { return fas // NOT RECOMMENDED }, faGithub () { return faGithub } }, } </ script >
集成
故事书
如果您是Storybook的粉丝，这可能对您来说很有趣，那么该模块提供了一个故事，可以列出和搜索项目的可用图标。您可以在stories目录中看到故事。如果您正在使用@nuxtjs/storybook则可以在故事书中的Modules部分下看到Fontawesome的故事。默认情况下，“真棒故事”将在您的故事书中显示，您可以使用Storybook的modules选项禁用/隐藏故事
执照
麻省理工学院许可证
该模块是从Galley Web开发创建的（字体）真棒模块分配的
版权（C）NUXT社区
