[JavaScript知识库]vue项目图标处理工具

1、vue项目中的png、svg图片统一处理工具类，图片正常放在对应的目录下(images中放png图片，ui-icon中放svg图片)：

2、在style文件夹下新建一个ui-page.less工具类类：

// 图标
.ui-icon {
  .common {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    vertical-align: middle;
  }

  // 生成ui-icon子图标
  .svg-fac(@name) {
    &-@{name} {
      .common();
      background: url("~@/assets/ui-icon/@{name}.svg") no-repeat center;
    }
  }
  .png-fac(@name) {
    &-@{name} {
      .common();
      background: url("~@/assets/images/@{name}.png") no-repeat center;
    }
  }

  .svg-fac(import); // 导入
  .svg-fac(export); // 导出
  .svg-fac(filter); // 筛选 / 过滤
  .svg-fac(detail); // 详情
  .svg-fac(archives); // 全息档案
  .svg-fac(trackAnalysis); // 轨迹分析
  .svg-fac(alert); // 预警
  .svg-fac(delete); // 删除
  .svg-fac(search); // 搜索
  .svg-fac(camera); // 摄像头
  .svg-fac(signReceipt); // 签收 / 编辑任务

  .svg-fac(h_guanz); // 关注
  .svg-fac(h_jiancbg); // 检测报告
  .svg-fac(h_zaiz); // 在住
  .svg-fac(h_buzz); // 不在住
  .svg-fac(h_qians); // 签收
  .svg-fac(h_qus); // 趋势
  .svg-fac(h_reny); // 人员
  .svg-fac(h_zhuap); // 抓拍

  // png
  .png-fac(diz);
  .png-fac(guangz_s);
  .png-fac(guanz_l_nor);
  .png-fac(guanz_l_sel);
  .png-fac(guanz_nor);
  .png-fac(guanz_sel);
  .png-fac(jied); // 街道
  .png-fac(key_l_nor);
  .png-fac(key_l_sel);
  .png-fac(key_s);
  .png-fac(point);
  .png-fac(quh); // 区
  .png-fac(tianj);
  .png-fac(wenjj);
  .png-fac(wus);
  .png-fac(xiangq);
  .png-fac(xiangs);
  .png-fac(xiangx);
  .png-fac(xuanz_hov);
  .png-fac(xuanz_nor);
  .png-fac(zhengc_l_nor);
  .png-fac(zhengc_l_sel);
  .png-fac(zhengc_s);
  .png-fac(zhuap);
  .png-fac(h_tianj);
}

?3、在main.js中引入：

import '@/style/ui-page.less'

4、在用到图标或图标按钮的地方使用：

<el-button class="ui-icon-button" icon="ui-icon-export">
    导出
</el-button>

5、效果：

?