search

microsoft / fluentui-system-icons

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.
https://aka.ms/fluentui-system-icons
MIT License
5.91k stars 516 forks source link

Icon size dose not match #477

Closed ghost closed 2 years ago

ghost commented 2 years ago

When I use the icon from @fluentui/svg-icons/icons/info_12_regular.svg. <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" style="width: 12px; height: 12px;"><path d="M5.5 6.5a.5.5 0 011 0V8a.5.5 0 01-1 0V6.5zM6 3.75a.75.75 0 100 1.5.75.75 0 000-1.5zM1 6a5 5 0 1110 0A5 5 0 011 6zm5-4a4 4 0 100 8 4 4 0 000-8z"></path></svg>

The svg size is 12 12, but the real icon size is 1010. Is there anyone who knows how to do this ?

the size about viewbox image

the size about path image

What should I do if I want a fully filled svg?

spencer-nelson commented 2 years ago

Fluent System Icons are purposely built with affordance around the standard icon such that they can keep correct visual weighting in the exact same space as other icons that might have modifiers or need slightly different details, and this is what you're seeing with the Info 12 Regular icon. If the UI is designed with the icons you should be able to get pixel perfect implementation without having to play with the viewbox. However, if you are using an older system which didn't afford this, you can just tweak the viewbox to be 2 2 12 12 and make sure you're not clipping to the viewbox to fit the older system. In the case of this icon, where none of the visible content goes outside a 10x10 box you don't have to worry about clipping, but other icons that have modifiers will likely need to keep that in mind. Note that this can have knock-on effects depending on how your implementation handles relative positioning, but in simpler cases isn't problematic. Alternately, if you want something that is visually 12x12, that's the size of the filled path for the 16x16 icon (because of the 2px affordance)