docs(icon): put back component page

This commit is contained in:
Benjamin Canac
2024-06-25 11:44:51 +02:00
parent c904604c23
commit 4c0a3d8dc0
2 changed files with 27 additions and 5 deletions

View File

@@ -278,7 +278,7 @@ const isDark = computed({
## 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:
@@ -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.
::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.
::

View File

@@ -1,5 +1,27 @@
---
description: Use 200,000+ ready to use icons from Iconify.
to: https://github.com/nuxt/icon
target: _blank
description: Add 200,000+ ready to use icons to your Nuxt application, based on Iconify.
links:
- 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).
::