Very simple svg with empty circle ends up being filled

[dahei]

I have this simple svg:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12.0006" r="9.05303" stroke="#303A4D" stroke-width="1.89394"/>
</svg>

File:

after running it through fantasticon it ends up like this:

Where it actually should not be filled and look like that:

Any idea what I'm doing wrong here?

[screaming-snake-case]

This happens because you have provided a circle shape with a stroke.
Fantasticon ignores all strokes and uses the shape as a character.
Also as discussed in #537, you should not provide the svg with a height and a width.

In your case this means you should change the stroke of the circle into a single shape.
If you do this it should work fine.

I have already modified your svg for you:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12,22C6.5,22,2,17.5,2,12C2,6.5,6.5,2,12,2c5.5,0,10,4.5,10,10C22,17.5,17.5,22,12,22z M12,3.9 c-4.5,0-8.1,3.6-8.1,8.1c0,4.5,3.6,8.1,8.1,8.1s8.1-3.6,8.1-8.1C20.1,7.5,16.5,3.9,12,3.9z"/>
</svg>

[stephenquan]

As per @screaming-snake-case by changing it your SVG to use shape fills is the key. This answer uses defines the shape using a shape defined by semi circle arcs. The outer semi circle arc are declared clockwise whereas the inner semi circle arcs are declared counter-clockwise creating a hole:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path stroke="none" fill="black" d="
m 12 12
m -9.05303 0
a 9.05303 9.05303 0 0 1 18.10606 0
a 9.05303 9.05303 0 0 1 -18.10606 0
h 1.89394
a 7.15909 7.15909 0 0 0 14.31818 0
a 7.15909 7.15909 0 0 0 -14.31818 0
z
"/>
</svg>