Font-Awesome
Font-Awesome copied to clipboard
Bug: fa-solid fa-hourglass-clock render issue
Bug description
The fa-solid fa-hourglass-clock
has rendering issue when imported from the NPM package like so. I don't believe the Vue wrapper is causing this, behaviour hence I'm reporting it here.
import Vue from "vue";
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faHourglassClock } from "@fortawesome/pro-solid-svg-icons"; library.add(faHourglassClock);
Vue.component('font-awesome-icon', FontAwesomeIcon);
However if I navigate to the the fontawesome website, and grab the SVG code and import it manually as a custom icon it works fine:
https://fontawesome.com/icons/hourglass-clock?f=classic&s=solid
import Vue from "vue";
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
export const faHourglassClock = {
prefix: 'fas',
iconName: 'hourglass-clock',
// I've trucated the SVG code since it's a pro icon and this SVG is behind a paywall
// But it's simply the value inside `<path>`
icon: [576,512,[],"e41b","M0 ..."]
};
library.add(faHourglassClock);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Reproducible test case
No response
Screenshots
Icon when imported from npm package:
Icon when imported manually:
Font Awesome version
v6.4.2
Serving
Self-hosted
Implementation
SVG+JS
Browser and Operating System
Firefox Developer 123.0b6 (64-bit) on Linux
Web bug report checklist
- [ ] I have included a test case because my odds go way up that the team can fix this when I do
- [X] I have searched for existing issues and to the best of my knowledge this is not a duplicate
@Dmitrev have you tried upgrading to 6.5.1? This may have been an icon we updated since 6.4.2.
Hi @robmadole , I'll try and report back next week.
Hi @robmadole, thanks I can confirm that this has indeed been fixed in 6.5.1!
closing the issue.