FortAwesome / vue-fontawesome

Font Awesome Vue component
https://fontawesome.com
MIT License
2.39k stars 132 forks source link

How to use unicode with vue-fontawesome? #386

Closed apmyp1990 closed 1 year ago

apmyp1990 commented 2 years ago

We are migrating a php web app to vue. In the app we are using the unicodes of the icons - store in the db. To use font-awesome perfectly with vue, we followed the guide in the docs to set it up, but unfortunately there is nothing mentioned about the usage of unicodes with vue.

I tried some variations, but it is not working - telling me the icon could not be found.

Is there a way to use the present unicodes with vue? Or, if not, is there a possibility to get the icon names by unicode?

Thanks in advance!

jasonlundien commented 2 years ago

There is currently not a way to use unicode values within our Vue components... that would be an interesting enhancement though.

The way to get the unicode values with the icon names is with our GraphQL API

Here is the query I created to get the unicode values and the icon name (icon name being the id):

{
  release(version: "6.x") {
      pro
      free
    }
    icons{
      id
      unicode
    }
  }
}

example output:

{
  "data": {
    "release": {
      "iconCount": {
        "free": 2016,
        "pro": 17271
      },
      "icons": [
        {
          "id": "0",
          "unicode": "30"
        },
        {
          "id": "00",
          "unicode": "e467"
        },
        ...
        {
          "id": "less-than-equal",
          "unicode": "f537"
        },
        {
          "id": "life-ring",
          "unicode": "f1cd"
        },
        ...
apmyp1990 commented 1 year ago

Thanks for the answer. There are only 4 icons stored in db which we are using, so I just added a new column and stored the names too.

jasonlundien commented 1 year ago

@apmyp1990 --

I am going to go ahead and close this issue. If you feel as if there needs to be additional discussion or an issue just let us know.