CODEWITHSUNDEEP
svgfonts
Kelderic
Kelderic

Reputation: 6717

SVG Stroke Not Appearing When Converting to Icon Font

Goal

I am trying to create an SVG icon to add to an icon font file.

Progress

I have created an SVG icon, which appears perfectly inline and as an img

Problem

When I upload it to add to my icon font, using both Icomoon and Fontastic, all fills appear, but all strokes are missing. I've run the code through the W3C validator and gotten no issues, and I'm wondering if icon fonts have more rules that plain SVG does have?

enter image description here

Code

<svg version="1.1" width="51" height="51" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <polygon points="0,5.5 31,0 31,50 0,44" />
  <ellipse cx="15" cy="25" rx="7.5" ry="11" fill="transparent" stroke="white" stroke-width="5" />
  <path d="M31 10.5 L48.5 10.5 L49 11 L50 12.5 L35 23 L31 20" stroke-width="2" fill="white" stroke="black" />
  <path d="M52 12 L35 23 L31 20 L31 24 L35 27 L50 16.5" fill="black" />
  <path d="M31 24 L35 27 L50 16.5 L50 35 L49.5 37 L47.5 37.5 L31 37.5" stroke-width="2" fill="white" stroke="black" />
</svg>

Upvotes: 2

Views: 17007

Answers (1)

rfornal
rfornal

Reputation: 5122

From Iconmoon ...

  • Strokes get ignored by the app. You can convert them to fills.
  • Unite/combine your fills.
  • All colors are interpreted as black. Instead of using the white color for making holes, subtract the foreground shape from the background shape.

These seem to be pretty strict rules you will have to follow.

Source ... https://icomoon.io/docs.html

Upvotes: 9

Related Questions