feathericons / feathericons/feather

[Bug] Irregular Scaling Across Browsers

Open
#248 4 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
26k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

To start, great job on creating this icon set 🔥

I noticed that every icon has a hard-coded `width` and `height` attribute, in addition to a `viewBox` attribute. By stating the `width` and `height` attributes, the SVG won't behave consistently across browsers when combined with size attributes defined through CSS, or when wrapped within an element with CSS size attributes.

For an example of this in action, see this page for comparing the effect of specifying the different SVG attributes in combination with CSS: http://www.boogdesign.com/examples/svg/svg-as-image.html [[Credit]](https://stackoverflow.com/a/9792254/8702705) Make sure to check it out in different browsers, specifically IE! (I'm not talking IE4, people. Try IE11.)

Another great example for comparing the effects of different SVG attributes, specifically speaking about SVGs within `img` tags and fluid layouts, is this Codepen: https://codepen.io/tomByrer/pen/qEBbzw?editors=110

If your intention was to preserve the aspect ratio of the SVG, then you can use the `preserveAspectRatio: xMidYMid meet;` attribute (this is an example that keeps the SVG in the center of the container). For examples on how this attribute effects SVG rendering, see here: https://codepen.io/giodif/pen/VYpaeo

Last, I went over to [SVGO](https://jakearchibald.github.io/svgomg/) and dropped in the Clipboard SVG icon from Feather (after removing the whitespace to make it a fair comparison to the current icon format you have on NPM) and then dropped in the same icon, but with the `width` and `height` attributes removed, and it looks like you'll shave 1.3%/3.18% (gzipped) off the size of just this icon 😉

**My proposition:**
1. Remove the `width` and `height` attributes, and keep only the `viewBox` attribute. (This is the only size attribute that provides consistent scaling across browsers.)
2. Add to the docs that the user can add the `preserveAspectRatio: xMidYMid meet;` attribute (or a similar value) to preserve the aspect ratio of the icon.

Contributor guide

Open the contributing guide

Research direction

Inspect how the project generates or stores its icon SVGs and where the package documentation describes SVG sizing. Compare an icon with and without width and height attributes across the browser examples linked in the issue; done means the icons scale consistently and the documentation explains preserveAspectRatio usage.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.