search

stephenhutchings / microns

The universal icon set for user interfaces.
https://s-ings.com/projects/microns-icon-font/
Other
104 stars 10 forks source link

scss version #6

Closed marban closed 4 years ago

marban commented 4 years ago

Could you add a scss version in order to override the path for the font src?

stephenhutchings commented 4 years ago

Yep that's doable.

stephenhutchings commented 4 years ago

@marban does something like this make sense?

$microns-font-name: "microns" !default;
$microns-font-file: "microns" !default;

@font-face {
  font-family: $microns-font-name;
  font-style: normal;
  font-weight: normal;
  src: url("#{$microns-font-file}.eot");
  src: url("#{$microns-font-file}.eot?#iefix") format("embedded-opentype"),
       url("#{$microns-font-file}.woff2") format("woff2"),
       url("#{$microns-font-file}.woff") format("woff"),
       url("#{$microns-font-file}.ttf") format("truetype"),
       url("#{$microns-font-file}.svg") format("svg");
}
marban commented 4 years ago

Awesome! Btw, I think .mu-warn and .mu-info look very similar; perhaps turn the former intro a triangle?

stephenhutchings commented 4 years ago

@marban v1.0.7 now includes a scss file for overriding the font name and location, so I'll close this issue now. Let me know if this isn't working for you.

I'm not too concerned about the similarity of those icons – I don't expect them to be seen in the same context. I would normally present a warning with other visual cues so that its importance is easily distinguished from other content. I also think that optically, a triangular container can be difficult to get right. The tight internal top space and awkward vertical alignment with text are my main concerns, so I've gone for consistency here over convention. That being said, I'm all ears if you disagree on any of these points.

marban commented 4 years ago

I think the scss is missing in package.json.

stephenhutchings commented 4 years ago

@marban my mistake. That's fixed now.