Bug: Bitcoin Icon broken on second React import
cstenglein opened this issue · 6 comments
When importing the svg like this
import { ReactComponent as BitcoinIcon } from '../../../assets/bitcoin-circle.svg';
<BitcoinIcon />
Everything is fine at first; when adding it like this in another component, then it is broken only in one component.
First import:
Second import:
The only things I changed with the icon is the "fill" property so it adheres to the color I set on the element as well as the height, width & viewport so it is centered with the other icons. See my adjustments here: https://github.com/cstenglein/raspiblitz-web/blob/master/src/assets/bitcoin-circle.svg
These changes don't affect the outcome though, since the original icon shows the same behaviour.
Do you have an idea what could be causing this?
Looks like this is a React issue: facebook/create-react-app#5723
Still confused why this doesn't happen with only that icons and not e.g. with HeroIcons
Mmh I'm not too sure. That icon for some reason had a fill that was not being shown. I just removed it and re-uploaded the SVG - try that!
It may have been an issue with the icons (related to different stroke alignment options in Figma and SVG). I pushed an update to the repo. Could you please see if those work out for you?
And thanks for reporting the problem. This project is new and we're just working through those initially inevitable bugs.
@GBKS @Bosch-0 thanks for the fast response. No worries, really appreciate your efforts and the project 👍
The change from @Bosch-0 unfortunately didn't fix it, but @GBKS change did in deed fix the problem! 🎉 Thank you!
Now another issue popped up: the icon now has a weird triangle in the upper part of the B, see https://github.com/BitcoinDesign/Bitcoin-Icons/blob/main/svg/outline/bitcoin-circle.svg
I also looked through the other icons which changed in #36 but this is only present in the bitcoin-circle outline svg
Thank again for reporting. I did some major clean-up on that particular icon and re-exported it. Looks good in my browser and the SVG code is also much cleaner, could you please take another look?