mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-30 11:47:55 +01:00
docs(icon): put back component page
This commit is contained in:
@@ -278,7 +278,7 @@ const isDark = computed({
|
|||||||
|
|
||||||
## Icons
|
## Icons
|
||||||
|
|
||||||
Thanks to [`@nuxt/icon`](https://github.com/nuxt/icon), use 200,000+ ready to use icons based on [Iconify](https://iconify.design).
|
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:
|
You can use any name from the https://icones.js.org collection such as the `i-` prefix (for example, `i-heroicons-cog`) with:
|
||||||
|
|
||||||
@@ -320,7 +320,7 @@ 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.
|
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-cog-6-tooth" to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
|
::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.
|
Read more about custom collections in the `@nuxt/icon` documentation.
|
||||||
::
|
::
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,27 @@
|
|||||||
---
|
---
|
||||||
description: Use 200,000+ ready to use icons from Iconify.
|
description: Add 200,000+ ready to use icons to your Nuxt application, based on Iconify.
|
||||||
to: https://github.com/nuxt/icon
|
links:
|
||||||
target: _blank
|
- label: Iconify
|
||||||
|
icon: i-simple-icons-iconify
|
||||||
|
to: https://icones.js.org
|
||||||
|
- label: Nuxt Icon
|
||||||
|
icon: i-simple-icons-github
|
||||||
|
to: https://github.com/nuxt/icon
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
You can use any name from the https://icones.js.org collection such as the `i-` prefix:
|
||||||
|
|
||||||
|
::component-card
|
||||||
|
---
|
||||||
|
baseProps:
|
||||||
|
class: 'w-5 h-5'
|
||||||
|
props:
|
||||||
|
name: 'i-heroicons-light-bulb'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
::callout{icon="i-heroicons-light-bulb"}
|
||||||
|
It's highly recommended to install the icons collections you need, read more about this in [Theming](/getting-started/theming#icons).
|
||||||
|
::
|
||||||
|
|||||||
Reference in New Issue
Block a user