项目中引入阿里巴巴图标——iconfont图标的使用-svg格式

项目中引入阿里巴巴图标——iconfont图标的使用-svg格式

一、下载图标

1、先进入iconfont.cn页面

iconfont官网：https://www.iconfont.cn/

2、登陆，并选择你要用的图标进行下载

3、点击下载，并选择弹框下面的色值和大小，点击svg下载，并进行重命名

1-浅灰正常图标

2-明蓝高亮图标

4、把下载的svg图标，放进本地项目里的某个文件夹，进行使用

二、使用图标

1、找到所需界面的html代码

2、在HTML中插入css文件

3、 在html里面插入一个 i 标签，i 标签中间插入 图标代码

<template>
	<div>
      <i class="iClassTop" @click="changeLayerOrder('top', item, index)"></i>
    </div>
</template>

<script>
    methods:{
        /**
         * 修改图层顺序
         * @param {any} action 下移还是上移
         * @param {any} layer  图层
         * @param {any} index  序号
         * @returns {any}
         */
        changeLayerOrder(action, layer, index) {
          this.isTop = action
          // 排序之前重置 layerOrder
          this.layerList.forEach((item, i) => {
            item.layerOrder = i;
          });
          if (action === 'top') {   
            this.layerList.map((item,i) => {
              if(i == layer.layerOrder){
                  this.layerList.unshift(this.layerList.splice(i , 1)[0]);
              }
            })
          }

          const layerOrder = {};
          for (const item of this.layerList) {
            layerOrder[item.layerName] = item.layerOrder;
          }
          changeLayerOrder({
            taskId: this.$store.state.editTask.activeTask.taskId,
            layerOrder
          }).then(() => {
            this.featureRender();
          });
        }        
    }
</script>

<style>
.iClassTop {
  display: inline-block;
  height: 16px;
  width: 16px;
  font-size: 16px;
  margin-right: 5px;
  background-image: url('../../../static/images/icon/top-gray.svg')
}

.iClassTop:hover {
  background-image: url('../../../static/images/icon/top-light.svg')
}

</style>

显示效果

注：可以自定义大小、颜色

1-默认状态

2-hover高亮状态