mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-17 13:38:07 +01:00
140 lines
3.1 KiB
Markdown
140 lines
3.1 KiB
Markdown
---
|
|
description: ''
|
|
---
|
|
|
|
Thanks to [`@nuxt/icon`](https://github.com/nuxt/icon), add 200,000+ ready to use icons to your Nuxt application 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:
|
|
|
|
- any `icon` prop available across the components:
|
|
|
|
```vue
|
|
<template>
|
|
<UButton icon="i-heroicons-magnifying-glass" />
|
|
</template>
|
|
```
|
|
|
|
- the `UIcon` component to use icons anywhere:
|
|
|
|
```vue
|
|
<template>
|
|
<UIcon name="i-heroicons-moon" class="w-5 h-5 text-primary-500" />
|
|
</template>
|
|
```
|
|
|
|
### Collections
|
|
|
|
It's highly recommended to install the icons collections 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.
|
|
|
|
::callout{icon="i-heroicons-light-bulb" 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
|
|
|
|
You can easily replace all the default icons of the components in your `app.config.ts`.
|
|
|
|
```ts [app.config.ts]
|
|
export default defineAppConfig({
|
|
ui: {
|
|
button: {
|
|
default: {
|
|
loadingIcon: 'i-octicon-sync-24'
|
|
}
|
|
},
|
|
input: {
|
|
default: {
|
|
loadingIcon: 'i-octicon-sync-24'
|
|
}
|
|
},
|
|
select: {
|
|
default: {
|
|
loadingIcon: 'i-octicon-sync-24',
|
|
trailingIcon: 'i-octicon-chevron-down-24'
|
|
}
|
|
},
|
|
selectMenu: {
|
|
default: {
|
|
selectedIcon: 'i-octicon-check-24'
|
|
}
|
|
},
|
|
notification: {
|
|
default: {
|
|
closeButton: {
|
|
icon: 'i-octicon-x-24'
|
|
}
|
|
}
|
|
},
|
|
commandPalette: {
|
|
default: {
|
|
icon: 'i-octicon-search-24',
|
|
loadingIcon: 'i-octicon-sync-24',
|
|
selectedIcon: 'i-octicon-check-24',
|
|
emptyState: {
|
|
icon: 'i-octicon-search-24'
|
|
}
|
|
}
|
|
},
|
|
table: {
|
|
default: {
|
|
sortAscIcon: 'i-octicon-sort-asc-24',
|
|
sortDescIcon: 'i-octicon-sort-desc-24',
|
|
sortButton: {
|
|
icon: 'i-octicon-arrow-switch-24'
|
|
},
|
|
loadingState: {
|
|
icon: 'i-octicon-sync-24'
|
|
},
|
|
emptyState: {
|
|
icon: 'i-octicon-database-24'
|
|
}
|
|
}
|
|
},
|
|
pagination: {
|
|
default: {
|
|
firstButton: {
|
|
icon: 'i-octicon-chevron-left-24'
|
|
},
|
|
prevButton: {
|
|
icon: 'i-octicon-arrow-left-24'
|
|
},
|
|
nextButton: {
|
|
icon: 'i-octicon-arrow-right-24'
|
|
},
|
|
lastButton: {
|
|
icon: 'i-octicon-chevron-right-24'
|
|
}
|
|
}
|
|
},
|
|
accordion: {
|
|
default: {
|
|
openIcon: 'i-octicon-chevron-down-24'
|
|
}
|
|
},
|
|
breadcrumb: {
|
|
default: {
|
|
divider: 'i-octicon-chevron-right-24'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|