docs icon indicating copy to clipboard operation
docs copied to clipboard

Custom SVG as icon prop in sidebar nav

Open lifeinchords opened this issue 8 months ago • 2 comments

Hi there,

I love Mintlify!

I'm trying to add the OpenAI logo as a nav bar item icon. I think Font Awesome are still working on adding it to the library, so wanted to add the SVG myself.

Are custom SVG icons in the nav supported?

I see a SVG icon via a card prop docs/integrations/analytics.mdx as described in the docs, but couldn't find any examples for inserting it into the nav via the mdx header like:

---
title: 'Open AI'
description: ''
icon: "<svg><path d='M11.9442 13.2715L4.12777 2.06738L1.26172 15.095L11.9442 13.2715Z'
    stroke='#888888'/></svg>"
---
# test SVG path, not the actual logo SVG ^

The wierd part is when I try this, I see some SVG in the DOM but it renders as a square like this:

Image

I thought maybe the SVG I'm using is bad, so tried a very simple path instead. This is the rendered el:

<svg class="h-4 w-4 bg-primary dark:bg-primary-light" style="-webkit-mask-image:url(https://mintlify.b-cdn.net/v6.6.0/regular/{<svg><path d='M11.9442 13.2715L4.12777 2.06738L1.26172 15.095L11.9442 13.2715Z' stroke='#888888'/></svg>}.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-image:url(https://mintlify.b-cdn.net/v6.6.0/regular/{<svg><path d='M11.9442 13.2715L4.12777 2.06738L1.26172 15.095L11.9442 13.2715Z' stroke='#888888'/></svg>}.svg);mask-repeat:no-repeat;mask-position:center"></svg>

Lastly, I found global settings to change the font library, but I'm not sure how to use it https://mintlify.com/docs/settings/global#param-icons I'm using FA everywhere else in my docs, and would prefer not to switch to another font lib.

Am I missing anything?

lifeinchords avatar Feb 25 '25 01:02 lifeinchords