From 232a2bae02c3bbd0304e41528e21844aae496911 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Sun, 2 Nov 2025 01:06:39 +0000 Subject: [PATCH 1/3] docs: document custom icon functionality for docs.yml and navigation - Add documentation for custom icons using file: prefix for local files - Document inline SVG icon support using < > wrapper - Update navbar-links section with icon format examples - Update sidebar icons section with comprehensive examples for all three formats - Update products section with detailed icon format documentation - Add examples showing Font Awesome, custom image files, and inline SVG usage Co-Authored-By: Catherine Deskur --- .../pages/customization/what-is-docs-yml.mdx | 14 ++++- .../docs/pages/navigation/overview.mdx | 50 ++++++++++++++++- .../docs/pages/navigation/products.mdx | 55 +++++++++++++++---- 3 files changed, 104 insertions(+), 15 deletions(-) diff --git a/fern/products/docs/pages/customization/what-is-docs-yml.mdx b/fern/products/docs/pages/customization/what-is-docs-yml.mdx index 72caf14d5..540c18479 100644 --- a/fern/products/docs/pages/customization/what-is-docs-yml.mdx +++ b/fern/products/docs/pages/customization/what-is-docs-yml.mdx @@ -236,10 +236,12 @@ navbar-links: - type: minimal text: Contact support href: https://example.com/support + icon: fa-solid fa-headset - type: filled text: Login href: https://example.com/login rounded: false + icon: file:assets/icons/login-icon.svg - type: github value: https://github.com/example-company/fern ``` @@ -265,11 +267,19 @@ navbar-links: - The [Font Awesome icon](https://fontawesome.com/icons) to be used in the button. This icon will appear to the **left** of the text content. Pro and Brand Icons from Font Awesome are supported. + The icon to be used in the button. This icon will appear to the **left** of the text content. Supports three formats: + + - **Font Awesome icons**: Use icon names like `fa-solid fa-rocket`. Pro and Brand Icons from Font Awesome are supported. + - **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets. + - **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). - The [Font Awesome icon](https://fontawesome.com/icons) to be used in the button. This icon will appear to the **right** of the text content. Pro and Brand Icons from Font Awesome are supported. + The icon to be used in the button. This icon will appear to the **right** of the text content. Supports three formats: + + - **Font Awesome icons**: Use icon names like `fa-solid fa-arrow-right`. Pro and Brand Icons from Font Awesome are supported. + - **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets. + - **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). By default, the `rightIcon` for a `filled` button is set to `arrow-right`. diff --git a/fern/products/docs/pages/navigation/overview.mdx b/fern/products/docs/pages/navigation/overview.mdx index e69b8a383..8f972ca41 100644 --- a/fern/products/docs/pages/navigation/overview.mdx +++ b/fern/products/docs/pages/navigation/overview.mdx @@ -199,10 +199,16 @@ navigation: ## Sidebar icons -For icons to appear next to sections and pages, add the `icon` key. The value should be a valid [Font Awesome icon](https://fontawesome.com/icons) name. Pro and Brand Icons from Font Awesome are supported. +Add icons next to sections and pages using the `icon` key. Icons support three formats: + +- **Font Awesome icons**: Use icon names like `fa-regular fa-home`. Pro and Brand Icons from Font Awesome are supported. +- **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets. +- **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). + +### Font Awesome icons {/* */} -```yaml Example navigation config with icons +```yaml Example navigation config with Font Awesome icons navigation: - section: Home icon: fa-regular fa-home @@ -215,6 +221,40 @@ navigation: ``` {/* */} +### Custom image files + +To use custom image files as icons, upload your image files to your docs assets folder, then reference them using the `file:` prefix followed by the relative path to the file. + +{/* */} +```yaml Example navigation config with custom image icons +navigation: + - section: Products + icon: file:assets/icons/products-icon.svg + contents: + - page: Product A + icon: file:assets/icons/product-a.png + path: ./pages/product-a.mdx + - page: Product B + icon: file:assets/icons/product-b.png + path: ./pages/product-b.mdx +``` +{/* */} + +### Inline SVG icons + +You can also provide inline SVG strings directly in your configuration by wrapping them in `< >`. + +{/* */} +```yaml Example navigation config with inline SVG icons +navigation: + - section: Custom Section + icon: + contents: + - page: Custom Page + path: ./pages/custom-page.mdx +``` +{/* */} + ## Links You can add a link to an external page within your sidebar navigation with the following configuration: @@ -237,7 +277,11 @@ navigation: ## Tabs -Within the navigation, you can add `tabs`. Tabs are used to group sections together. The example below shows tabs for `Help Center`, `API Reference`, and an external link to `Github`. Each tab has a `title` and `icon`. [Browse the icons available](https://fontawesome.com/icons) from Font Awesome. Pro and Brand Icons are supported. +Within the navigation, you can add `tabs`. Tabs are used to group sections together. The example below shows tabs for `Help Center`, `API Reference`, and an external link to `Github`. Each tab has a `title` and `icon`. Icons support three formats: + +- **Font Awesome icons**: Use icon names like `puzzle` or `fa-solid fa-puzzle`. [Browse the icons available](https://fontawesome.com/icons) from Font Awesome. Pro and Brand Icons are supported. +- **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets. +- **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). {/* */} diff --git a/fern/products/docs/pages/navigation/products.mdx b/fern/products/docs/pages/navigation/products.mdx index f0879c16e..7dc4a1139 100644 --- a/fern/products/docs/pages/navigation/products.mdx +++ b/fern/products/docs/pages/navigation/products.mdx @@ -94,22 +94,57 @@ The optional parameters are: `image`, `icon`, `subtitle`, `slug`, and `versions` If you provide both an `image` and an `icon`, the `image` will take precedence. -The below example is a `docs.yml` configuration for a site with two products, Product A and Product B. +### Product icons + +Product icons support three formats: + +- **Font Awesome icons**: Use icon names like `fa-solid fa-leaf`. Pro and Brand Icons from Font Awesome are supported. +- **Custom image files**: Use `file:` prefix followed by the relative path to the file (e.g., `file:assets/icons/my-icon.svg`). The file must be in your docs assets folder. +- **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). + +#### Font Awesome icons -```yaml {2-3, 8-9} +```yaml products: - display-name: Product A path: ./products/product-a.yml - icon: fa-solid fa-leaf # optional - slug: product-a # optional - subtitle: Product A subtitle # optional + icon: fa-solid fa-leaf + slug: product-a + subtitle: Product A subtitle +``` + + +#### Custom image files +To use custom image files as product icons, upload your image files to your docs assets folder, then reference them using the `file:` prefix followed by the relative path. + + +```yaml +products: + - display-name: Product A + path: ./products/product-a.yml + icon: file:assets/icons/product-a-icon.svg + slug: product-a + subtitle: Product A subtitle - display-name: Product B - path: ./products/product-b/versions/latest/latest.yml # <-- default showing latest - image: ./images/product-b.png # optional - slug: product-b # optional - subtitle: Product B subtitle # optional + path: ./products/product-b.yml + icon: file:assets/icons/product-b-icon.png + slug: product-b + subtitle: Product B subtitle +``` + + +#### Inline SVG icons + + +```yaml +products: + - display-name: Product A + path: ./products/product-a.yml + icon: + slug: product-a + subtitle: Product A subtitle ``` @@ -324,4 +359,4 @@ The dropdown menus for product and version selectors can be customized using the Example of a styled version selector - \ No newline at end of file + \ No newline at end of file From 9bcbf8ada46f1961c4059e885f64cfa8cf27afa3 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Sun, 2 Nov 2025 01:13:08 +0000 Subject: [PATCH 2/3] fix: correct icon file path format to use relative paths - Change from file: prefix to relative paths (./assets/icons/...) - Update navbar-links icon examples to use ./assets/icons/ - Update sidebar icons examples to use relative paths - Update product icons examples to use relative paths - Add note that paths are relative to the YAML file where declared - Wrap inline SVG examples in quotes for proper YAML parsing Co-Authored-By: Catherine Deskur --- .../pages/customization/what-is-docs-yml.mdx | 10 +++++----- .../docs/pages/navigation/overview.mdx | 20 +++++++++---------- .../docs/pages/navigation/products.mdx | 16 ++++++++------- 3 files changed, 24 insertions(+), 22 deletions(-) diff --git a/fern/products/docs/pages/customization/what-is-docs-yml.mdx b/fern/products/docs/pages/customization/what-is-docs-yml.mdx index 540c18479..31a66c35b 100644 --- a/fern/products/docs/pages/customization/what-is-docs-yml.mdx +++ b/fern/products/docs/pages/customization/what-is-docs-yml.mdx @@ -241,7 +241,7 @@ navbar-links: text: Login href: https://example.com/login rounded: false - icon: file:assets/icons/login-icon.svg + icon: ./assets/icons/login-icon.svg - type: github value: https://github.com/example-company/fern ``` @@ -270,16 +270,16 @@ navbar-links: The icon to be used in the button. This icon will appear to the **left** of the text content. Supports three formats: - **Font Awesome icons**: Use icon names like `fa-solid fa-rocket`. Pro and Brand Icons from Font Awesome are supported. - - **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets. - - **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). + - **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the `docs.yml` file. + - **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). The icon to be used in the button. This icon will appear to the **right** of the text content. Supports three formats: - **Font Awesome icons**: Use icon names like `fa-solid fa-arrow-right`. Pro and Brand Icons from Font Awesome are supported. - - **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets. - - **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). + - **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the `docs.yml` file. + - **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). By default, the `rightIcon` for a `filled` button is set to `arrow-right`. diff --git a/fern/products/docs/pages/navigation/overview.mdx b/fern/products/docs/pages/navigation/overview.mdx index 8f972ca41..4c3f2c758 100644 --- a/fern/products/docs/pages/navigation/overview.mdx +++ b/fern/products/docs/pages/navigation/overview.mdx @@ -202,8 +202,8 @@ navigation: Add icons next to sections and pages using the `icon` key. Icons support three formats: - **Font Awesome icons**: Use icon names like `fa-regular fa-home`. Pro and Brand Icons from Font Awesome are supported. -- **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets. -- **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). +- **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the YAML file where the icon is declared. +- **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). ### Font Awesome icons @@ -223,32 +223,32 @@ navigation: ### Custom image files -To use custom image files as icons, upload your image files to your docs assets folder, then reference them using the `file:` prefix followed by the relative path to the file. +To use custom image files as icons, upload your image files to your docs assets folder, then reference them using relative paths. Paths are resolved relative to the YAML file where the icon is declared. {/* */} ```yaml Example navigation config with custom image icons navigation: - section: Products - icon: file:assets/icons/products-icon.svg + icon: ./assets/icons/products-icon.svg contents: - page: Product A - icon: file:assets/icons/product-a.png + icon: ./assets/icons/product-a.png path: ./pages/product-a.mdx - page: Product B - icon: file:assets/icons/product-b.png + icon: ./assets/icons/product-b.png path: ./pages/product-b.mdx ``` {/* */} ### Inline SVG icons -You can also provide inline SVG strings directly in your configuration by wrapping them in `< >`. +You can also provide inline SVG strings directly in your configuration. Wrap the SVG in quotes to ensure proper YAML parsing. {/* */} ```yaml Example navigation config with inline SVG icons navigation: - section: Custom Section - icon: + icon: "" contents: - page: Custom Page path: ./pages/custom-page.mdx @@ -280,8 +280,8 @@ navigation: Within the navigation, you can add `tabs`. Tabs are used to group sections together. The example below shows tabs for `Help Center`, `API Reference`, and an external link to `Github`. Each tab has a `title` and `icon`. Icons support three formats: - **Font Awesome icons**: Use icon names like `puzzle` or `fa-solid fa-puzzle`. [Browse the icons available](https://fontawesome.com/icons) from Font Awesome. Pro and Brand Icons are supported. -- **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets. -- **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). +- **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the YAML file where the icon is declared. +- **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). {/* */} diff --git a/fern/products/docs/pages/navigation/products.mdx b/fern/products/docs/pages/navigation/products.mdx index 7dc4a1139..3bc9545e4 100644 --- a/fern/products/docs/pages/navigation/products.mdx +++ b/fern/products/docs/pages/navigation/products.mdx @@ -99,8 +99,8 @@ The optional parameters are: `image`, `icon`, `subtitle`, `slug`, and `versions` Product icons support three formats: - **Font Awesome icons**: Use icon names like `fa-solid fa-leaf`. Pro and Brand Icons from Font Awesome are supported. -- **Custom image files**: Use `file:` prefix followed by the relative path to the file (e.g., `file:assets/icons/my-icon.svg`). The file must be in your docs assets folder. -- **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `...`). +- **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the `docs.yml` file. +- **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). #### Font Awesome icons @@ -117,19 +117,19 @@ products: #### Custom image files -To use custom image files as product icons, upload your image files to your docs assets folder, then reference them using the `file:` prefix followed by the relative path. +To use custom image files as product icons, upload your image files to your docs assets folder, then reference them using relative paths. Paths are resolved relative to the `docs.yml` file. ```yaml products: - display-name: Product A path: ./products/product-a.yml - icon: file:assets/icons/product-a-icon.svg + icon: ./assets/icons/product-a-icon.svg slug: product-a subtitle: Product A subtitle - display-name: Product B path: ./products/product-b.yml - icon: file:assets/icons/product-b-icon.png + icon: ./assets/icons/product-b-icon.png slug: product-b subtitle: Product B subtitle ``` @@ -137,12 +137,14 @@ products: #### Inline SVG icons +Wrap the SVG in quotes to ensure proper YAML parsing. + ```yaml products: - display-name: Product A path: ./products/product-a.yml - icon: + icon: "" slug: product-a subtitle: Product A subtitle ``` @@ -359,4 +361,4 @@ The dropdown menus for product and version selectors can be customized using the Example of a styled version selector - \ No newline at end of file + \ No newline at end of file From 78cd80e12ec6f46e19aec3cfd6cc3a36171385cf Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Mon, 3 Nov 2025 11:42:28 -0500 Subject: [PATCH 3/3] cut down content, move into snippet --- .vale/styles/FernStyles/Headings.yml | 1 + .../pages/customization/what-is-docs-yml.mdx | 14 ++- .../docs/pages/navigation/overview.mdx | 67 ++++---------- .../docs/pages/navigation/products.mdx | 87 ++++++------------- fern/snippets/icons.mdx | 4 + 5 files changed, 53 insertions(+), 120 deletions(-) create mode 100644 fern/snippets/icons.mdx diff --git a/.vale/styles/FernStyles/Headings.yml b/.vale/styles/FernStyles/Headings.yml index 7eec73962..d11d7d301 100644 --- a/.vale/styles/FernStyles/Headings.yml +++ b/.vale/styles/FernStyles/Headings.yml @@ -114,3 +114,4 @@ exceptions: - RBAC - YAML - fern.config.json + - Font Awesome diff --git a/fern/products/docs/pages/customization/what-is-docs-yml.mdx b/fern/products/docs/pages/customization/what-is-docs-yml.mdx index 31a66c35b..2395f9c23 100644 --- a/fern/products/docs/pages/customization/what-is-docs-yml.mdx +++ b/fern/products/docs/pages/customization/what-is-docs-yml.mdx @@ -267,19 +267,15 @@ navbar-links: - The icon to be used in the button. This icon will appear to the **left** of the text content. Supports three formats: + The icon to be used in the button. This icon will appear to the **left** of the text content. - - **Font Awesome icons**: Use icon names like `fa-solid fa-rocket`. Pro and Brand Icons from Font Awesome are supported. - - **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the `docs.yml` file. - - **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). + - The icon to be used in the button. This icon will appear to the **right** of the text content. Supports three formats: - - - **Font Awesome icons**: Use icon names like `fa-solid fa-arrow-right`. Pro and Brand Icons from Font Awesome are supported. - - **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the `docs.yml` file. - - **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). + The icon to be used in the button. This icon will appear to the **right** of the text content. + + By default, the `rightIcon` for a `filled` button is set to `arrow-right`. diff --git a/fern/products/docs/pages/navigation/overview.mdx b/fern/products/docs/pages/navigation/overview.mdx index 4c3f2c758..3acb1e4c1 100644 --- a/fern/products/docs/pages/navigation/overview.mdx +++ b/fern/products/docs/pages/navigation/overview.mdx @@ -199,62 +199,27 @@ navigation: ## Sidebar icons -Add icons next to sections and pages using the `icon` key. Icons support three formats: +Add icons next to sections and pages using the `icon` key. -- **Font Awesome icons**: Use icon names like `fa-regular fa-home`. Pro and Brand Icons from Font Awesome are supported. -- **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the YAML file where the icon is declared. -- **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). - -### Font Awesome icons + {/* */} -```yaml Example navigation config with Font Awesome icons +```yaml Example config with different icon files {3, 6, 9} navigation: - section: Home - icon: fa-regular fa-home + icon: fa-regular fa-home # Font Awesome icon contents: - - page: My page - icon: fa-regular fa-file - path: ./pages/my-page.mdx + - page: Introduction + icon: ./assets/icons/intro-icon.svg # Custom image file + path: ./pages/intro.mdx + - page: Custom Features + icon: "" # Inline SVG + path: ./pages/custom.mdx - api: API Reference icon: fa-regular fa-puzzle ``` {/* */} -### Custom image files - -To use custom image files as icons, upload your image files to your docs assets folder, then reference them using relative paths. Paths are resolved relative to the YAML file where the icon is declared. - -{/* */} -```yaml Example navigation config with custom image icons -navigation: - - section: Products - icon: ./assets/icons/products-icon.svg - contents: - - page: Product A - icon: ./assets/icons/product-a.png - path: ./pages/product-a.mdx - - page: Product B - icon: ./assets/icons/product-b.png - path: ./pages/product-b.mdx -``` -{/* */} - -### Inline SVG icons - -You can also provide inline SVG strings directly in your configuration. Wrap the SVG in quotes to ensure proper YAML parsing. - -{/* */} -```yaml Example navigation config with inline SVG icons -navigation: - - section: Custom Section - icon: "" - contents: - - page: Custom Page - path: ./pages/custom-page.mdx -``` -{/* */} - ## Links You can add a link to an external page within your sidebar navigation with the following configuration: @@ -277,11 +242,9 @@ navigation: ## Tabs -Within the navigation, you can add `tabs`. Tabs are used to group sections together. The example below shows tabs for `Help Center`, `API Reference`, and an external link to `Github`. Each tab has a `title` and `icon`. Icons support three formats: +Within the navigation, you can add `tabs`. Tabs are used to group sections together. The example below shows tabs for `Help Center`, `API Reference`, and an external link to `Github`. Each tab has a `title` and `icon`. -- **Font Awesome icons**: Use icon names like `puzzle` or `fa-solid fa-puzzle`. [Browse the icons available](https://fontawesome.com/icons) from Font Awesome. Pro and Brand Icons are supported. -- **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the YAML file where the icon is declared. -- **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). + {/* */} @@ -290,13 +253,13 @@ Within the navigation, you can add `tabs`. Tabs are used to group sections toget tabs: api: display-name: API Reference - icon: puzzle + icon: puzzle # Font Awesome icon help: display-name: Help center - icon: home + icon: ./assets/icons/help-icon.svg # Custom image file github: display-name: GitHub - icon: brands github + icon: brands github # Font Awesome icon href: https://github.com/fern-api/fern navigation: diff --git a/fern/products/docs/pages/navigation/products.mdx b/fern/products/docs/pages/navigation/products.mdx index 3bc9545e4..f0f259f3a 100644 --- a/fern/products/docs/pages/navigation/products.mdx +++ b/fern/products/docs/pages/navigation/products.mdx @@ -57,6 +57,7 @@ navigation: ``` + ```yaml tabs: api: @@ -90,65 +91,33 @@ tabs: To define a product, add an item to the `products` list in `docs.yml`, specifying the `display-name` and `path`. -The optional parameters are: `image`, `icon`, `subtitle`, `slug`, and `versions`. - -If you provide both an `image` and an `icon`, the `image` will take precedence. - -### Product icons - -Product icons support three formats: - -- **Font Awesome icons**: Use icon names like `fa-solid fa-leaf`. Pro and Brand Icons from Font Awesome are supported. -- **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the `docs.yml` file. -- **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). - -#### Font Awesome icons - - -```yaml -products: - - display-name: Product A - path: ./products/product-a.yml - icon: fa-solid fa-leaf - slug: product-a - subtitle: Product A subtitle -``` - - -#### Custom image files - -To use custom image files as product icons, upload your image files to your docs assets folder, then reference them using relative paths. Paths are resolved relative to the `docs.yml` file. - - -```yaml -products: - - display-name: Product A - path: ./products/product-a.yml - icon: ./assets/icons/product-a-icon.svg - slug: product-a - subtitle: Product A subtitle - - display-name: Product B - path: ./products/product-b.yml - icon: ./assets/icons/product-b-icon.png - slug: product-b - subtitle: Product B subtitle -``` - - -#### Inline SVG icons - -Wrap the SVG in quotes to ensure proper YAML parsing. - - -```yaml -products: - - display-name: Product A - path: ./products/product-a.yml - icon: "" - slug: product-a - subtitle: Product A subtitle -``` - +The optional parameters are: `image`, `icon`, `subtitle`, `slug`, and `versions`. If you provide both an `image` and an `icon`, the `image` will take precedence. + + + + + + + ```yaml maxLines=5 + products: + - display-name: Product A + path: ./products/product-a.yml + icon: fa-solid fa-leaf # Font Awesome icon + slug: product-a + subtitle: Product A subtitle + - display-name: Product B + path: ./products/product-b.yml + icon: ./assets/icons/product-b-icon.svg # Custom image file + slug: product-b + subtitle: Product B subtitle + - display-name: Product C + path: ./products/product-c.yml + icon: "" # Inline SVG + slug: product-c + subtitle: Product C subtitle + ``` + + diff --git a/fern/snippets/icons.mdx b/fern/snippets/icons.mdx new file mode 100644 index 000000000..4e8e3fac2 --- /dev/null +++ b/fern/snippets/icons.mdx @@ -0,0 +1,4 @@ +Icons support three formats: + - **Font Awesome icons**: Use icon names like `fa-solid fa-rocket`. Pro and Brand Icons from Font Awesome are supported. + - **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/my-icon.svg` or `../assets/icons/my-icon.png`). Paths are relative to the `docs.yml` file. + - **Inline SVG**: Provide an SVG string wrapped in quotes (e.g., `"..."`). \ No newline at end of file