字体很棒的 SVG 图标不适用于 Vuetify

Posted 2023-02-23

【中文标题】字体很棒的 SVG 图标不适用于 Vuetify

【英文标题】：Font-awesome SVG icons not working with Vuetify

【发布时间】：2019-12-20 21:30:28

【问题描述】：

为什么这不是 FontAwesome SVG icons with Vuetify - how to use within v-icon/prepend-icon?

该问题显示了如何添加另一个图标并通过手动引用将其输出到组件中，而此问题 指的是预建组件中图标的变化 Vuetify 到 SVG 图标，无需手动覆盖 你的 Vue 组件，比如数据表的分页器。

我正在尝试在带有 Vuetify 的 Vue 项目中使用 font-awesome 的 SVG 图标，我已按照此处 Vuetify 安装页面上安装 SVG 字体包的指南进行操作

https://vuetifyjs.com/en/customization/icons#install-font-awesome-svg-icons

只包括他们指定的配置：

export default new Vuetify(
  icons: 
    iconfont: 'faSvg',
  ,
)

图标只是在组件中显示为文本，示例：

搜索图标

数据表的页脚

据我了解，主要问题是它应该更改预构建组件的图标，否则您每次使用它时都需要手动指定组件图标。

我的完整 Vuetify 设置文件

import Vue from "vue"
import Vuetify from "vuetify"
import  library  from "@fortawesome/fontawesome-svg-core"
import  fas  from "@fortawesome/free-solid-svg-icons"
import  FontAwesomeIcon  from "@fortawesome/vue-fontawesome"

Vue.component("font-awesome-icon", FontAwesomeIcon)
library.add(fas)

Vue.use(Vuetify)

export default new Vuetify(
  icons: 
    iconfont: "faSvg",
  ,
)

【问题讨论】：

FontAwesome SVG icons with Vuetify - how to use within v-icon/prepend-icon?的可能重复

@ibra 添加了关于为什么不一样的解释

【参考方案1】：

从 Vuetify 2.2.2 开始，这是本机支持的。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import  library  from '@fortawesome/fontawesome-svg-core'
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome'
import  fas  from '@fortawesome/free-solid-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons

Vue.use(Vuetify)

export default new Vuetify(
  icons: 
    iconfont: 'faSvg',
  ,
)

详情请见here

【参考方案2】：

我通过添加一个 dom wacher 获得了一半的成功。

import Vue from "vue";
import  library, dom  from "@fortawesome/fontawesome-svg-core";
import  FontAwesomeIcon  from "@fortawesome/vue-fontawesome";

import  fas  from "@fortawesome/free-solid-svg-icons";

import  far  from "@fortawesome/free-regular-svg-icons";

library.add(fas, far);

Vue.component("font-awesome-icon", FontAwesomeIcon);

dom.watch();

dom watcher 为图标拉取 svg。但不适用于其他组件，如数据表等

<v-icon>fa-sign-out-alt</v-icon>

对于那些图标，我必须手动定义每个值： https://vuetifyjs.com/en/customization/icons#using-custom-icons

import Vue from "vue";
import Vuetify from "vuetify/lib";
import "./fontawesome";

Vue.use(Vuetify);

export default new Vuetify(
  icons: 
    iconfont: "faSvg",
    values: 
      checkboxOn: "fas fa-check-square",
      checkboxOff: "fas fa-square",
      checkboxIndeterminate: "fas fa-minus-square",
      menu: "fas fa-bars"
    
  
);

我仍然无法让复选框与 svg 一起使用。当我点击它时它不会动态变化。

在这一点上，我将回到 webfonts。

我宁愿使用 SVG，因此非常感谢任何解决方案

【参考方案3】：

试试这个

import '@fortawesome/fontawesome-free/css/all.css'

【讨论】：

可以，但它不会以 SVG 格式输出图标