找不到一个或多个图标 vuejs 应用程序警告

Question

我无法修复警告：

Could not find one or more icon(s) {prefix: "far", iconName: "square"} {}" (screenshot attached) The warning pops when I change the value of the 'typeOfAreaClass' or select 'safe area' from the "areaClass"

这是带有 'square ' 图标的 v-select 菜单的屏幕截图：

我试过安装很棒的字体库。它没有帮助。我发现的一件事是，当我将道具“multiple”添加到 v-select 组件时会出现警告。如果我删除该道具，则没有警告。但它扼杀了目的。这能帮您提个建议吗？我的字体真棒离子工作正常。只有 v-select 属性 'multiple' 正在创建警告。

这是HTML代码

  <v-flex xs12 md4 sm4  >
    <v-select
    class="myfont1 mt-3 pa-0 customDecoration text-xs-right" 
    @change="assignHazGroups"
    :items="typeOfAreaClassItems"
    v-model="typeOfAreaClassSelect"
    style="max-width:170px;"
    dense
    ></v-select> 
  </v-flex>

  <v-flex xs12 md4 sm4  >
    <v-select
    class="myfont1 mt-3 pa-0 mx-0 customDecoration" 
    @change="safeAreaFilter"
    :items="typeOfAreaClassSelect ==='American' ?areaClassAmericanItems:areaClassEuropeanItems"
    v-model="areaClassSelect"
    style="max-width:220px;"
    dense
    ></v-select> 
  </v-flex>

  <v-flex xs12 md4 sm4 class="ma-0 pa-0"
  >
    <v-select
    class="myfont1 mt-3 pa-0 mx-0 customDecoration"
    :items="typeOfAreaClassSelect =='American' ?hazGroupAmericanItems:hazGroupEuropeanItems"
    v-model="hazGroupSelect"
    multiple
    small-chips
    style="max-width:350px;"
    dense
    ></v-select>    

  </v-flex>

这里是数组变量

typeOfAreaClassItems:["American","European"],
            areaClassAmericanItems:[
                "Safe Area",
                "Class I, Div 1/Class I, Div 2",
                "Class I, Div 1",
                "Class I, Div 2",
            ],
            areaClassEuropeanItems:[
                "Safe Area",
                "Zone-1/Zone-2",
                "Zone-1",
                "Zone-2"
            ],
            hazGroupAmericanItems:[
                "Group A",
                "Group B",
                "Group C",
                "Group D",
                "NA"
            ],
            hazGroupEuropeanItems:[
                "IIC",
                "IIB+H2",
                "IIB",
                "IIA",
                "NA"
            ],
            eleCertItems:[
                "CSA",
                "UL",
                "ATEX",
                "FM",
                "PESO",
                "JIS (Japan)",
                "GOST (Russia)"
            ],
            
            
  //computed variables          
            typeOfAreaClassSelect:{
                get () {
                    return this.$store.getters.typeOfAreaClassSelect
                },
                set (value) {
                    this.$store.dispatch('setTypeOfAreaClassSelect',{data:value})
                }
            },
            areaClassSelect:{
                get () {
                    return this.$store.getters.areaClassSelect
                },
                set (value) {
                    this.$store.dispatch('setAreaClassSelect',{data:value})
                }
            },
            hazGroupSelect:{
                get () {
                    return this.$store.getters.hazGroupSelect
                },
                set (value) {
                    this.$store.dispatch('setHazGroupSelect',{data:value})
                }
            },
            eleCertSelect:{
                get () {
                    return this.$store.getters.eleCertSelect
                },
                set (value) {
                    this.$store.dispatch('setEleCertSelect',{data:value})
                }
            },

这里是函数

assignHazGroups(){
    if(this.typeOfAreaClassSelect === "American"){
        this.areaClassSelect = "Class I, Div 2"
        this.hazGroupSelect = [
            "Group A",
            "Group B"
        ]
    }
    else{
        this.areaClassSelect = "Zone-2"
        this.hazGroupSelect = [
            "IIB",
            "IIA"
        ]
    }
},
safeAreaFilter(){
    if(this.areaClassSelect === "Safe Area"){
        this.hazGroupSelect = ["NA"]
    }
    else{
        if(this.typeOfAreaClassSelect === "American"){
            this.hazGroupSelect = [
                "Group A",
                "Group B"
            ]
        }
        else{
            this.hazGroupSelect = [
                "IIB",
                "IIA"
            ]
        }
    }
},

当我调用@change 事件并调用函数时出现。需要摆脱这个警告。代码全部运行没问题。

Answer 1

我更改了 vuetify 插件 js 文件中的 iconfont。

在 /plugins/vuetify.js 文件中

更改了以下代码

Vue.use(Vuetify, {
  iconfont: 'faSvg',
})

至此

Vue.use(Vuetify, {
  iconfont: 'md',
})

基本上修复了图标警告。

Answer 2

问题

Vuetify 的 v-simple-checkbox 组件使用图标 checkboxOff according to the documentation.

出现的错误是在 Font Awesome 中找不到图标 far fa-square。那是因为在版本 5 中图标是 fas fa-square from the documentation.

Font Awesomes' FaSvg library assumes that all of the icons are prepended with fas which is why the icon far fa-square cannot be found.

解决方案

解决方法是用正确的值覆盖 checkboxOff 图标。

setup/vuetify.js

// All of the import and setup
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)
library.add(fas)

Vue.use(Vuetify);

// The configuration
export default new Vuetify({
  icons: {
    iconfont: "faSvg",
    values: {
      // The important part!!
      checkboxOff: {
        component: FontAwesomeIcon,
        props: {
          icon: ['fa', 'square'],
        }
      }
    }
  },
});

main.js

import App from './App.vue';
import vuetify from './setup/vuetify';

export default new Vue({
  vuetify,
  render: h => h(App),
}).$mount('#app')

Answer 3

我最初使用 Daniel Butler 的答案，但运行进入了与单选按钮相同的问题。然后我意识到更好的解决方法是实际导入 Vuetify 中的常规图标集，就像导入实体图标一样。

setup/vuetify.js

import { library } 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';

Vue.component('font-awesome-icon', FontAwesomeIcon);
library.add(fas);
library.add(far);

如果您还没有安装常规图标，则需要运行:

$ yarn add @fortawesome/free-regular-svg-icons -D
// or
$ npm install @fortawesome/free-regular-svg-icons -D

通过此更改，我的所有图标都可以正常工作，无需任何进一步的自定义配置。

找不到一个或多个图标 vuejs 应用程序警告

Could not find one or more icon(s) Warning with vuejs application

javascript

icons

warnings

vue.js

vuetify.js

问题

解决方案