feat: defaultAssets.icons all icons providers support (#85)

* feat: defaultAssets.icons all icons providers support

* chore: add co-author

Co-authored-by: ricardogobbosouza <[email protected]>

* fix: fa4 link

* chore: add warning if wrong value

* fix: coverage ~ add test

Author: kevinmarrec

README.md

@@ -93,7 +93,7 @@ export default {
 ```js
 {
   font: true,
-  icons: true
+  icons: 'mdi'
 }
 ```
 
@@ -104,10 +104,22 @@ These assets are handled automatically by default to provide a zero-configuratio
 `defaultAssets.font` automatically adds the **Roboto** font stylesheet from official google fonts to load the font with `font-display: swap`.
 You can disable it if you plan to use different font or manually handle font loading.
 
-`defaultAssets.icons` automatically adds the icons stylesheet from [Material Design Icons](https://materialdesignicons.com) CDN to load all the icons.
-You can disable it and choose and setup your preferred icons preset by following [Vuetify Icons documentation](https://vuetifyjs.com/en/customization/icons)
+`defaultAssets.icons` automatically adds the icons stylesheet from a CDN to load all the icons (**not optimized for production**).  
+Here are the accepted values for this option :
 
-You can also set `defaultAssets` to `false` to prevent any automatic add of these two assets.
+| Value | Icons |
+|-------|-------|
+| `'mdi'` (default) | [Material Designs Icons](https://materialdesignicons.com/) ([CDN](https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css)) 
+| `'md'`  | [Material Icons](https://material.io/resources/icons/) ([CDN](https://fonts.googleapis.com/css?family=Material+Icons))
+| `'fa'` |  [Font Awesome 5](https://fontawesome.com/icons) ([CDN](https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css))
+| `'fa4'` |  [Font Awesome 4](https://fontawesome.com/v4.7.0/icons/) ([CDN](https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css))
+| `false` | Disable auto add of the icons stylesheet
+
+> This option (if not set to `false`) will automatically override `icons.iconfont` Vuetify option so that Vuetify components use these icons.
+
+Please refer to [Vuetify Icons documentation](https://vuetifyjs.com/en/customization/icons) for more information about icons, notably for using only bunch of SVG icons instead of including all icons in your app.
+
+You can also set the whole `defaultAssets` option to `false` to prevent any automatic add of these two assets.
 
 ### `treeShake`
 

lib/module.js

@@ -5,11 +5,18 @@ const defaults = {
   customVariables: [],
   defaultAssets: {
     font: true,
-    icons: true
+    icons: 'mdi'
   },
   treeShake: process.env.NODE_ENV === 'production'
 }
 
+const cdn = {
+  'mdi': 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css',
+  'md': 'https://fonts.googleapis.com/css?family=Material+Icons',
+  'fa': 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css',
+  'fa4': 'https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css'
+}
+
 // See https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0-alpha.12
 const sassLoaderOptions = {
   implementation: require('sass'),
@@ -59,13 +66,21 @@ module.exports = function (moduleOptions) {
       })
     }
 
-    // Add Material Design Icons font
-    if (options.defaultAssets.icons) {
-      this.options.head.link.push({
-        rel: 'stylesheet',
-        type: 'text/css',
-        href: 'https://cdn.materialdesignicons.com/3.8.95/css/materialdesignicons.min.css'
-      })
+    const defaultIconPreset = options.defaultAssets.icons
+
+    // Add Icons font
+    if (defaultIconPreset) {
+      if (cdn[defaultIconPreset]) {
+        this.options.head.link.push({
+          rel: 'stylesheet',
+          type: 'text/css',
+          href: cdn[defaultIconPreset]
+        })
+      } else {
+        const wrapValue = val => typeof val === 'string' ? `\`'${val}'\`` : `\`${val}\``
+        const supportedValues = [...Object.keys(cdn), false].map(wrapValue)
+        console.warn(`[@nuxtjs/vuetify] Value ${wrapValue(defaultIconPreset)} for \`defaultAssets.icons\` option is not supported (Supported values : ${supportedValues.join(', ')})`)
+      }
     }
 
     // Enable tree-shaking with VuetifyLoader (https://github.com/vuetifyjs/vuetify-loader)
@@ -90,8 +105,9 @@ module.exports = function (moduleOptions) {
       src: path.resolve(__dirname, 'plugin.js'),
       fileName: 'vuetify.js',
       options: {
-        vuetifyOptions,
-        treeShake: options.treeShake
+        defaultIconPreset,
+        treeShake: options.treeShake,
+        vuetifyOptions
       }
     })
   })

lib/plugin.js

@@ -1,14 +1,17 @@
 import Vue from 'vue'
-<% if (options.treeShake) { %>
-import Vuetify from 'vuetify/lib'
-<% } else { %>
-import Vuetify from 'vuetify'
-<% } %>
+import Vuetify from '<%= options.treeShake ? 'vuetify/lib' : 'vuetify' %>'
 
 Vue.use(Vuetify)
 
+const options = <%= serializeFunction(options.vuetifyOptions) %>
+
+<% if (options.defaultIconPreset) { %>
+options.icons = options.icons || {}
+options.icons.iconfont = '<%= options.defaultIconPreset %>'
+<% } %>
+
 export default (ctx) => {
-  const vuetify = new Vuetify(<%= serializeFunction(options.vuetifyOptions) %>)
+  const vuetify = new Vuetify(options)
 
   ctx.app.vuetify = vuetify
   ctx.$vuetify = vuetify.framework

test/module.test.js

@@ -49,6 +49,33 @@ describe('disable all default assets', () => {
   })
 })
 
+describe('set wrong value to defaultAssets.icons', () => {
+  let consoleWarnSpy
+  let nuxt
+
+  beforeAll(async () => {
+    consoleWarnSpy = jest.spyOn(console, 'warn')
+    nuxt = new Nuxt({
+      ...config,
+      vuetify: {
+        defaultAssets: {
+          icons: 'wrong'
+        }
+      }
+    })
+    await nuxt.ready()
+    await new Builder(nuxt).build()
+  })
+
+  afterAll(async () => {
+    await nuxt.close()
+  })
+
+  test('should have warned user', () => {
+    expect(consoleWarnSpy).toHaveBeenCalledWith("[@nuxtjs/vuetify] Value `'wrong'` for `defaultAssets.icons` option is not supported (Supported values : `'mdi'`, `'md'`, `'fa'`, `'fa4'`, `false`)")
+  })
+})
+
 describe.skip('enable treeShake', () => {
   let nuxt