refactor(module)!: implement design system with CSS variables (#2298)

docs/content/1.getting-started/4.icons.md

@@ -0,0 +1,120 @@
+---
+title: Icons
+description: 'Nuxt UI integrates with `@nuxt/icon` to access over 200,000+ icons from [Iconify](https://iconify.design/).'
+links:
+  - label: 'nuxt/icon'
+    to: https://github.com/nuxt/icon
+    target: _blank
+    icon: i-simple-icons-github
+---
+
+## Usage
+
+Nuxt UI automatically registers the `@nuxt/icon` module for you, so there's no additional setup required.
+
+::note
+You can use any name from the https://icones.js.org collection.
+::
+
+### Icon Component
+
+You can use the [Icon](/components/icon) component with a `name` prop to display an icon:
+
+::component-code{slug="icon"}
+---
+props:
+  name: 'i-heroicons-light-bulb'
+  class: 'size-5'
+---
+::
+
+### Component Props
+
+Some components also have an `icon` prop to display an icon, like the [Button](/components/button) for example:
+
+::component-code{slug="button"}
+---
+ignore:
+  - color
+  - variant
+props:
+  icon: i-heroicons-sun
+  variant: subtle
+slots:
+  default: Button
+---
+::
+
+## Collections
+
+### Iconify Dataset
+
+It's highly recommended to install the icon data locally with:
+
+::code-group
+
+```bash [pnpm]
+pnpm i @iconify-json/{collection_name}
+```
+
+```bash [yarn]
+yarn add @iconify-json/{collection_name}
+```
+
+```bash [npm]
+npm install @iconify-json/{collection_name}
+```
+
+::
+
+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.
+
+::tip{to="https://github.com/nuxt/icon?tab=readme-ov-file#iconify-dataset" target="_blank"}
+Read more about this in the `@nuxt/icon` documentation.
+::
+
+### Custom Local Collections
+
+You can use local SVG files to create a custom Iconify collection.
+
+For example, place your icons' SVG files under a folder of your choice, for example, `./assets/icons`:
+
+```bash
+assets/icons
+├── add.svg
+└── remove.svg
+```
+
+In your `nuxt.config.ts`, add an item in `icon.customCollections`:
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ],
+  icon: {
+    customCollections: [{
+      prefix: 'custom',
+      dir: './assets/icons'
+    }]
+  }
+})
+```
+
+Then you can use the icons like this:
+
+```vue
+<template>
+  <UIcon name="i-custom-add" />
+</template>
+```
+
+::tip{to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
+Read more about this in the `@nuxt/icon` documentation.
+::
+
+## Theme
+
+You can change the default icons used by Nuxt UI components in your `app.config.ts`:
+
+:icons-theme