vue中使用Symbol的方式引用iconfont

前提工作，先把自己要使用的图标都加入iconfot资源文件中。

1. 选择Symbol的方式，生成链接

 

 

 

 2. 在index.html中引入js

<script src="https://at.alicdn.com/t/font_3298751_bg4cvlhc5ga.js"></script>

 

3. 使用iconfont的地方写：此处的href 名字是在平台定义的iconfont名称

<svg class="icon" aria-hidden="true">
      <use :xlink:href="'#icon-'+item.Icon" />
</svg>

 

4. 修改css及样式

   . 在index.html 先全局设置icon 样式

　

    .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

 

  . 在使用的vue文件中再个性化设置颜色大小等

  

.icon {
  height: 14px;
  width: 14px;
  margin-right: 12px;
}
// 修改图标颜色
.icon:last-of-type {
  fill: #5f5f69;     
}
.el-submenu:hover,
.el-submenu.is-active,
.el-menu-item.is-active,
.el-menu-item:hover {
  span {
    color: #3585ff;
  }
  .icon:last-of-type {
    fill: #3585ff;
  }
}