mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 12:39:35 +01:00
53 lines
1.5 KiB
Markdown
53 lines
1.5 KiB
Markdown
---
|
|
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
|
|
---
|
|
|
|
## 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 any icon in the `name` prop here as icons are bundled using [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons), 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
|