Ability to use vue-fontawesome library with custom SVG path

[vbaulac]

Hello,

I am kind of re-opening this issue (#93), that was closed 2 years ago. The neat workaround described by Joshua doesn't work anymore.

The workaround :

It's the same code you would use in the FontAwesome JavaScript library elsewhere. Define the icon using their format {prefix, name, icon: [width, height, [ligatures], unicode, path]}. Then add that object to your library.

/* icons.js */
export const faMyIcon= { prefix: 'fac', iconName: 'my-icon', icon: [512, 512, [], null, "{your-merged-path-data}"] };

/* app.js */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faMyIcon } from "@app/icons"
library.add(faMyIcon)

But now, the prefix & iconName are strictly defined. So we can't add an icon to the library with "fac" prefix and "foobar" iconName.

export type IconPrefix = "fas" | "fab" | "far" | "fal" | "fad";

What would be the clean way to use one of my custom SVG icon, using the vue-fontawesome library ?

Thanks in advance

[Aareksio]

Hi! I was looking for official method to add custom SVG in my vue project and stumbled onto this open issue. After a little more research I found the official guide along with TypeScript example. I am positive OP have moved on long time ago, but for anyone else fighting their tools interested, hope this helps!

[HassanZahirnia]

@Aareksio I'm looking for a way to import/add svg files as inline so I can change their color and style them. Do you happen to know or have a way to do this? I wish I could just import all my svg files that are located in resources/svg and use them where ever I want.