Vuetify 在现有组件中使用字体很棒的图标

Question

我正在尝试按照 vuetify docs 上的说明集成 font-awesome pro。

    Vue.use(Vuetify, {
        iconfont: 'fa',
        icons: {
            'dropdown': 'fal fa-arrow-down',
        }
    })

现有组件不采用这些设置。我自己没有创建的 v-icon 组件仍在分配 material-icons 类。例如，<v-select> 中嵌套的图标显示为：

<i class="v-icon material-icons theme--light">arrow_drop_down</i>

我预计在icons.dropdown 下传递一个新值会改变<v-select> 中的图标。这不是它应该如何工作的吗？

Answer 1

这可能是因为已经安装了 Vuetify 插件。再次调用Vue.use 不会有任何作用。

如果您自己调用它两次，那么解决方案很简单。但是，可能不是您第一次调用它。下面的示例使用 Vuetify 的 CDN 构建，它会自动安装，无需任何配置选项。

我实际上并没有包含 FontAwesome，但我使用了一些 CSS 来显示一个红色方块来代替箭头，以表明它正在发挥作用。

new Vue({
  el: '#app',
  data () {
    return {value: 'Red'}
  }
})

.fa-arrow-down {
  background: red;
  height: 8px;
  width: 8px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/vuetify@1.5.14/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script>
(function() {
  const vueUse = Vue.use
  
  Vue.use = function (vuetify) {
    Vue.use = vueUse
    
    Vue.use(vuetify, {
      iconfont: 'fa',
      icons: {
        'dropdown': 'fal fa-arrow-down',
      }
    })
  }
})()
</script>
<script src="https://unpkg.com/vuetify@1.5.14/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-select v-model="value" :items="['Red', 'Green', 'Blue']"></v-select>
  </v-app>
</div>

可以在源码第19-21行看到自动安装：

https://github.com/vuetifyjs/vuetify/blob/v1.5.14/packages/vuetify/src/index.ts

在上面的示例中，我在包含 Vuetify 之前通过挂钩 Vue.use 解决了这个问题。是的，这是一个巨大的 hack，但它允许我插入相关的配置对象。

另一种方法是通过直接修改$vuetify 来单独插入图标。

Vue.prototype.$vuetify.icons.dropdown = 'fal fa-arrow-down'

尽管您必须为每个单独的图标执行此操作，但我认为没有等效于传递 iconfont 来设置它们的方法。

Vue.prototype.$vuetify.icons.dropdown = 'fal fa-arrow-down'

new Vue({
  el: '#app',
  data () {
    return {value: 'Red'}
  }
})

.fa-arrow-down {
  background: red;
  height: 8px;
  width: 8px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/vuetify@1.5.14/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@1.5.14/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-select v-model="value" :items="['Red', 'Green', 'Blue']"></v-select>
  </v-app>
</div>

如果您不确定 Vuetify 是否已经安装，有多种方法可以找到。可能最简单的方法是检查Vue.prototype.$vuetify 是否已经存在。或者，您可以在调用Vue.use 之前输入debugger 语句，然后进入代码查看会发生什么。如果 Vuetify 已经安装，你会很快看到它退出。