Using svg in components?

[ArtFlag]

Hi,

I'm trying to use an SVG as a bullet for my li's but to no avail.
My component's css module uses my SVG that's in my static/img folder like so:

.linklist li::marker {
  content: url('/img/bullet.svg');
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

With this, my SVG is found and turned into url(data:image/svg...). My inspector in Brave shows me the icon when I hover over the content property but... nothing shows up on my page.

If I use a PNG file in my content property also from static/img, my bullet appears.

What am I doing wrong with SVGs?

[Advait251206]

This is a subtle CSS + SVG rendering issue, not a Docusaurus-specific bug.

What’s happening in your case:

The SVG is correctly loaded (you can see it becomes a data URI), but it doesn’t render as a list marker.

That’s because ::marker has very limited support for content: url(...) with SVGs, and many browsers (including Chromium-based ones like Brave/Chrome) either:

• ignore SVG rendering in ::marker
• or render it but collapse its layout box to zero

---

❌ Why PNG works but SVG doesn’t

• PNG = raster image → always has intrinsic size → marker can render it
• SVG = vector + no guaranteed intrinsic box in ::marker
• ::marker is still inconsistent across browsers for complex content types

So:

SVG is loaded ✔ but not painted ❌

---

⚠️ Key limitation

You cannot reliably use:

li::marker {
  content: url('/img/icon.svg');
}

for SVG across browsers.

---

✅ Best solutions (recommended)

✅ Option 1 — Use ::before instead of ::marker (BEST)

This is the most stable approach.

.linklist li {
  list-style: none;
  position: relative;
  padding-left: 24px;
}

.linklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 16px;
  height: 16px;

  background: url('/img/bullet.svg') no-repeat center;
  background-size: contain;
}

✔ works with SVG
✔ works in all browsers
✔ fully controllable positioning

---

✅ Option 2 — Inline SVG (React/Docusaurus-friendly)

If you want maximum control:

import Bullet from '@site/static/img/bullet.svg';

<li>
  <img src={Bullet} alt="" width="16" height="16" />
  Item text
</li>

Or use it as a React component (if SVGR enabled):

import BulletIcon from '@site/static/img/bullet.svg';

<BulletIcon width={16} height={16} />

---

⚠️ Option 3 — Keep ::marker but avoid SVG

If you want native bullets:

li::marker {
  content: '●';
  color: red;
}

or use emoji / Unicode symbols.

---

🧠 Why ::marker is unreliable here

::marker is intentionally restricted:

• limited styling support
• inconsistent image rendering
• no layout control
• SVG often fails silently

Even modern specs still treat it as “minimal styling only”.

---

🚀 Recommended approach for Docusaurus

For documentation sites:

✔ Use ::before for custom bullets
✔ Use inline SVG for icons inside content
✔ Avoid relying on ::marker for images

---

✅ Summary

Your code is not “wrong” — it’s a browser limitation:

SVGs do not reliably render inside ::marker

Fix:

✔ replace ::marker → ::before
✔ use background-image instead

---

If this answer helped or pointed you in the right direction, I'd appreciate it if you could mark it as the accepted answer so it's easier for others with the same issue to find.

Also, if you found my contribution useful, I'd appreciate it if you could check out my GitHub profile, follow me, and star any repositories you find interesting.

GitHub: https://github.com/Advait251206