Wondering what’s next for npm?Check out our public roadmap! »

    nuxt-fontawesome

    0.4.0 • Public • Published

    Nuxt Font Awesome 5

    npm (scoped with tag) npm

    Plugin to join nuxt and Font Awesome 5 icons using official vue-fontawesome plugin. Supports ES6 imports with tree shaking and fix of initial load flickering

    Setup

    • Add dependencies using npm to your project
      npm i nuxt-fontawesome
      Also it may be needed to explicitly install fontawesome, if your webpack build fails
      npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

    • Configure nuxt.config.js:

      • Add nuxt-fontawesome to modules section
      • Configure loaded icons/whole sets
    • See more details about usage below

    {
      modules: [
        'nuxt-fontawesome',
        //OR like this
        ['nuxt-fontawesome', {
          component: 'fa', 
          imports: [
            //import whole set
            {
              set: '@fortawesome/free-solid-svg-icons',
              icons: ['fas']
            },
            //import 2 icons from set 
            // please note this is PRO set in this example, 
            // you must have it in your node_modules to actually import
            {
              set: '@fortawesome/pro-regular-svg-icons',
              icons: ['faAdjust', 'faArchive']
            }
          ]
        }]
      ],
      //alternative place for config
      fontawesome: {
        imports: [
          ...
        ]
      }
    }

    Module options

    component

    Change component name. For example, fa to use like <fa ... />

    • Default: font-awesome-icon

    imports

    Import icons/whole sets from chosen packages

    • Default: [], no icons will be imported here (see below, can be loaded later inside .vue file)
      • set - path to node package for import, like @fortawesome/free-solid-svg-icons
      • icons - array of icons to import ['faAdjust', 'faArchive'].

    Usage

    You can find more details under example folder. Also please see vue-fontawesome for additional reference

    • Add needed dependency, like
      npm i @fortawesome/free-solid-svg-icons
    • Add configuration like this in nuxt.config.js

    Component names by default:

    • <font-awesome-icon>
    • <font-awesome-layers>
    • <font-awesome-layers-text>

    With component option set, -layers and -layers-text suffixes will be appended (see example below)

    {
      fontawesome: {
        imports: [
            {
              set: '@fortawesome/pro-regular-svg-icons',
              icons: ['faAdjust']
            },
            {
              set: '@fortawesome/free-solid-svg-icons',
              icons: ['fas']
            },
        ],
      },
    }

    Then use

    <template>
        <div>
          <font-awesome-icon :icon="['fas', 'adjust']"  />
          <font-awesome-icon icon="dollar-sign"  style="font-size: 30px"/>
          <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>
    • Load and use directly in template. Component name changed in nuxt.config.js to fa
    fontawesome: {
      component: 'fa'
    },
    <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
          },
          faGithub () {
             return faGithub
          }
        },
      }
    </script>

    License

    MIT, made by Galley Web Development

    Install

    npm i nuxt-fontawesome

    DownloadsWeekly Downloads

    14,115

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    9.03 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar