1.在Vue2中以Symbol的形式使用iconfont的图标

在Vue@2.x中以Symbol的形式使用图标

1.在iconfont上新建项目

打开 iconfont ,切换至我的项目tab

输入相关信息,其中 FontClass/Symbol 前缀就是要自定义的类名,例如:el-icon ng-icon rn-icon-xx

然后打开想要添加的图标,例如 文件类型图标库

2.加入图标

点击图标里的购物车形状,加入仓库,
也可以使用js将页面内所有图表添加至仓库

var icon=document.getElementsByClassName('icon-gouwuche1');for(var i=0;i<icon.length;i++){icon[i].click();}

然后按以下顺序添加到项目中,选择刚刚新建的项目

3.下载解压

然后下载到本地,解压

移动(复制)到 src\assets\icon,demo.html就不需要移动了

可以在common.css里限制下图表大小(或者自己新建一个css文件引入,文件名称随意)

[class^="file-pre"],
[class*=" file-pre"] {
  font-family: "iconfont" !important;
  width: 14px;/* 可以去掉 width */
  height: 14px;/* 可以去掉 height */
  margin-right: 2px;/* 可以去掉 margin-right */
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

不限制效果

限制后效果

4.使用

在main.js里引入iconfont

import '@/assets/icon/iconfont'

在.vue组件内使用:

• 在iconfont上复制比demo.html方便,所以推荐在iconfont上使用

<svg class="file-pre" aria-hidden="true">
    <use xlink:href="#file-iconcr"></use>
</svg>
//或者
<svg class="file-pre" aria-hidden="true">
    <use :xlink:href="'#file-iconcr'"></use>
</svg>

效果

在iconfont我的项目里,切换至Symbol,鼠标悬浮到图表上时点击复制即可,然后粘贴到指定use标签内

以上,就是iconfont在Vue@2.x中以Symbol的形式使用图标的教程