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

2024-05-20 • 问答

我无法解决该警告 “找不到一个或多个图标{前缀：“ far”，iconName：“ square”} {}“（附有屏幕截图）当我更改“ typeOfAreaClass”的值或从“ areaClass”中选择“安全区域”时，警告会弹出

以下是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",Div 1",],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",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',hazGroupSelect:{
                get () {
                    return this.$store.getters.hazGroupSelect
                },set (value) {
                    this.$store.dispatch('setHazGroupSelect',eleCertSelect:{
                get () {
                    return this.$store.getters.eleCertSelect
                },set (value) {
                    this.$store.dispatch('setEleCertSelect',

这是功能

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事件并调用函数时出现。需要摆脱这个警告。代码运行正常。但是，这种警告很烦人。任何人，请提出一条出路。预先感谢

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

我自己修复了

这就是我所做的。我更改了vuetify插件js文件中的iconfont。

在/plugins/vuetify.js文件中

更改了以下代码

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

对此

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

这基本上解决了图标警告。太傻了，我们有时要花几个小时来解决一个简单的问题。我发布了此内容，以便有人发现它有用。无论如何，谢谢大家的宝贵时间。编码愉快！

问题

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

引发的错误是说在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')

我最初使用了 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

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

icons javascript vue.js vuetify.js warnings

本文链接：https://www.f2er.com/3159166.html

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

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

问题

解决方案

大家都在问