lucide icon indicating copy to clipboard operation
lucide copied to clipboard

Icons become unusable in safari due to stroke not scaling

Open annaruble opened this issue 2 months ago • 3 comments

Package

  • [X] lucide
  • [ ] lucide-angular
  • [ ] lucide-flutter
  • [ ] lucide-preact
  • [ ] lucide-react
  • [ ] lucide-react-native
  • [ ] lucide-solid
  • [ ] lucide-svelte
  • [ ] lucide-vue
  • [ ] lucide-vue-next
  • [ ] Figma plugin
  • [X] source/main
  • [ ] other/not relevant

Version

0.465.0

Can you reproduce this in the latest version?

  • [X] Yes
  • [ ] No

Browser

  • [ ] Chrome/Chromium
  • [ ] Firefox
  • [X] Safari
  • [ ] Edge
  • [ ] iOS Safari
  • [ ] Opera
  • [ ] Other/not relevant

Operating system

  • [ ] Windows
  • [ ] Linux
  • [X] macOS
  • [ ] ChromeOS
  • [ ] iOS
  • [ ] Android
  • [ ] Other/not relevant

Description

When using the browser zoom in Safari with Lucide icons, the stroke width doesn't appear to scale with the size of the icon, which makes things appear incredibly distorted. This is happening both with my implementation of Lucide icons, as well as with your main site. https://lucide.dev/icons/ image image

Steps to reproduce

  1. Open up Safari & view icons
  2. Zoom in the browser window (cmd +)
  3. See the icons scaling poorly

Checklist

  • [X] I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

annaruble avatar Dec 10 '24 16:12 annaruble