├── .eslintignore
├── renovate.json
├── .gitignore
├── jest.config.js
├── .eslintrc
├── .editorconfig
├── example
    ├── nuxt.config.js
    └── pages
    │   └── index.vue
├── .circleci
    └── config.yml
├── LICENSE
├── stories
    ├── fontawesome.stories.js
    └── Iconslist.vue
├── package.json
├── test
    ├── config-key.test.js
    ├── config-pro.test.js
    └── module.test.js
├── lib
    ├── module.js
    └── plugin.js
├── CHANGELOG.md
└── README.md


/.eslintignore:
--------------------------------------------------------------------------------
1 | lib/plugin.js
2 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "@nuxtjs"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.iml
 3 | .idea
 4 | *.log*
 5 | .nuxt*
 6 | .vscode
 7 | .DS_Store
 8 | coverage
 9 | dist
10 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   collectCoverage: true,
3 |   collectCoverageFrom: ['lib/**/*.js', '!lib/plugin.js'],
4 |   testEnvironment: 'node'
5 | }
6 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "parserOptions": {
 4 |     "parser": "babel-eslint",
 5 |     "sourceType": "module"
 6 |   },
 7 |   "extends": [
 8 |     "@nuxtjs"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/example/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | 
 3 | module.exports = {
 4 |   rootDir: resolve(__dirname, '..'),
 5 |   buildDir: resolve(__dirname, '.nuxt'),
 6 |   srcDir: __dirname,
 7 |   render: {
 8 |     resourceHints: false
 9 |   },
10 |   modules: [
11 |     ['@@', {
12 |       component: 'fa',
13 |       imports: [
14 |         {
15 |           set: '@fortawesome/free-solid-svg-icons',
16 |           icons: ['faCog', 'faCalendar', 'faHome', 'faCircle', 'faCheck']
17 |         }
18 |       ],
19 |       icons: {
20 |         solid: true,
21 |         brands: [
22 |           'faNode',
23 |           'faVuejs'
24 |         ]
25 |       }
26 |     }]
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/example/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <fa icon="cog" />
 4 |     <fa-layers class="fa-4x">
 5 |       <fa icon="circle" />
 6 |       <fa icon="check" transform="shrink-6" :style="{ color: 'white' }" />
 7 |     </fa-layers>
 8 |     <fa-layers full-width class="fa-4x">
 9 |       <fa icon="calendar" />
10 |       <fa-layers-text transform="shrink-8 down-3" value="27" class="fa-inverse" />
11 |     </fa-layers>
12 | 
13 |     <p style="font-size: 3rem">
14 |       We <fa icon="heart" />
15 |       <fa :icon="fab.faJs" />, <fa :icon="['fab', 'node']" /> & <fa :icon="['fab', 'vuejs']" />
16 |     </p>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import { faJs } from '@fortawesome/free-brands-svg-icons'
22 | 
23 | export default {
24 |   computed: {
25 |     fab () {
26 |       return {
27 |         faJs
28 |       }
29 |     }
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     docker:
 5 |       - image: circleci/node
 6 |     steps:
 7 |       # Checkout repository
 8 |       - checkout
 9 | 
10 |       # Restore cache
11 |       - restore_cache:
12 |           key: yarn-cache-{{ checksum "yarn.lock" }}
13 | 
14 |       # Install dependencies
15 |       - run:
16 |           name: Install Dependencies
17 |           command: yarn install
18 | 
19 |       # Keep cache
20 |       - save_cache:
21 |           key: yarn-cache-{{ checksum "yarn.lock" }}
22 |           paths:
23 |             - "node_modules"
24 | 
25 |       # Lint
26 |       - run:
27 |           name: Lint
28 |           command: yarn lint
29 | 
30 |       # Tests
31 |       - run:
32 |           name: Tests
33 |           command: yarn test
34 | 
35 |       # Coverage
36 |       #- run:
37 |       #    name: Coverage
38 |       #    command: yarn codecov
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Nuxt Community
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/stories/fontawesome.stories.js:
--------------------------------------------------------------------------------
 1 | import { library } from '@fortawesome/fontawesome-svg-core'
 2 | import IconsList from './Iconslist.vue'
 3 | /**
 4 |  * Gets icons from library with ["fas", "edit", "fasEdit"] shape
 5 |  *
 6 |  * @return array
 7 |  */
 8 | const getLibIcons = (library) => {
 9 |   const data = library.definitions
10 | 
11 |   const toPascalCase = (str) => {
12 |     const camelCase = str.replace(/-([a-z])/g, val => val[1].toUpperCase())
13 |     return camelCase.charAt(0).toUpperCase() + camelCase.slice(1)
14 |   }
15 | 
16 |   return (Object.keys(data).map(key =>
17 |     Object.keys(data[key]).map(value => [key, value, key + toPascalCase(value)])
18 |   )).reduce((current, next) => current.concat(next), [])
19 | }
20 | 
21 | export default {
22 |   title: 'Modules/Font Awesome',
23 |   argTypes: {
24 |     size: {
25 |       name: 'Icons Size',
26 |       control: { type: 'select', options: ['fa-1x', 'fa-2x', 'fa-3x', 'fa-4x', 'fa-5x'] }
27 |     },
28 |     onClick: { action: 'clicked' }
29 |   }
30 | }
31 | 
32 | export const Icons = () => ({
33 |   props: {
34 |     size: {
35 |       type: String,
36 |       default: 'fa-2x'
37 |     },
38 |     onClick: {
39 |       type: Function,
40 |       default: () => () => {}
41 |     }
42 |   },
43 |   components: { IconsList },
44 |   data () {
45 |     return {
46 |       icons: getLibIcons(library)
47 |     }
48 |   },
49 |   template: '<IconsList :icons="icons" :size="size" :onClick="onClick" />'
50 | })
51 | 
52 | Icons.args = {
53 |   size: 'fa-2x'
54 | }
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@nuxtjs/fontawesome",
 3 |   "version": "1.1.2",
 4 |   "description": "Module to join nuxt and Fontawesome 5",
 5 |   "repository": "nuxt-community/fontawesome-module",
 6 |   "license": "MIT",
 7 |   "main": "lib/module.js",
 8 |   "contributors": [
 9 |     "vaso2 <head@galley.online>"
10 |   ],
11 |   "keywords": [
12 |     "vue",
13 |     "nuxt",
14 |     "nuxt-module",
15 |     "fontawesome"
16 |   ],
17 |   "files": [
18 |     "lib",
19 |     "stories"
20 |   ],
21 |   "scripts": {
22 |     "dev": "nuxt example",
23 |     "lint": "eslint --ext .js,.vue .",
24 |     "release": "yarn lint && yarn test && standard-version",
25 |     "test": "jest"
26 |   },
27 |   "dependencies": {
28 |     "@fortawesome/fontawesome-svg-core": "^1.2.27",
29 |     "@fortawesome/vue-fontawesome": "^0.1.9"
30 |   },
31 |   "devDependencies": {
32 |     "@fortawesome/free-brands-svg-icons": "^5.12.1",
33 |     "@fortawesome/free-solid-svg-icons": "^5.12.1",
34 |     "@nuxtjs/eslint-config": "^2.0.2",
35 |     "babel-eslint": "latest",
36 |     "codecov": "latest",
37 |     "eslint": "latest",
38 |     "eslint-config-standard": "latest",
39 |     "eslint-plugin-import": "latest",
40 |     "eslint-plugin-jest": "latest",
41 |     "eslint-plugin-node": "latest",
42 |     "eslint-plugin-promise": "latest",
43 |     "eslint-plugin-standard": "latest",
44 |     "eslint-plugin-vue": "latest",
45 |     "jest": "latest",
46 |     "jsdom": "latest",
47 |     "nuxt-edge": "latest",
48 |     "standard-version": "latest"
49 |   },
50 |   "publishConfig": {
51 |     "access": "public"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/test/config-key.test.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | const fs = require('fs-extra')
 3 | const { Nuxt, Builder } = require('nuxt-edge')
 4 | 
 5 | describe('basic', () => {
 6 |   let nuxt
 7 |   const buildDir = resolve(__dirname, '.nuxt-key')
 8 | 
 9 |   beforeAll(async () => {
10 |     const config = {
11 |       rootDir: resolve(__dirname, '..'),
12 |       buildDir,
13 |       srcDir: resolve(__dirname, '../example'),
14 |       modules: [
15 |         ['@@']
16 |       ],
17 |       fontawesome: {
18 |         useLayers: false,
19 |         useLayersText: false,
20 |         proIcons: {
21 |           solid: true,
22 |           duotone: ['faCamera']
23 |         }
24 |       }
25 |     }
26 |     config.dev = false
27 | 
28 |     nuxt = new Nuxt(config)
29 |     const BundleBuilder = { build: _ => _ }
30 |     const builder = new Builder(nuxt, BundleBuilder)
31 |     await builder.build()
32 |   }, 60000)
33 | 
34 |   afterAll(async () => {
35 |     await nuxt.close()
36 |   })
37 | 
38 |   test('plugin', async () => {
39 |     const content = await fs.readFile(resolve(buildDir, 'fontawesome.js'), { encoding: 'utf8' })
40 | 
41 |     expect(content).toContain('proFasFas')
42 |     expect(content).toContain('proFadFaCamera')
43 |     expect(content).toContain('pro-solid-svg-icons')
44 |     expect(content).toContain('pro-duotone-svg-icons')
45 |     expect(content).toContain("'FontAwesomeIcon'")
46 | 
47 |     expect(content).not.toContain('free-solid-svg-icons')
48 |     expect(content).not.toContain('FontAwesomeLayers')
49 |     expect(content).not.toContain('FontAwesomeLayersText')
50 |   })
51 | })
52 | 


--------------------------------------------------------------------------------
/test/config-pro.test.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | const fs = require('fs-extra')
 3 | const { Nuxt, Builder } = require('nuxt-edge')
 4 | 
 5 | describe('basic', () => {
 6 |   let nuxt
 7 |   const buildDir = resolve(__dirname, '.nuxt-pro')
 8 | 
 9 |   beforeAll(async () => {
10 |     const config = {
11 |       rootDir: resolve(__dirname, '..'),
12 |       buildDir,
13 |       srcDir: resolve(__dirname, '../example'),
14 |       modules: [
15 |         ['@@', {
16 |           component: 'fa',
17 |           useLayers: false,
18 |           useLayersText: false,
19 |           proIcons: {
20 |             solid: true,
21 |             duotone: ['faCamera']
22 |           }
23 |         }]
24 |       ]
25 |     }
26 |     config.dev = false
27 | 
28 |     nuxt = new Nuxt(config)
29 |     const BundleBuilder = { build: _ => _ }
30 |     const builder = new Builder(nuxt, BundleBuilder)
31 |     await builder.build()
32 |   }, 60000)
33 | 
34 |   afterAll(async () => {
35 |     await nuxt.close()
36 |   })
37 | 
38 |   test('plugin', async () => {
39 |     const content = await fs.readFile(resolve(buildDir, 'fontawesome.js'), { encoding: 'utf8' })
40 | 
41 |     expect(content).toContain('proFasFas')
42 |     expect(content).toContain('proFadFaCamera')
43 |     expect(content).toContain('pro-solid-svg-icons')
44 |     expect(content).toContain('pro-duotone-svg-icons')
45 |     expect(content).toContain("'fa'")
46 | 
47 |     expect(content).not.toContain('free-solid-svg-icons')
48 |     expect(content).not.toContain('FontAwesomeLayers')
49 |     expect(content).not.toContain('FontAwesomeLayersText')
50 |   })
51 | })
52 | 


--------------------------------------------------------------------------------
/lib/module.js:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import consola from 'consola'
 3 | 
 4 | const logger = consola.withScope('fontawesome')
 5 | 
 6 | const defaults = {
 7 |   component: '',
 8 |   suffix: false,
 9 |   addCss: true,
10 |   useLayers: true,
11 |   useLayersText: true,
12 |   icons: {},
13 |   proIcons: {}
14 | }
15 | 
16 | const faStyles = [
17 |   'solid',
18 |   'regular',
19 |   'light',
20 |   'duotone',
21 |   'brands'
22 | ]
23 | 
24 | function validateIcons (icons) {
25 |   for (const key in icons) {
26 |     if (!faStyles.includes(key)) {
27 |       logger.error(`Unsupported icons style '${key}', it will be removed`)
28 |       delete icons[key]
29 |     }
30 |   }
31 | }
32 | 
33 | export default function fontawesomeModule (moduleOptions) {
34 |   const options = Object.assign(
35 |     defaults,
36 |     this.options.fontawesome,
37 |     moduleOptions
38 |   )
39 | 
40 |   if (options.imports && this.options.dev) {
41 |     logger.warn('The \'imports\' option is deprecated and will be removed in a future version. Use \'icons\' instead')
42 |   }
43 | 
44 |   validateIcons(options.icons)
45 |   validateIcons(options.proIcons)
46 | 
47 |   // 'component' is also used to name the layer components
48 |   if (!options.component || options.suffix) {
49 |     options.suffix = 'Icon'
50 |   }
51 | 
52 |   // set default component name after determining suffix
53 |   if (!options.component) {
54 |     options.component = 'FontAwesome'
55 |   }
56 | 
57 |   if (options.addCss) {
58 |     this.options.css.unshift('@fortawesome/fontawesome-svg-core/styles.css')
59 |   }
60 | 
61 |   this.addPlugin({
62 |     src: path.resolve(__dirname, 'plugin.js'),
63 |     fileName: 'fontawesome.js',
64 |     options
65 |   })
66 | 
67 |   this.nuxt.hook('storybook:config', ({ stories }) => {
68 |     stories.push('@nuxtjs/fontawesome/stories/*.stories.js')
69 |   })
70 | }
71 | 


--------------------------------------------------------------------------------
/test/module.test.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const path = require('path')
 3 | const { Nuxt, Builder } = require('nuxt-edge')
 4 | const request = require('request-promise-native')
 5 | 
 6 | const url = path => `http://localhost:3000${path}`
 7 | const get = path => request(url(path))
 8 | 
 9 | describe('basic', () => {
10 |   let nuxt
11 | 
12 |   beforeAll(async () => {
13 |     const config = require('../example/nuxt.config')
14 | 
15 |     config.dev = false
16 |     nuxt = new Nuxt(config)
17 |     await new Builder(nuxt).build()
18 |     await nuxt.listen(3000)
19 |   }, 60000)
20 | 
21 |   afterAll(async () => {
22 |     await nuxt.close()
23 |   })
24 | 
25 |   test('bundle size (tree shaking)', () => {
26 |     // fab ~460KB
27 |     // fas ~660KB
28 |     // make sure that fas is tree-shaked and not included completely
29 |     let maxSize = 0
30 |     const dirname = path.resolve(nuxt.options.buildDir, 'dist', 'client')
31 |     const files = fs.readdirSync(dirname)
32 |     for (const file of files) {
33 |       const stat = fs.statSync(path.resolve(dirname, file))
34 |       if (stat.size > maxSize) {
35 |         maxSize = stat.size
36 |       }
37 |     }
38 | 
39 |     expect(maxSize).toBeGreaterThan(100000)
40 |     expect(maxSize).toBeLessThan(700000)
41 |   })
42 | 
43 |   test('render', async () => {
44 |     const html = await get('/')
45 |     expect(html).toContain('data-prefix="fas" data-icon="cog"')
46 |     expect(html).toContain('data-prefix="fas" data-icon="check"')
47 |     expect(html).toContain('data-prefix="fas" data-icon="circle"')
48 |     expect(html).toContain('data-prefix="fas" data-icon="calendar"')
49 |     expect(html).toContain('>27<')
50 |     expect(html).toContain('fa-inverse fa-layers-text')
51 |     expect(html).toContain('data-prefix="fab" data-icon="js"')
52 |     expect(html).toContain('data-prefix="fab" data-icon="node"')
53 |     expect(html).toContain('data-prefix="fab" data-icon="vuejs"')
54 |   })
55 | })
56 | 


--------------------------------------------------------------------------------
/lib/plugin.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { library, config } from '@fortawesome/fontawesome-svg-core'
 3 | import {
 4 |   <%= options.useLayers ? 'FontAwesomeLayers,' : '' %>
 5 |   <%= options.useLayersText ? 'FontAwesomeLayersText,' : '' %>
 6 |   FontAwesomeIcon
 7 | } from '@fortawesome/vue-fontawesome'
 8 | 
 9 | <%
10 | const imports = []
11 | const iconsToAdd = []
12 | 
13 | function addIcons(iconStyles, pro) {
14 |   if (!iconStyles) {
15 |     return
16 |   }
17 | 
18 |   for (const style in iconStyles) {
19 |     let icons = iconStyles[style]
20 | 
21 |     if (icons === true) {
22 |       icons = [`fa${style[0]}`]
23 |     }
24 | 
25 |     if (!icons || !icons.length) {
26 |       continue
27 |     }
28 | 
29 |     const styleIcons = icons.map(icon => {
30 |       const alias = `${pro ? 'pro' : 'free'}Fa${style[0]}${icon[0].toUpperCase()}${icon.slice(1)}`
31 |       iconsToAdd.push(alias)
32 |       return `${icon} as ${alias}`
33 |     })
34 | 
35 |     const pkgName = `${pro ? 'pro': 'free'}-${style}-svg-icons`
36 |     imports.push(`import {\n  ${styleIcons.join(',\n  ')}\n} from '@fortawesome/${pkgName}'`)
37 |   }
38 | }
39 | 
40 | addIcons(options.icons)
41 | addIcons(options.proIcons, true)
42 | 
43 | if (options.imports) {
44 |   options.imports.forEach(({set, icons}) => {
45 |     name = set.replace(/[^a-zA-z]/g, "")
46 | 
47 |     const iconImports = []
48 |     icons.forEach(icon => {
49 |       const alias = `${name}_${icon}`
50 |       iconsToAdd.push(alias)
51 |       iconImports.push(`${icon} as ${alias}`)
52 |     })
53 | 
54 |     imports.push(`import {\n  ${iconImports.join(',\n  ')}\n} from '${set}'`)
55 |   })
56 | }
57 | %>
58 | 
59 | <% if (iconsToAdd.length) { %>
60 | <%= imports.join('\n\n') %>
61 | 
62 | library.add(
63 |   <%= iconsToAdd.join(',\n  ') %>
64 | )
65 | <% } %>
66 | 
67 | config.autoAddCss = false
68 | 
69 | Vue.component('<%=options.component%><%= options.suffix || ''%>', FontAwesomeIcon)
70 | <%= options.useLayers ? `Vue.component('${options.component}Layers', FontAwesomeLayers)` : '' %>
71 | <%= options.useLayersText ? `Vue.component('${options.component}LayersText', FontAwesomeLayersText)` : '' %>
72 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | ### [1.1.2](https://github.com/nuxt-community/fontawesome-module/compare/v1.1.1...v1.1.2) (2020-03-21)
 6 | 
 7 | 
 8 | ### Bug Fixes
 9 | 
10 | * set default component according to readme ([19559a5](https://github.com/nuxt-community/fontawesome-module/commit/19559a565cf323cfc77e52c58d959ef4f2e7bd76))
11 | 
12 | ### [1.1.1](https://github.com/nuxt-community/fontawesome-module/compare/v1.1.0...v1.1.1) (2020-02-08)
13 | 
14 | 
15 | ### Bug Fixes
16 | 
17 | * use unique imports ([e0a09dd](https://github.com/nuxt-community/fontawesome-module/commit/e0a09dd735d9052b0e5a96b421ac80cad52d6977))
18 | 
19 | ## [1.1.0](https://github.com/nuxt-community/fontawesome-module/compare/v1.0.1...v1.1.0) (2020-02-08)
20 | 
21 | 
22 | ### Features
23 | 
24 | * add proIcons config option for pro imports ([ae483be](https://github.com/nuxt-community/fontawesome-module/commit/ae483be1c44dcd9156092b358f286b16a2db4566))
25 | 
26 | 
27 | ### Bug Fixes
28 | 
29 | * only log deprecation warning in dev mode ([72c9170](https://github.com/nuxt-community/fontawesome-module/commit/72c9170301c4eea5d8259113227000672807ba07))
30 | 
31 | ### [1.0.1](https://github.com/nuxt-community/fontawesome-module/compare/v1.0.0...v1.0.1) (2020-01-20)
32 | 
33 | 
34 | ### Bug Fixes
35 | 
36 | * always print icons ([83b2924](https://github.com/nuxt-community/fontawesome-module/commit/83b29245e40e71975397aa1189318c39c461824a))
37 | 
38 | <a name="0.4.0"></a>
39 | ## 0.4.0 (2018-12-24)
40 | - Added support for <font-awesome-layers> and <font-awesome-layers-text>
41 | - Working example added
42 | - Tests added
43 | <a name="0.3.0"></a>
44 | ## 0.3.0 (2018-06-28)
45 | Updated due to fontawesome 5.1, which has some breaking changes.
46 | #### 0.2 to 0.3 upgrade
47 | Please refer to vue-fontawesome [UPGRADING](https://github.com/FortAwesome/vue-fontawesome/blob/master/UPGRADING.md) guide and use current version of README docs
48 | 
49 | General differences:
50 | - Fontawesome now has no default imports, you have to specify `icons: ['fas']` to import whole set.
51 | - Packages changed. You'll need to update your package.json file with the renamed packages and new versions.
52 | - Improved tree shaking support, no need to setup it with build and `shakable.es.js'`, so remove this block
53 | 
54 | <a name="0.0.1"></a>
55 | ## 0.0.1 (2018-02-10)
56 | Initial commit
57 | 


--------------------------------------------------------------------------------
/stories/Iconslist.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ficon-container">
  3 |     <div class="ficon-search-wrapper">
  4 |       <input v-model="query" class="ficon-search" placeholder="Search Icons">
  5 |     </div>
  6 |     <div class="ficon-preview-wrapper">
  7 |       <div v-for="icon in filteredIcons" :key="icon[1]" class="ficon-preview">
  8 |         <div class="ficon-card">
  9 |           <font-awesome-icon :icon="icon[1]" :class="size" />
 10 |           <span class="ficon-name">{{ icon[1] }}</span>
 11 |           <input
 12 |             class="ficon-name-input"
 13 |             type="text"
 14 |             readonly
 15 |             :value="`<font-awesome-icon icon='${icon[1]}' class='${size}' />`"
 16 |             @click="copy"
 17 |           >
 18 |         </div>
 19 |       </div>
 20 |     </div>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 | export default {
 26 |   props: {
 27 |     size: {
 28 |       type: String,
 29 |       default: 'fa-2x'
 30 |     },
 31 |     onClick: {
 32 |       type: Function,
 33 |       default: () => () => {}
 34 |     },
 35 |     icons: {
 36 |       type: Array,
 37 |       default: () => ([])
 38 |     }
 39 |   },
 40 |   data () {
 41 |     return {
 42 |       query: ''
 43 |     }
 44 |   },
 45 |   computed: {
 46 |     filteredIcons () {
 47 |       return this.icons.filter(([_, name]) => name.match(this.query))
 48 |     }
 49 |   },
 50 |   methods: {
 51 |     copy (e) {
 52 |       const el = e.target
 53 |       el.select()
 54 |       el.setSelectionRange(0, 99999)
 55 |       document.execCommand('copy')
 56 |       this.onClick(`Icon "${e.target.value}" copied to clipboard`)
 57 |     }
 58 |   }
 59 | }
 60 | </script>
 61 | 
 62 | <style scoped>
 63 | .ficon-container {
 64 |   padding: 25px;
 65 |   max-width: 1050px;
 66 |   margin: 0 auto;
 67 |   box-sizing: border-box;
 68 | }
 69 | .ficon-container * {
 70 |   box-sizing: inherit
 71 | }
 72 | .ficon-search-wrapper {
 73 |   margin: 10px 25px;
 74 | }
 75 | .ficon-sprite-title {
 76 |   width: 100%;
 77 |   text-align: center;
 78 |   text-transform: uppercase;
 79 |   font-family: monospace;
 80 |   letter-spacing: 0.1em;
 81 | }
 82 | .ficon-search {
 83 |   width: 100%;
 84 |   height: 50px;
 85 |   font-size: 20px;
 86 |   text-indent: 10px;
 87 | }
 88 | .ficon-preview-wrapper {
 89 |   display: flex;
 90 |   flex-wrap: wrap;
 91 |   justify-content: center;
 92 | }
 93 | .ficon-preview {
 94 |   width: 200px;
 95 |   height: 200px;
 96 |   padding: 10px;
 97 |   text-align: center;
 98 | }
 99 | .ficon-card {
100 |   width: 100%;
101 |   height: 100%;
102 |   border-radius: 5px;
103 |   padding: 5px;
104 |   display: flex;
105 |   align-items: center;
106 |   justify-content: center;
107 |   flex-direction: column;
108 |   position: relative;
109 | }
110 | .ficon-card:hover {
111 |   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
112 | }
113 | .ficon-name {
114 |   margin-top: 10px;
115 |   font-family: monospace;
116 |   width: 100%;
117 |   color: #333;
118 |   background: #fff;
119 |   overflow: hidden;
120 |   padding: 2px;
121 |   border-radius: 3px;
122 | }
123 | .ficon-name-input {
124 |   position: absolute;
125 |   width: 100%;
126 |   height: 100%;
127 | 
128 |   left: 0;
129 |   top: 0;
130 |   bottom: 0;
131 |   right: 0;
132 |   opacity: 0;
133 |   cursor: copy;
134 | }
135 | </style>
136 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # @nuxtjs/fontawesome
  2 | [![npm version][npm-version-src]][npm-version-href]
  3 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
  4 | [![Circle CI][circle-ci-src]][circle-ci-href]
  5 | [![License][license-src]][license-href]
  6 | 
  7 | > Module to use [Font Awesome](https://fontawesome.com/) icons in your Nuxt.js project. Uses [vue-fontawesome](https://github.com/FortAwesome/vue-fontawesome) under the hood
  8 | 
  9 | [📖 **Release Notes**](./CHANGELOG.md)
 10 | 
 11 | ## Setup
 12 | - Add dependency using npm to your project
 13 | ```bash
 14 | $ yarn add @nuxtjs/fontawesome -D
 15 | 
 16 | // or to also add the free icon packs
 17 | 
 18 | $ yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D
 19 | ```
 20 | 
 21 | - Add `@nuxtjs/fontawesome` to `buildModules` in your `nuxt.config`
 22 | - Configure loaded icons/whole sets
 23 | 
 24 | Use the 'fontawesome' key:
 25 | ```js
 26 |   // nuxt.config.js
 27 |   buildModules: [
 28 |     '@nuxtjs/fontawesome',
 29 |   ],
 30 | 
 31 |   fontawesome: {
 32 |     icons: {
 33 |       solid: ['faCog', ...],
 34 |       ...
 35 |     }
 36 |   }
 37 | }
 38 | ````
 39 | or include the options in the modules listing
 40 | ```js
 41 |   // nuxt.config.js
 42 |   buildModules: [
 43 |     ['@nuxtjs/fontawesome', {
 44 |       component: 'fa',
 45 |       suffix: true,
 46 |       proIcons: { // if you have bought the Pro packages
 47 |         // list the icons you want to add, not listed icons will be tree-shaked
 48 |         solid: [
 49 |           'faHome',
 50 |           'faHeart'
 51 |         ],
 52 |         // include all icons. But dont do this.
 53 |         regular: true
 54 |       }
 55 |     }]
 56 |   ]
 57 | ```
 58 | ## Module options
 59 | 
 60 | ### `component`
 61 | - Default: `FontAwesomeIcon`
 62 | 
 63 | Change component name. Eg set to `fa` to use `<fa icon="" ... />`. Also see [suffix](#suffix)
 64 | 
 65 | > It's strongly recommended to use [PascalCase](https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended) for component names
 66 | 
 67 | ### `useLayers`
 68 | - Default: `true`
 69 | 
 70 | Boolean to indicate if the layers component should be registered globally. Name of the component will be `${options.component}-layers`, fe `<fa-layers ... />`
 71 | 
 72 | ### `useLayersText`
 73 | - Default: `true`
 74 | 
 75 | Boolean to indicate if the layers component should be registered globally. Name of the component will be the `${options.component}-layers-text`, fe
 76 | `<fa-layers-text ... />`
 77 | 
 78 | ### `icons`
 79 | 
 80 | Which icons you will use. FontAwesome [currently](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use) supports 5 icon styles of which 3 are freely available (partially).
 81 | 
 82 | This option is an object with the style names as property and an array with all icon names you wish to use from those styles
 83 | 
 84 | ```js
 85 |   icons: {
 86 |     solid: [ 'faHome', ... ],
 87 |     regular: [ ... ],
 88 |     light: [ ... ],
 89 |     duotone: [ ... ],
 90 |     brands: [ ...]
 91 |   }
 92 | ```
 93 | 
 94 | Although not recommended, you can use `true` to include the full icon set:
 95 | ```js
 96 |   icons: {
 97 |     solid: true
 98 |   }
 99 | ```
100 | 
101 | ### `proIcons`
102 | 
103 | See [`icons`](#icons) for how to use, but always uses pro imports.
104 | 
105 | 
106 | ### `addCss`
107 | - Default: `true`
108 | 
109 | If the module should automatically add the fontawesome styles to the global css config. It works by unshifting `@fortawesome/fontawesome-svg-core/styles.css` onto the nuxt.options.css property.
110 | 
111 | ### `suffix`
112 | - Default: `false`
113 | 
114 | Boolean whether to append `-icon` to the icon component name. This option exists as the component name option is also used for the layer components and you might not want to add '-icon' to those
115 | 
116 | ```js
117 |   // config
118 |   component: 'Fa',
119 |   suffix: true
120 | 
121 |   // usage
122 |   <fa-icon />
123 |   <fa-layer />
124 | 
125 | ```
126 | ```js
127 |   // config
128 |   component: 'FaIcon',
129 |   suffix: false
130 | 
131 |   // usage
132 |   <fa-icon />
133 |   <fa-icon-layers />
134 | ```
135 | 
136 | ### `imports` _deprecated_
137 | Import icons/whole sets from chosen packages. This is the old configuration and will likely be removed in a future version. Use [`icons`](#icons) instead
138 | - Default: `[]`, no icons will be imported here (see below, can be loaded later inside .vue file)
139 |   - `set` - path to node package for import, like `@fortawesome/free-solid-svg-icons`
140 |   - `icons` - array of icons to import `['faAdjust', 'faArchive']`.
141 | 
142 | ```js
143 |   imports: [
144 |     {
145 |       set: '@fortawesome/free-solid-svg-icons',
146 |       icons: ['faHome']
147 |     }
148 |   ]
149 | ```
150 | 
151 | ## Usage
152 | You can find more details under `example` folder. Also please see [vue-fontawesome](https://github.com/FortAwesome/vue-fontawesome) for additional reference
153 | 
154 | - Ensure you have installed an icon package
155 | `yarn add @fortawesome/free-solid-svg-icons -D`
156 | - and have added the module configuration to your `nuxt.config.js`
157 | 
158 | Default component names are:
159 | - `<font-awesome-icon>`
160 | - `<font-awesome-layers>`
161 | - `<font-awesome-layers-text>`
162 | 
163 | With `component` option set, `-layers` and `-layers-text` suffixes will be appended (see example below)
164 | ```js
165 |   // nuxt.config
166 |   fontawesome: {
167 |     icons: {
168 |       solid: ['faHome'],
169 |       regular: ['faAdjust']
170 |     }
171 |   },
172 | ```
173 | 
174 | - Use global icons:
175 | ```vue
176 | <template>
177 |   <div>
178 |     <font-awesome-icon :icon="['fas', 'adjust']"  />
179 |     <font-awesome-icon icon="dollar-sign"  style="font-size: 30px"/>
180 |     <font-awesome-icon icon="cog"/>
181 | 
182 |     <font-awesome-layers class="fa-4x">
183 |       <font-awesome-icon icon="circle"/>
184 |       <font-awesome-icon icon="check" transform="shrink-6" :style="{ color: 'white' }"/>
185 |     </font-awesome-layers>
186 | 
187 |     <font-awesome-layers full-width class="fa-4x">
188 |       <font-awesome-icon icon="calendar"/>
189 |       <font-awesome-layers-text transform="shrink-8 down-3" value="27" class="fa-inverse" />
190 |     </font-awesome-layers>
191 |   </div>
192 | </template>
193 | 
194 | <script></script>
195 | ```
196 | 
197 | - Use locally imported icons
198 | ```vue
199 | <template>
200 |     <div>
201 |         <fa-layers full-width class="fa-4x">
202 |           <fa :icon="fas.faCircle"/>
203 |           <fa-layers-text transform="shrink-12" value="GALSD" class="fa-inverse" />
204 |         </fa-layers>
205 | 
206 |         <fa :icon="fas.faAddressBook"  />
207 |         <fa :icon="faGithub" />
208 |     </div>
209 | </template>
210 | 
211 | <script>
212 | import { fas } from '@fortawesome/free-solid-svg-icons'
213 | import { faGithub } from '@fortawesome/free-brands-svg-icons'
214 | 
215 | export default {
216 |   computed: {
217 |     fas () {
218 |        return fas // NOT RECOMMENDED
219 |     },
220 |     faGithub () {
221 |        return faGithub
222 |     }
223 |   },
224 | }
225 | </script>
226 | ```
227 | 
228 | ## Integrations
229 | ### Storybook
230 | If you are fan of storybook this might be interesting for you, This module provides a story to list and search available icons of your project. You can see stories under `stories` directory. 
231 | If you are using [`@nuxtjs/storybook`](https://storybook.nuxtjs.org) you can see the fontawesome stories under `Modules` section in your storybook. By default Font Awesome story will shows in your storybook, you disable/hide the story using [Storybook's `modules` option](/options#modules)
232 | 
233 | 
234 | 
235 | ## License
236 | 
237 | [MIT License](./LICENSE)
238 | 
239 | This module was forked from the (font) awesome module created by [Galley Web Development](https://github.com/vaso2/nuxt-fontawesome)
240 | 
241 | Copyright (c) Nuxt Community
242 | 
243 | <!-- Badges -->
244 | [npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/fontawesome/latest.svg?style=flat-square
245 | [npm-version-href]: https://npmjs.com/package/@nuxtjs/fontawesome
246 | 
247 | [npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/fontawesome.svg?style=flat-square
248 | [npm-downloads-href]: https://npmjs.com/package/@nuxtjs/fontawesome
249 | 
250 | [circle-ci-src]: https://img.shields.io/circleci/project/github/nuxt-community/fontawesome-module.svg?style=flat-square
251 | [circle-ci-href]: https://circleci.com/gh/nuxt-community/fontawesome-module
252 | 
253 | [codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/fontawesome-module.svg?style=flat-square
254 | [codecov-href]: https://codecov.io/gh/nuxt-community/fontawesome-module
255 | 
256 | [license-src]: https://img.shields.io/npm/l/@nuxtjs/fontawesome.svg?style=flat-square
257 | [license-href]: https://npmjs.com/package/@nuxtjs/fontawesome
258 | 


--------------------------------------------------------------------------------