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 <[email protected]>

Author: devin-ai-integration[bot]

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., `<svg>...</svg>`).
+  - **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., `"<svg>...</svg>"`).
 </ParamField>
 
 <ParamField path="rightIcon" type="string" required={false} toc={true}>
   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., `<svg>...</svg>`).
+  - **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., `"<svg>...</svg>"`).
 
   By default, the `rightIcon` for a `filled` button is set to `arrow-right`.
 </ParamField>

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., `<svg>...</svg>`).
+- **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., `"<svg>...</svg>"`).
 
 ### 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.
 
 {/* <!-- vale off --> */}
 ```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
 ```
 {/* <!-- vale on --> */}
 
 ### 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.
 
 {/* <!-- vale off --> */}
 ```yaml Example navigation config with inline SVG icons
 navigation:
   - section: Custom Section
-    icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/></svg>
+    icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z'/></svg>"
     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., `<svg>...</svg>`).
+- **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., `"<svg>...</svg>"`).
 
 <CodeBlock title="docs.yml">
 {/* <!-- vale off --> */}

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., `<svg>...</svg>`).
+- **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., `"<svg>...</svg>"`).
 
 #### Font Awesome icons
 
@@ -117,32 +117,34 @@ 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.
 
 <CodeBlock title="docs.yml">
 ```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
 ```
 </CodeBlock>
 
 #### Inline SVG icons
 
+Wrap the SVG in quotes to ensure proper YAML parsing.
+
 <CodeBlock title="docs.yml">
 ```yaml
 products:
   - display-name: Product A
     path: ./products/product-a.yml
-    icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/></svg>
+    icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z'/></svg>"
     slug: product-a
     subtitle: Product A subtitle
 ```
@@ -359,4 +361,4 @@ The dropdown menus for product and version selectors can be customized using the
       <img src="webflow-version-selector.avif" alt="Example of a styled version selector" />
     </Frame>
   </Tab>
-</Tabs>    
+</Tabs>