4 ms·
I recently started removing Font Awesome from a couple of projects and replaced the icons with inline SVG. This article at css-tricks.com is invaluable for lear
by pseudosavant 6y ago
I recently started removing Font Awesome from a couple of projects and replaced the icons with inline SVG. This article at css-tricks.com is invaluable for learning how to deal with SVGs as they don't behave like rasterized images.
https://css-tricks.com/scale-svg/ https://css-tricks.com/scale-svg/
Microsoft has a great "Fluent UI" icon pack in SVG: https://github.com/microsoft/fluentui-system-icons/blob/master/icons.md https://github.com/microsoft/fluentui-system-icons/blob/mast...
- jackson1442 6y agoIBM has some nice ones in Carbon as well: https://www.carbondesignsystem.com/guidelines/icons/library/ https://www.carbondesignsystem.com/guidelines/icons/library/
- pseudosavant 6y agoThat looks like a great icon set. Flexible Apache 2.0 license.
- system2 6y agoI use FA for most clients. Is there a problem with FA icon scaling?
- pseudosavant 6y agoNot that I know of. SVGs can just be a bit tricky to scale. At least compared to a PNG/JPEG. The two main keys to making it work is understanding `viewBox` and `preserveAspectRatio`. viewBox is what sets what part of the SVG should be within the view. On a simple SVG that is 24x24 pixels it is just `viewBox="0 0 24 24"`. Changing it to "0 0 20 20" would crop 4 pixels off the right and bottom of the SVG. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/v... https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/p...