vue 数据大屏 项目开发时，需要显示自定义的图片图标，图标根据类型显示不同的图标，根据状态显示当前图标的颜色，为此做了两组图标，一组在线状态的有颜色，一种不在线的灰色图标。

使用组件

<icons type="phone" :is-online="false"></icons>
<icons type="xungeng" :is-online="true"></icons>
<icons type="daohang" :is-online="true"></icons>

组件代码

/**
* @Author: 858834013@qq.com
* @Name: icons
* @Date: 2023年05月11日
* @Desc: 根据状态以及类型返回对应的图标
*/
<template>
  <div class="icons">
    <!--    电话图标-->
    <div class="icon_phone" v-if="type=='phone'" :class="{active:isOnline}"></div>
    <!--    定位图标-->
    <div class="icon_dingwei" v-if="type=='dingwei'" :class="{active:isOnline}"></div>
    <!--    导航图标-->
    <div class="icon_daohang" v-if="type=='daohang'" :class="{active:isOnline}"></div>
    <!--    gps图标-->
    <div class="icon_gps" v-if="type=='gps'" :class="{active:isOnline}"></div>
    <!--    保洁图标-->
    <div class="icon_baojie" v-if="type=='baojie'" :class="{active:isOnline}"></div>
    <!--    巡更图标-->
    <div class="icon_xungeng" v-if="type=='xungeng'" :class="{active:isOnline}"></div>
  </div>
</template>

<script>

export default {
  name: "icons",
  components: {},
  props: {
    // 是否在线
    isOnline: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 类型
    type: {
      type: String,
      default() {
        return 'phone'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.icons {
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

.icon_phone {
  background: url("./assets/icon_phone.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}

.icon_phone.active {
  background: url("./assets/icon_phone_active.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}

.icon_dingwei {
  background: url("./assets/icon_dingwei.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}

.icon_dingwei.active {
  background: url("./assets/icon_dingwei_active.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}
.icon_daohang {
  background: url("./assets/icon_daohang.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}

.icon_daohang.active {
  background: url("./assets/icon_daohang_active.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}
.icon_gps {
  background: url("./assets/icon_gps.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}

.icon_gps.active {
  background: url("./assets/icon_gps_active.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}
.icon_baojie {
  background: url("./assets/icon_baojie.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}

.icon_baojie.active {
  background: url("./assets/icon_baojie_active.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}
.icon_xungeng {
  background: url("./assets/icon_xungeng.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}

.icon_xungeng.active {
  background: url("./assets/icon_xungeng_active.png") no-repeat;
  width: 26px;
  height: 26px;
  background-size: 100% 100%;
}
</style>