From 19a2545e16257064f1d51a04d9ef45b0dfe2643f Mon Sep 17 00:00:00 2001 From: dino475 Date: Tue, 29 Jul 2025 17:18:43 -0700 Subject: [PATCH 1/5] Update accordions.mdx --- components/accordions.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/accordions.mdx b/components/accordions.mdx index b7f7c50a7..16c6f0668 100644 --- a/components/accordions.mdx +++ b/components/accordions.mdx @@ -100,6 +100,12 @@ Group related accordions together using ``. This creates a cohes A [Font Awesome icon](https://fontawesome.com/icons), [Lucide icon](https://lucide.dev/icons), or SVG code. + + For custom SVG icons: + 1. Use the [SVGR converter](https://react-svgr.com/playground/). + 2. Copy the code inside the `` tag. + 3. Paste the code into your card. + 4. Adjust height and width as needed. From fcb96e4678500489d6c1963aeff66998ea7dea52 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 30 Jul 2025 14:47:58 -0700 Subject: [PATCH 2/5] add snippet for icons --- snippets/icons.mdx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 snippets/icons.mdx diff --git a/snippets/icons.mdx b/snippets/icons.mdx new file mode 100644 index 000000000..bed5876e8 --- /dev/null +++ b/snippets/icons.mdx @@ -0,0 +1,23 @@ + + The icon to display. + + Options: + - [Font Awesome icon](https://fontawesome.com/icons) name + - [Lucide icon](https://lucide.dev/icons) name + - JSX-compatible SVG code wrapped in curly braces + - URL to an externally hosted icon + - Path to an icon file in your project + + For custom SVG icons: + 1. Convert your SVG using the [SVGR converter](https://react-svgr.com/playground/). + 1. Paste your SVG code into the SVG input field. + 2. Copy the complete `...` element from the JSX output field. + 3. Wrap the JSX-compatible SVG code in curly braces: `icon={ ... }`. + 4. Adjust `height` and `width` as needed. + + + + The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons. + + Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. + \ No newline at end of file From e93ad50cb18977d3000ca10236bbe8c59eb477ee Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 30 Jul 2025 14:48:22 -0700 Subject: [PATCH 3/5] use icon snippet for consistency --- ai/contextual-menu.mdx | 5 ++--- code.mdx | 4 +++- components/accordions.mdx | 17 +++-------------- components/cards.mdx | 16 +++------------- components/icons.mdx | 12 ++++-------- components/steps.mdx | 10 +++------- pages.mdx | 7 +++---- settings.mdx | 20 +++++++------------- 8 files changed, 28 insertions(+), 63 deletions(-) diff --git a/ai/contextual-menu.mdx b/ai/contextual-menu.mdx index 4f342e1f2..63327dd8f 100644 --- a/ai/contextual-menu.mdx +++ b/ai/contextual-menu.mdx @@ -5,6 +5,7 @@ icon: "square-menu" --- import { PreviewButton } from "/snippets/previewbutton.jsx" +import { Icons } from "/snippets/icons.jsx"; The contextual menu provides quick access to AI-optimized content and direct integrations with popular AI tools. When users select the contextual menu on any page, they can copy content as context for AI tools or open conversations in ChatGPT, Claude, Perplexity, or a custom tool of your choice with your documentation already loaded as context. @@ -54,9 +55,7 @@ Create custom options in the contextual menu by adding an object to the `options The description of the option. Displayed beneath the title when the contextual menu is expanded. - - The icon of the option. Accepts any icon from the [Icons](/components/icons) collection. - + The href of the option. Use a string for simple links or an object for dynamic links with query parameters. diff --git a/code.mdx b/code.mdx index 8be187ba9..bbefd613b 100644 --- a/code.mdx +++ b/code.mdx @@ -4,6 +4,8 @@ description: "Display inline code and code blocks" icon: "code" --- +import { Icons } from "/snippets/icons.jsx"; + ## Adding code samples You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more. @@ -93,7 +95,7 @@ const hello = "world"; ### Icon -Add an icon to your code block. You can use [FontAwesome](https://fontawesome.com/icons) icons, [Lucide](https://lucide.dev/icons/) icons, or absolute URLs. +Add an icon to your code block using the `icon` property. See [Icons](/components/icons) for all available options. ```javascript icon="square-js" const hello = "world"; diff --git a/components/accordions.mdx b/components/accordions.mdx index 16c6f0668..a3cb4d324 100644 --- a/components/accordions.mdx +++ b/components/accordions.mdx @@ -4,6 +4,8 @@ description: "Collapsible components to show and hide content" icon: "chevron-down" --- +import { Icons } from "/snippets/icons.jsx"; + Accordions allow users to expand and collapse content sections. Use accordions for progressive disclosure and to organize information. ## Single accordion @@ -97,17 +99,4 @@ Group related accordions together using ``. This creates a cohes Whether the Accordion is open by default. - - A [Font Awesome icon](https://fontawesome.com/icons), [Lucide - icon](https://lucide.dev/icons), or SVG code. - - For custom SVG icons: - 1. Use the [SVGR converter](https://react-svgr.com/playground/). - 2. Copy the code inside the `` tag. - 3. Paste the code into your card. - 4. Adjust height and width as needed. - - - - For Font Awesome icons, one of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or "brands". - + diff --git a/components/cards.mdx b/components/cards.mdx index f724c5452..96b9ca412 100644 --- a/components/cards.mdx +++ b/components/cards.mdx @@ -4,6 +4,8 @@ description: "Highlight main points or links with customizable layouts and icons icon: "square-mouse-pointer" --- +import { Icons } from "/snippets/icons.jsx"; + Use cards to create visual containers for content. Cards are flexible containers that can include text, icons, images, and links. ## Basic card @@ -102,19 +104,7 @@ Use the [Columns component](/components/columns) to organize multiple cards side The title displayed on the card - - Icon to display on the card. Use a [Font Awesome icon](https://fontawesome.com/icons) name, [Lucide icon](https://lucide.dev/icons) name, or JSX-compatible SVG code wrapped in `icon={}`. - - For custom SVG icons: - 1. Use the [SVGR converter](https://react-svgr.com/playground/). - 2. Copy the code inside the `` tag. - 3. Paste the code into your card. - 4. Adjust height and width as needed. - - - - Font Awesome icon style: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, or `brands`. - + Icon color as a hex code (e.g., `#FF6B6B`). diff --git a/components/icons.mdx b/components/icons.mdx index d703d2858..7e980c65a 100644 --- a/components/icons.mdx +++ b/components/icons.mdx @@ -4,7 +4,9 @@ description: "Use icons from popular icon libraries" icon: "flag" --- -Use icons from Font Awesome, Lucide, URLs, or files in your project to enhance your documentation. +import { Icons } from "/snippets/icons.jsx"; + +Use icons from Font Awesome, Lucide, SVGs, external URLs, or files in your project to enhance your documentation. @@ -24,13 +26,7 @@ Icons are placed inline when used within a paragraph. ## Properties - - A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon. - - - - For [Font Awesome](https://fontawesome.com/icons) icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. - + The color of the icon as a hex code (for example, `#FF5733`). diff --git a/components/steps.mdx b/components/steps.mdx index cd80b3fb8..71fbd2df3 100644 --- a/components/steps.mdx +++ b/components/steps.mdx @@ -4,6 +4,8 @@ description: "Sequence content using the Steps component" icon: "list-todo" --- +import { Icons } from "/snippets/icons.jsx"; + Use steps to display a series of sequential actions or events. You can add as many steps as needed. @@ -48,13 +50,7 @@ Use steps to display a series of sequential actions or events. You can add as ma The content of a step either as plain text or components. - - A [Font Awesome icon](https://fontawesome.com/icons), [Lucide icon](https://lucide.dev/icons), or SVG code in `icon={}`. - - - - For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. - + The title is the primary text for the step and shows up next to the indicator. diff --git a/pages.mdx b/pages.mdx index 242f9f5e3..b892e4535 100644 --- a/pages.mdx +++ b/pages.mdx @@ -4,6 +4,8 @@ description: "Pages are the building blocks of your documentation" icon: "letter-text" --- +import { Icons } from "/snippets/icons.jsx"; + Each page is an MDX file, which combines Markdown content with React components to let you create rich, interactive documentation. ## Page metadata @@ -22,10 +24,7 @@ Every page starts with frontmatter—YAML metadata enclosed by `---` at the begi A short title that displays in the sidebar navigation. - - An icon next to your page title in the sidebar. Choose an icon from Font Awesome, Lucide, or use a custom URL. Configure your preferred icon library with the [icons library setting](/settings#param-icons). - - + A tag that appears next to your page title in the sidebar. diff --git a/settings.mdx b/settings.mdx index 487b52265..1907e6b7f 100644 --- a/settings.mdx +++ b/settings.mdx @@ -5,6 +5,8 @@ icon: "settings-2" keywords: ["docs.json", "settings", "customization", "configuration"] --- +import { Icons } from "/snippets/icons.jsx"; + The `docs.json` file lets you turn a collection of Markdown files into a navigable, customized documentation site. This required configuration file controls styling, navigation, integrations, and more. Settings in `docs.json` apply globally to all pages. @@ -146,7 +148,7 @@ See [Themes](themes) for more information. Icon library to use throughout your documentation. Defaults to `fontawesome`. - You can specify a URL for any individual icon, regardless of the library setting. + You can specify a URL to an externally hosted icon, path to an icon file in your project, or JSX-compatible SVG code for any individual icon, regardless of the library setting. @@ -277,9 +279,7 @@ See [Themes](themes) for more information. URL or path for the link destination. - - Icon for the link. Can be a URL (relative or external), Font Awesome icon, or Lucide icon. - + @@ -356,9 +356,7 @@ See [Themes](themes) for more information. Minimum length: 1 - - Icon for the tab. Can be a URL (relative or external), Font Awesome icon, or Lucide icon. - + Whether to hide this tab by default. @@ -376,9 +374,7 @@ See [Themes](themes) for more information. Minimum length: 1 - - Icon for the anchor. Can be a URL (relative or external), Font Awesome icon, or Lucide icon. - + Custom colors for the anchor. @@ -413,9 +409,7 @@ See [Themes](themes) for more information. Minimum length: 1 - - Icon for the dropdown. Can be a URL (relative or external), Font Awesome icon, or Lucide icon. - + Whether to hide this dropdown by default. From c0135e200041d9a9be44ed0cb5d64628cee15491 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 30 Jul 2025 15:21:14 -0700 Subject: [PATCH 4/5] add required/optional icon snippets --- snippets/icons-optional.mdx | 23 ++++++++++++++++++++++ snippets/{icons.mdx => icons-required.mdx} | 0 2 files changed, 23 insertions(+) create mode 100644 snippets/icons-optional.mdx rename snippets/{icons.mdx => icons-required.mdx} (100%) diff --git a/snippets/icons-optional.mdx b/snippets/icons-optional.mdx new file mode 100644 index 000000000..a538782a1 --- /dev/null +++ b/snippets/icons-optional.mdx @@ -0,0 +1,23 @@ + + The icon to display. + + Options: + - [Font Awesome icon](https://fontawesome.com/icons) name + - [Lucide icon](https://lucide.dev/icons) name + - JSX-compatible SVG code wrapped in curly braces + - URL to an externally hosted icon + - Path to an icon file in your project + + For custom SVG icons: + 1. Convert your SVG using the [SVGR converter](https://react-svgr.com/playground/). + 1. Paste your SVG code into the SVG input field. + 2. Copy the complete `...` element from the JSX output field. + 3. Wrap the JSX-compatible SVG code in curly braces: `icon={ ... }`. + 4. Adjust `height` and `width` as needed. + + + + The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons. + + Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. + \ No newline at end of file diff --git a/snippets/icons.mdx b/snippets/icons-required.mdx similarity index 100% rename from snippets/icons.mdx rename to snippets/icons-required.mdx From 3d8c8d282811d076f40f4743b186cc01b54cca4c Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 30 Jul 2025 15:21:33 -0700 Subject: [PATCH 5/5] update for required/optional --- ai/contextual-menu.mdx | 4 ++-- code.mdx | 2 -- components/accordions.mdx | 4 ++-- components/cards.mdx | 4 ++-- components/icons.mdx | 4 ++-- components/steps.mdx | 4 ++-- pages.mdx | 4 ++-- settings.mdx | 10 +++++----- 8 files changed, 17 insertions(+), 19 deletions(-) diff --git a/ai/contextual-menu.mdx b/ai/contextual-menu.mdx index 63327dd8f..24fec5752 100644 --- a/ai/contextual-menu.mdx +++ b/ai/contextual-menu.mdx @@ -5,7 +5,7 @@ icon: "square-menu" --- import { PreviewButton } from "/snippets/previewbutton.jsx" -import { Icons } from "/snippets/icons.jsx"; +import IconsRequired from "/snippets/icons-required.mdx"; The contextual menu provides quick access to AI-optimized content and direct integrations with popular AI tools. When users select the contextual menu on any page, they can copy content as context for AI tools or open conversations in ChatGPT, Claude, Perplexity, or a custom tool of your choice with your documentation already loaded as context. @@ -55,7 +55,7 @@ Create custom options in the contextual menu by adding an object to the `options The description of the option. Displayed beneath the title when the contextual menu is expanded. - + The href of the option. Use a string for simple links or an object for dynamic links with query parameters. diff --git a/code.mdx b/code.mdx index bbefd613b..9cdebff96 100644 --- a/code.mdx +++ b/code.mdx @@ -4,8 +4,6 @@ description: "Display inline code and code blocks" icon: "code" --- -import { Icons } from "/snippets/icons.jsx"; - ## Adding code samples You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more. diff --git a/components/accordions.mdx b/components/accordions.mdx index a3cb4d324..7aa0c4c8d 100644 --- a/components/accordions.mdx +++ b/components/accordions.mdx @@ -4,7 +4,7 @@ description: "Collapsible components to show and hide content" icon: "chevron-down" --- -import { Icons } from "/snippets/icons.jsx"; +import IconsOptional from "/snippets/icons-optional.mdx"; Accordions allow users to expand and collapse content sections. Use accordions for progressive disclosure and to organize information. @@ -99,4 +99,4 @@ Group related accordions together using ``. This creates a cohes Whether the Accordion is open by default. - + diff --git a/components/cards.mdx b/components/cards.mdx index 96b9ca412..87323c823 100644 --- a/components/cards.mdx +++ b/components/cards.mdx @@ -4,7 +4,7 @@ description: "Highlight main points or links with customizable layouts and icons icon: "square-mouse-pointer" --- -import { Icons } from "/snippets/icons.jsx"; +import IconsOptional from "/snippets/icons-optional.mdx"; Use cards to create visual containers for content. Cards are flexible containers that can include text, icons, images, and links. @@ -104,7 +104,7 @@ Use the [Columns component](/components/columns) to organize multiple cards side The title displayed on the card - + Icon color as a hex code (e.g., `#FF6B6B`). diff --git a/components/icons.mdx b/components/icons.mdx index 7e980c65a..58c234a5b 100644 --- a/components/icons.mdx +++ b/components/icons.mdx @@ -4,7 +4,7 @@ description: "Use icons from popular icon libraries" icon: "flag" --- -import { Icons } from "/snippets/icons.jsx"; +import IconsRequired from "/snippets/icons-required.mdx"; Use icons from Font Awesome, Lucide, SVGs, external URLs, or files in your project to enhance your documentation. @@ -26,7 +26,7 @@ Icons are placed inline when used within a paragraph. ## Properties - + The color of the icon as a hex code (for example, `#FF5733`). diff --git a/components/steps.mdx b/components/steps.mdx index 71fbd2df3..3f5b1ba1e 100644 --- a/components/steps.mdx +++ b/components/steps.mdx @@ -4,7 +4,7 @@ description: "Sequence content using the Steps component" icon: "list-todo" --- -import { Icons } from "/snippets/icons.jsx"; +import IconsOptional from "/snippets/icons-optional.mdx"; Use steps to display a series of sequential actions or events. You can add as many steps as needed. @@ -50,7 +50,7 @@ Use steps to display a series of sequential actions or events. You can add as ma The content of a step either as plain text or components. - + The title is the primary text for the step and shows up next to the indicator. diff --git a/pages.mdx b/pages.mdx index b892e4535..88765a156 100644 --- a/pages.mdx +++ b/pages.mdx @@ -4,7 +4,7 @@ description: "Pages are the building blocks of your documentation" icon: "letter-text" --- -import { Icons } from "/snippets/icons.jsx"; +import IconsOptional from "/snippets/icons-optional.mdx"; Each page is an MDX file, which combines Markdown content with React components to let you create rich, interactive documentation. @@ -24,7 +24,7 @@ Every page starts with frontmatter—YAML metadata enclosed by `---` at the begi A short title that displays in the sidebar navigation. - + A tag that appears next to your page title in the sidebar. diff --git a/settings.mdx b/settings.mdx index 1907e6b7f..3a5e75964 100644 --- a/settings.mdx +++ b/settings.mdx @@ -5,7 +5,7 @@ icon: "settings-2" keywords: ["docs.json", "settings", "customization", "configuration"] --- -import { Icons } from "/snippets/icons.jsx"; +import IconsOptional from "/snippets/icons-optional.mdx"; The `docs.json` file lets you turn a collection of Markdown files into a navigable, customized documentation site. This required configuration file controls styling, navigation, integrations, and more. @@ -279,7 +279,7 @@ See [Themes](themes) for more information. URL or path for the link destination. - + @@ -356,7 +356,7 @@ See [Themes](themes) for more information. Minimum length: 1 - + Whether to hide this tab by default. @@ -374,7 +374,7 @@ See [Themes](themes) for more information. Minimum length: 1 - + Custom colors for the anchor. @@ -409,7 +409,7 @@ See [Themes](themes) for more information. Minimum length: 1 - + Whether to hide this dropdown by default.