chakra-ui / chakra-ui-vue

⚡️ Build scalable and accessible Vue.js applications with ease.

Home Page:https://vue.chakra-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unrenderable Icons with FontAwesome Pro Duotone

dhazelett opened this issue · comments

Describe the bug
When attempting to load @fortawesome/pro-duotone-svg-icons icons, only half the icon renders, and raises: Error: <path> attribute d: Expected path command, "….06 0 0 0 64 64z,M396.8 288h-8.3…". in the console

To Reproduce
Basic Vue2 install via vue create project & vue add chakra-ui

import Chakra from '@chakra-ui/vue';
import { faUsers } from '@fortawesome/pro-duotone-svg-icons';

Vue.use(Chakra, {
  iconPack: 'fa',
  iconSet: { faUsers },
})

<c-icon name="users" />

Expected behavior
Both parts of the svg should render

Screenshots
This is how it's currently rendering
image

This is what it should look like
image

Additional context
The error appears in utils/icons, specifically here: https://github.com/chakra-ui/chakra-ui-vue/blob/develop/packages/chakra-ui-core/src/utils/icons.js#L15

I've just discovered this and will fork and make a PR likely tomorrow morning, if someone doesn't beat me to it.

I'll be closing this issue as the PR linked fixes it. If that's not the case, feel free to reopen it :)