/fa-svg

Fontawesome SVG for Vue 3

Primary LanguageTypeScript

Fontawesome icon to inline SVG for Vue.js

Vue component for Fontawesome icon.

When use on vue 2(2.7+), should import from 'fa-svg-vue/vue2'

This component uses direct imported icons, supports tree-shaking. Icon renders as <svg> tag. Main element is <svg>, all attributes are inherited.

Props

  • icon: IconDefinition, imported from fontawesome icons.

Attributes's default

These attributes has default value, can override by set attribute.

  • fill: 'currentColor' (SVG)
  • role: 'img' (ARIA)
  • viewBox: set as icon property. Override this value is not recommended. (SVG)

Usage

In SFC .vue file,

<script lang="ts" setup>
import faSvg from 'fa-svg-vue'
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons'
import { faFontAwesome }  from '@fortawesome/free-regular-svg-icons'
</script>

<template>
  <faSvg :icon="faThumbsUp" width="64"/>
  <faSvg :icon="faFontAwesome" width="64"/>
</template>

By global component registration

In your main script,

import { createApp } from 'vue'
import faSvg from 'fa-svg-vue'

const app = createApp(/* your app options */)
app.component("faSvg", faSvg);

Usable icons

Related