arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 03:10:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(theming): improve Icons section

Browse Source
This commit is contained in:
Benjamin Canac
2023-12-19 17:51:27 +01:00
parent 4dee128524
commit c963ba688f
1 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/content/1.getting-started/3.theming.md
View File

@@ -281,12 +281,14 @@ export default defineNuxtConfig({
Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu). Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
:: ::
Unlike the official [nuxt-icon](https://github.com/nuxt-modules/icon/) module, this module will not fetch any icon from the web and will only bundle the icons you use in your app thanks to [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons). Thanks to [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) plugin, only the icons you use in your app will be bundled in your CSS. However, you need to install the icon collections you specified in the `ui.icons` key:
However, you will need to install either `@iconify/json` (full icon collections, 50MB) or the individual icon packages you want to use in your app.
::code-group ::code-group
```bash [pnpm]
pnpm i @iconify-json/{collection_name}
```
```bash [yarn] ```bash [yarn]
yarn add @iconify-json/{collection_name} yarn add @iconify-json/{collection_name}
``` ```
@@ -295,25 +297,21 @@ yarn add @iconify-json/{collection_name}
npm install @iconify-json/{collection_name} npm install @iconify-json/{collection_name}
``` ```
```sh [pnpm]
pnpm i @iconify-json/{collection_name}
```
:: ::
When using `@iconify/json`, you can specifiy `icons: 'all'` in your `nuxt.config.ts` to use any icon in your app. If you choose to use the full `@iconify/json` icon collection (50MB), you can specifiy `icons: 'all'` or `icons: {}` in your `nuxt.config.ts` to use any icon in your app.
```ts [nuxt.config.ts] ```ts [nuxt.config.ts]
export default defineNuxtConfig({ export default defineNuxtConfig({
ui: { ui: {
icons: 'all' icons: {}
} }
}) })
``` ```
### Custom config ### Custom config
If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin. If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
```ts [nuxt.config.ts] ```ts [nuxt.config.ts]
import { getIconCollections } from '@egoist/tailwindcss-icons' import { getIconCollections } from '@egoist/tailwindcss-icons'
@@ -345,7 +343,13 @@ export default defineNuxtConfig({
}) })
``` ```
--- ### Dynamic icons
The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
Read more about this in the [Icon](/elements/icon#dynamic) component page.
### Defaults
You can easily replace all the default icons of the components in your `app.config.ts`. You can easily replace all the default icons of the components in your `app.config.ts`.