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

Question

我正在尝试按照vuetify 文档中的说明来集成 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

在上面的示例中，我通过Vue.use在包含 Vuetify 之前进行连接来解决该问题。是的，这是一个巨大的黑客，但它允许我插入相关的配置对象。

另一种方法是通过直接修改来单独插入图标$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已经存在。debugger或者，您可以在调用之前添加一条语句Vue.use，然后单步执行代码以查看会发生什么。如果 Vuetify 已经安装，你会看到它很快就会退出。