Skip to content

Commit

Permalink
docs(icon): put back component page
Browse files Browse the repository at this point in the history
  • Loading branch information
benjamincanac committed Jun 25, 2024
1 parent c904604 commit 4c0a3d8
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 5 deletions.
4 changes: 2 additions & 2 deletions docs/content/1.getting-started/3.theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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.
::

Expand Down
28 changes: 25 additions & 3 deletions docs/content/2.components/icon.md
Original file line number Diff line number Diff line change
@@ -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).
::

0 comments on commit 4c0a3d8

Please sign in to comment.