时间戳

首页 > 解决方案 > 使用 Font Awesome SVG 图标覆盖单个 Vuetify 图标

vue.js - 使用 Font Awesome SVG 图标覆盖单个 Vuetify 图标

问题描述

是否可以使用 Font Awesome svg 图标覆盖Vuetify 中的单个图标，而无需为每个图标编写自定义组件？

像这样的东西：？？？

import { svgPathData as envelopeSvg } from '@fortawesome/free-solid-svg-icons/faEnvelope'
import { svgPathData as questionCircleSvg } from '@fortawesome/free-solid-svg-icons/faQuestionCircle'


Vue.use(Vuetify)

const app = new Vue({
vuetify: new Vuetify({
    icons: {
        iconfont: 'md',
        values: {
            email: envelopeSvg,
            question_circle: questionCircleSvg
        }
    },
...
})

更新 我有点让上面的代码工作了，但现在我当前的问题是 v-icon 组件使用错误的视图框大小呈现。

<font-awesome-icon class="icon" icon="envelope" /> //viewBox="0 0 512 512"
<v-icon class="icon">email</v-icon> //viewBox="0 0 24 24"

标签： vue.jssvgvuetify.jsfont-awesome

解决方案

您需要添加正确的方法

https://vuetifyjs.com/en/features/icon-fonts/#font-awesome-5-icons

yarn add @fortawesome/fontawesome-free -D


import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'fa',
  },
})

更新：根据Git 问题

您需要安装所有需要的字体或添加指向 CDN 的链接，iconfont 仅指定哪个图标集将用于默认 Vueitfy 图标（例如 v-select 中的箭头等）

<v-icon>mdi-user</v-icon> // MDI will be used
<v-icon>user<v-icon> // Material Icons will be used
<v-icon>fas fa-whatever<v-icon> // FA will be used

推荐阅读