arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 09:50:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Icon)!: migrate from @egoist/tailwindcss-icons to new @nuxt/icon (#1789)

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-24 12:46:41 +02:00
committed by GitHub
parent bfa2e707d8
commit c904604c23
31 changed files with 110 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/content/1.getting-started/2.installation.md
View File

@@ -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
}
})
```