vue使用ruoyi框架自制icon图标

首先将图片放入asserts目录下的icons中。

再打开asserts/styles中的element-ui.scss在其中进行编辑

//竖线iocn
.el-icon-vline{
  background: url('../icons/verticalline.png') left no-repeat;
}
.el-icon-vline:before{
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

//无人机
.el-icon-uav{
  background: url('../icons/equipment_img.png') left no-repeat;
  background-size: 100%;
}
.el-icon-uav:before{
  content: "替";
  visibility: hidden;
}

//电池
.el-icon-battery{
  background: url('../icons/电池.png') left no-repeat;
  background-size: 100%;
}
.el-icon-battery:before{
  content: "替";
  visibility: hidden;
}

//部件
.el-icon-parts{
  background: url('../icons/部件.png') left no-repeat;
  background-size: 100%;
}
.el-icon-parts:before{
  content: "替";
  visibility: hidden;
}