From 13601acb920e5f0c81b709b04a63f0b4a238a736 Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 5 Jan 2024 20:27:48 +0100 Subject: [PATCH 1/2] docs: add custom icon integrations section --- docs/.vitepress/config.ts | 6 +++ docs/guide/i18n.md | 3 +- docs/guide/icons/integrations.md | 67 ++++++++++++++++++++++++++++++++ package.json | 2 +- 4 files changed, 75 insertions(+), 3 deletions(-) create mode 100644 docs/guide/icons/integrations.md diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index a959ed2..fc55a15 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -85,6 +85,9 @@ export default withPwa(defineConfig({ }, { text: 'SVG Icons', link: '/guide/icons/svg-icons', + }, { + text: 'Integrations', + link: '/guide/icons/integrations', }], }, { @@ -166,6 +169,9 @@ export default withPwa(defineConfig({ }, { text: 'SVG Icons', link: '/guide/icons/svg-icons', + }, { + text: 'Integrations', + link: '/guide/icons/integrations', }], collapsed: true, }, { diff --git a/docs/guide/i18n.md b/docs/guide/i18n.md index 1639b43..a86d6c9 100644 --- a/docs/guide/i18n.md +++ b/docs/guide/i18n.md @@ -5,9 +5,8 @@ outline: deep # Internationalization ::: warning -Requires latest [Edge Release Channel](https://github.com/nuxt-modules/i18n#edge-release-channel) [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module: `npm:@nuxtjs/i18n-edge`, you may need to reinstall the module to get the latest edge version. -When the new version `8.0.0-rc.6` released, it should be fine: `8.0.0-rc.5` is breaking Nuxt `#app` module augmentation (it is using `#app/nuxt` internally). +From version `v0.8.0`, this module requires latest [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module: `^8.0.0`. ::: Install and configure [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module, and you're ready to use Vuetify [internationalization](https://vuetifyjs.com/en/features/internationalization/) features. diff --git a/docs/guide/icons/integrations.md b/docs/guide/icons/integrations.md new file mode 100644 index 0000000..64fce1d --- /dev/null +++ b/docs/guide/icons/integrations.md @@ -0,0 +1,67 @@ +# Integrations + +Vuetify supports custom icon sets using Vue icons libraries. This section is about how to integrate the following icon libraries with `vuetify-nuxt-module`: +- [unplugin-icons/nuxt](https://github.com/unplugin/unplugin-icons) +- [Iconify for Vue](https://iconify.design/docs/icon-components/vue/) +- [Nuxt Icon](https://github.com/nuxt-modules/icon) +- [Vue Phosphor Icons](https://github.com/phosphor-icons/vue) + +Please refer to the Vuetify documentation for more information about [custom icon sets](https://vuetifyjs.com/en/features/icon-fonts/#creating-a-custom-icon-set), all the examples in this page using a custom icon set implementation. + +Once the custom icon set is implemented, you need to configure `vuetify-nuxt-module` to use it: +- add `icons.defaultSet = 'custom'` in your `vuetify.config.ts` file or in the `vuetifyOptions` object in your `nuxt.config.ts` file +- register the custom icon set in the Vuetify options via a new Nuxt plugin using the `vuetify:before-create` hook +- register the custom icon component in the Vue application via previous Nuxt plugin using `vuetify:ready` hook: this step is optional, only required if you want to use the custom icon component in your application + +If you want to use another icon set library, you should change the corresponding icon set implementation in the examples below: `unplugin-icons`, Iconify Vue and Nuxt Icon using material design icons from Iconify icons. + +You can also use multiple icon sets, check [multiple-icon-sets](/guide/icons/#multiple-icon-sets) and [Vuetify documentation](https://vuetifyjs.com/en/features/icon-fonts/#multiple-icon-sets). + +## unplugin-icons/nuxt + +You can check this [repo using material design icons](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration), using `unplugin-icons/nuxt` Nuxt module: +- default icon set in [nuxt.config.ts](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration/blob/main/nuxt.config.ts) configuration file +- custom icon set in [unplugin-icons/index.ts](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration/blob/main/unplugin-icons/index.ts) icon set +- custom icon set registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration/blob/main/plugins/custom-icons.ts) plugin + +You can run this repo in Stackblitz, check the [README file](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration). + +::: warning +Not all icons have been included, you will need to review the [unplugin-icons/index.ts](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration/blob/main/unplugin-icons/index.ts) file including the icons you want to use. +::: + +## Iconify for Vue + +You can check an [example in Stackblitz using material design icons](https://stackblitz.com/edit/nuxt-starter-al4k5x): +- default icon set in [vuetify.config.ts](https://stackblitz.com/edit/nuxt-starter-al4k5x?file=vuetify.config.ts) configuration file +- custom icon set in [iconify/index.ts](https://stackblitz.com/edit/nuxt-starter-al4k5x?file=iconify%2Findex.ts) icon set +- custom icon set registration in [plugins/custom-icons.ts](https://stackblitz.com/edit/nuxt-starter-al4k5x?file=plugins%2Fcustom-icons.ts) plugin +- custom icon component registration in [plugins/custom-icons.ts](https://stackblitz.com/edit/nuxt-starter-al4k5x?file=plugins%2Fcustom-icons.ts) plugin + +::: warning +Not all icons have been included, you will need to review the [iconify/index.ts](https://stackblitz.com/edit/nuxt-starter-al4k5x?file=iconify%2Findex.ts) file including the icons you want to use. + +Iconify for Vue is client side only, the icons will be rendered only on the client (you will see the icons loaded once the component requests them to the [Iconify API](https://iconify.design/docs/api/)). +::: + +## Nuxt Icon + +You can check this [repo using material design icons](https://github.com/userquin/vuetify-nuxt-icon-integration): +- default icon set in [nuxt.config.ts](https://github.com/userquin/vuetify-nuxt-icon-integration/blob/main/nuxt.config.ts) configuration file +- custom icon set in [nuxt-icon-set/common.ts](https://github.com/userquin/vuetify-nuxt-icon-integration/blob/main/nuxt-icon-set/common.ts) icon set +- custom icon set registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-icon-integration/blob/main/plugins/custom-icons.ts) plugin +- you can choose between `Icon` or `IconCSS`, check previous plugin file + +You can run this repo in Stackblitz, check the [README file](https://github.com/userquin/vuetify-nuxt-icon-integration). + +## Vue Phosphor Icons + +You can check an [example in Stackblitz](https://stackblitz.com/edit/nuxt-starter-cgbvrr): +- default icon set in [vuetify.config.ts](https://stackblitz.com/edit/nuxt-starter-cgbvrr?file=vuetify.config.ts) configuration file +- custom icon set in [phosphor/index.ts](https://stackblitz.com/edit/nuxt-starter-cgbvrr?file=phosphor%2Findex.ts) icon set +- custom icon set registration in [plugins/custom-icons.ts](https://stackblitz.com/edit/nuxt-starter-cgbvrr?file=plugins%2Fcustom-icons.ts) plugin +- custom icon component registration in [plugins/custom-icons.ts](https://stackblitz.com/edit/nuxt-starter-cgbvrr?file=plugins%2Fcustom-icons.ts) plugin + +::: warning +Not all icons have been included, you will need to review the [phosphor/index.ts](https://stackblitz.com/edit/nuxt-starter-cgbvrr?file=phosphor%2Findex.ts) file including the icons you want to use. +::: diff --git a/package.json b/package.json index 1babe3c..68b05fd 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vuetify-nuxt-module", "type": "module", "version": "0.8.0", - "packageManager": "pnpm@8.13.1", + "packageManager": "pnpm@8.14.0", "description": "Zero-Config Nuxt Module for Vuetify", "author": "userquin ", "license": "MIT", From c6263037cf124fa0e9aac2fa187f55c6c4fad559 Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 5 Jan 2024 20:34:01 +0100 Subject: [PATCH 2/2] chore: wording --- docs/guide/icons/integrations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/icons/integrations.md b/docs/guide/icons/integrations.md index 64fce1d..12538ac 100644 --- a/docs/guide/icons/integrations.md +++ b/docs/guide/icons/integrations.md @@ -1,6 +1,6 @@ # Integrations -Vuetify supports custom icon sets using Vue icons libraries. This section is about how to integrate the following icon libraries with `vuetify-nuxt-module`: +Vuetify supports custom icon sets using Vue icon libraries. This section is about how to integrate the following icon libraries with `vuetify-nuxt-module`: - [unplugin-icons/nuxt](https://github.com/unplugin/unplugin-icons) - [Iconify for Vue](https://iconify.design/docs/icon-components/vue/) - [Nuxt Icon](https://github.com/nuxt-modules/icon)