feat(Icon)!: migrate from @egoist/tailwindcss-icons to new `@nuxt/i…

…con` (#1789)
nuxt · Jun 24, 2024 · c904604 · c904604
1 parent bfa2e70
commit c904604
Show file tree

Hide file tree

Showing 31 changed files with 110 additions and 259 deletions.
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
@@ -32,18 +32,24 @@ The Nuxt Starter template is available from the `nuxi init` command.
 npx nuxi@latest init -t ui
 ```
 
-
-
 Please check [nuxt/starter](https://github.com/nuxt/starter/tree/ui) for details.
 
 ## Modules
 
-Nuxt UI will automatically install the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/), [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) and [nuxt-icon](https://github.com/nuxt-modules/icon) modules for you.
+Nuxt UI will automatically install the [@nuxt/icon](https://github.com/nuxt/icon), [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) modules for you.
 
 ::callout{icon="i-heroicons-exclamation-triangle"}
 You should remove them from your `modules` and `dependencies` if you've previously installed them.
 ::
 
+### `@nuxt/icon`
+
+This module is installed to provide an easy way to use icons in your application. You can use the `UIcon` component to display any icon from Iconify.
+
+::callout{icon="i-heroicons-light-bulb"}
+You can read more about this in the [Theming](/getting-started/theming#icons) section.
+::
+
 ### `@nuxtjs/tailwindcss`
 
 This module is pre-configured and will automatically load the following plugins:
@@ -86,14 +92,6 @@ This module is installed to provide dark mode support out of the box thanks to t
 You can read more about this in the [Theming](/getting-started/theming#dark-mode) section.
 ::
 
-### `nuxt-icon`
-
-This module is installed when using the `dynamic` prop on the `Icon` component or globally through the `ui.icons.dynamic` option in your `app.config.ts`.
-
-::callout{icon="i-heroicons-light-bulb"}
-You can read more about this in the [Theming](/getting-started/theming#dynamic-icons) section and on the [Icon](/components/icon) component page.
-::
-
 ## TypeScript
 
 This module is written in TypeScript and provides typings for all the components and composables. You can look at the [source code](https://github.com/nuxt/ui/tree/dev/src/runtime/types) to see all the available types.
@@ -231,7 +229,6 @@ You can also add the following to your `.vscode/settings.json` to enable Intelli
 |-----------------------|-----------------|-------------------------------------------------------------------------------------------------------------|
 | `prefix`              | `u`             | Define the prefix of the imported components.                                                               |
 | `global`              | `false`         | Expose components globally.                                                                                 |
-| `icons`               | `['heroicons']` | Icon collections to load.                                                                                   |
 | `safelistColors`      | `['primary']`   | Force safelisting of colors to need be purged.                                                              |
 | `disableGlobalStyles` | `false`         | Disable [global CSS styles](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.css) injected by the module. |
 
@@ -241,8 +238,7 @@ Configure options in your `nuxt.config.ts` as such:
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
   ui: {
-    global: true,
-    icons: ['mdi', 'simple-icons']
+    global: true
   }
 })
 ```

diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
@@ -258,6 +258,7 @@ const isDark = computed({
   }
 })
 </script>
+
 <template>
   <ClientOnly>
     <UButton
@@ -277,41 +278,29 @@ const isDark = computed({
 
 ## Icons
 
-You can use any icon (100,000+) from [Iconify](https://iconify.design/).
+Thanks to [`@nuxt/icon`](https://github.com/nuxt/icon), use 200,000+ ready to use icons based on [Iconify](https://iconify.design).
+
+You can use any name from the https://icones.js.org collection such as the `i-` prefix (for example, `i-heroicons-cog`) with:
 
-Some components have an `icon` prop that allows you to add an icon to the component.
+- any `icon` prop available across the components:
 
 ```vue
 <template>
   <UButton icon="i-heroicons-magnifying-glass" />
 </template>
 ```
 
-You can also use the [Icon](/components/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
+- the `UIcon` component to use icons anywhere:
 
 ```vue
 <template>
-  <UIcon name="i-heroicons-moon" />
+  <UIcon name="i-heroicons-moon" class="w-5 h-5 text-primary-500" />
 </template>
 ```
 
 ### Collections
 
-By default, the module uses [Heroicons](https://heroicons.com/) but you can change it from the module options in your `nuxt.config.ts`.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  ui: {
-    icons: ['mdi', 'simple-icons']
-  }
-})
-```
-
-::callout{icon="i-heroicons-light-bulb"}
-Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
-::
-
-Thanks to [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) plugin, only the icons you use in your app will be bundled in your CSS. However, you need to install the icon collections you specified in the `ui.icons` key:
+It's highly recommended to install the icons collections locally with:
 
 ::code-group
 
@@ -329,55 +318,11 @@ npm install @iconify-json/{collection_name}
 
 ::
 
-If you choose to use the full `@iconify/json` icon collection (50MB), you can specifiy `icons: 'all'` or `icons: {}` in your `nuxt.config.ts` to use any icon in your app.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  ui: {
-    icons: {}
-  }
-})
-```
-
-### Custom config
-
-If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
-
-```ts [nuxt.config.ts]
-import { getIconCollections } from '@egoist/tailwindcss-icons'
-
-export default defineNuxtConfig({
-  ui: {
-    icons: {
-      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
-      extraProperties: {
-        'mask-size': 'contain',
-        'mask-position': 'center'
-      },
-      collections: {
-        foo: {
-          icons: {
-            'arrow-left': {
-              // svg body
-              body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
-              // svg width and height, optional
-              width: 24,
-              height: 24
-            }
-          }
-        },
-        ...getIconCollections(['heroicons', 'simple-icons'])
-      }
-    }
-  }
-})
-```
-
-### Dynamic icons
+For example, to use the `i-uil-github` icon, install it's collection with `@iconify-json/uil`. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.
 
-The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
-
-Read more about this in the [Icon](/components/icon#dynamic) component page.
+::callout{icon="i-heroicons-cog-6-tooth" to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
+Read more about custom collections in the `@nuxt/icon` documentation.
+::
 
 ### Defaults
 

diff --git a/docs/content/2.components/icon.md b/docs/content/2.components/icon.md
@@ -1,56 +1,5 @@
 ---
-description: Display any icon (100,000+) from Iconify.
-links:
-  - label: GitHub
-    icon: i-simple-icons-github
-    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Icon.vue
+description: Use 200,000+ ready to use icons from Iconify.
+to: https://github.com/nuxt/icon
+target: _blank
 ---
-
-## Usage
-
-Use the `name` prop by following this pattern: `i-{collection_name}-{icon_name}`. You can search any icon from [Iconify](https://iconify.design/) using https://icones.js.org.
-
-::component-card
----
-props:
-  name: 'i-heroicons-light-bulb'
----
-::
-
-::callout{icon="i-heroicons-exclamation-triangle"}
-You won't be able to use all icons in the `name` prop here as icons are bundled using [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons).
-::
-
-::callout{icon="i-heroicons-light-bulb"}
-Don't forget to install and specify the icon collections you need in your `nuxt.config.ts`, read more about this in [Theming](/getting-started/theming#icons).
-::
-
-### Dynamic
-
-You can use the `dynamic` prop to enable dynamic icon loading. This will use [`nuxt-icon`](https://github.com/nuxt-modules/icon) instead and allow you to use any icon from [Iconify](https://iconify.design/) as well as the `{collection_name}:{icon_name}` pattern.
-
-This can be quite useful when using [dynamic class names](https://tailwindcss.com/docs/content-configuration#dynamic-class-names) or for icons that are not bundled by default (fetched from a database for example).
-
-::component-card
----
-props:
-  name: 'i-ph-rocket-launch'
-  dynamic: true
----
-::
-
-You can also change the default behavior of the `dynamic` prop by setting the `ui.icons.dynamic` option in your `app.config.ts`.
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    icons: {
-      dynamic: true
-    }
-  }
-})
-```
-
-## Props
-
-:component-props
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -34,7 +34,6 @@ export default defineNuxtConfig({
   },
   ui: {
     global: true,
-    icons: ['heroicons', 'simple-icons'],
     safelistColors: excludeColors(colors)
   },
   content: {

diff --git a/docs/package.json b/docs/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@iconify-json/heroicons": "^1.1.21",
     "@iconify-json/simple-icons": "^1.1.107",
+    "@iconify-json/vscode-icons": "^1.1.34",
     "@nuxt/content": "^2.13.0",
     "@nuxt/eslint-config": "^0.3.13",
     "@nuxt/fonts": "^0.7.0",

diff --git a/package.json b/package.json
@@ -34,10 +34,10 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "^1.8.1",
     "@headlessui/tailwindcss": "^0.2.1",
     "@headlessui/vue": "^1.7.22",
     "@iconify-json/heroicons": "^1.1.21",
+    "@nuxt/icon": "^1.0.0",
     "@nuxt/kit": "^3.12.2",
     "@nuxtjs/color-mode": "^3.4.1",
     "@nuxtjs/tailwindcss": "^6.12.0",
@@ -51,7 +51,6 @@
     "@vueuse/math": "^10.11.0",
     "defu": "^6.1.4",
     "fuse.js": "^6.6.2",
-    "nuxt-icon": "^0.6.10",
     "ohash": "^1.1.3",
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
@@ -71,8 +70,8 @@
     "release-it": "^17.3.0",
     "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
-    "valibot30": "npm:[email protected]",
     "valibot": "^0.31.1",
+    "valibot30": "npm:[email protected]",
     "vitest": "^1.6.0",
     "vitest-environment-nuxt": "^1.0.0",
     "vue-tsc": "^2.0.16",