question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error Using Duotone icons

See original GitHub issue

Describe the bug We are trying to use the duotone icons ‘sortUp’ and ‘sortDown’, but our console is throwing errors when it appears to try to render the icon. We are running this in Storybook to build our components.

vue.esm.js:6790 Error: <path> attribute d: Expected path command, "…05-4.4-41 17-41z,M24.05 183.05l1…".

image

It does appear to render the darkened element, but not the lightened svg. image

Reproducible test case Include a URL (codepen.io, jsfiddle.net, Git repository, codesandbox.io, stackblitz.com, etc.) that demonstrates the problem. Component:

    <font-awesome-icon
      :icon="['fad', 'sort-down' ]"
    />

config.js

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { faShieldCheck } from '@fortawesome/pro-solid-svg-icons';
import { faSortUp, faSortDown } from '@fortawesome/pro-duotone-svg-icons';

library.add(fas,
  faShieldCheck,
  faSortUp,
  faSortDown,
  );
dom.watch();
Vue.component('font-awesome-icon', FontAwesomeIcon);

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
robmadolecommented, Feb 5, 2020

@Yodablues try upgrading those dependencies first, they are a tad old.

0reactions
robmadolecommented, Feb 6, 2020

Fantastic. Glad it was an easy fix.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Issue rendering Font Awesome Duotone icons #4524 - GitHub
When rendering html containing Font Awesome Duotone icon the :after css content (typically the lighter back layer using unicode U+10FXXX) ...
Read more >
Duotone <i> tags display wrong with &nbsp - Drupal
When using Duotone icons in CKEditor with the "i" tag, the icon displays incorrectly or not at all. This is because CKEditor removes...
Read more >
Duotone Icons | Font Awesome Docs
Duotone icons use the same syntax Font Awesome icons, and you can reference them like any other icon using their specific style prefix...
Read more >
Fixed - Duotone icons | XenForo community
XF Bug Bot said: Thank you for reporting this issue. It has now been resolved and we are aiming to include it in...
Read more >
angular - Uncaught Error: Property icon is required for fa-icon ...
Uncaught Error: Property icon is required for fa-icon/fa-duotone-icon ... my test case but still printing lots of logs in the console.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found