feathericons / feathericons/feather
[Bug] Irregular Scaling Across Browsers
- 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
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