iconfont的symbol用法——Vue

​

1. 引入iconfont.js

可远程引入和下载至本地引入

1）.远程引入：

引入远程的iconfont.js文件，可以在mian.js中创建一个script标签，将标签的src设置为项目下面生成的symbol代码：

let sp = document.createElement('script');
sp.src = '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js';
document.body.appendChild(sp);

2）.本地引入：

直接选择下载至本地，然后可将整个文件移动至vue项目的components文件下，最后在main.js中导入即可：

import './components/icon-file/iconfont.js'

2.创建一个icon组件

直接将官方给的html和css粘贴至模版中：

<template>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
</template>

<style type="text/css">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

注意，此处为了能更便利的使用组件，可以将 use 的属性使用 v-bind 绑定，然后再用计算属性和props来控制Icon的样式：

<template>
  <svg class="icon" aria-hidden="true">
  	// 记得此处的计算属性需要和‘#’拼接
    <use :xlink:href="'#'+fontClass"></use>
  </svg>
</template>

<script>
// 创建一个映射表，能更方便地设置Icon样式，
// 以后如果需要更换图标，也只需要更换映射表里的属性值。
const classMap = {
  home: "icon-zhuye",
  success: "icon-chenggong",
  error: "icon-ddfdf",
  close: "icon-guanbi",
  warn: "icon-jinggao1",
  info: "icon-weibiaoti-",
  blog: "icon-boke",
  code: "icon-code",
  about: "icon-about",
  weixin: "icon-weixin",
  mail: "icon-youxiang",
  github: "icon-socialgithuboutline",
  qq: "icon-qq",
  arrowUp: "icon-jiantou",
  arrowDown: "icon-jiantouxia",
  empty: "icon-iconfontinbox",
  chat: "icon-liuyan",
  csdn: 'icon-csdn'
};
export default {
  name: "Icon",
  props: {
    type: {
      type: String,
      require: true
    }
  },
  computed: {
    fontClass() {
      return classMap[this.type];
    }
  }
}
</script>

<style type="text/css">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

3.导入组件

<template>
  <div>
    // 只要设置组件的type属性，就可以使用对应的图标了
    <Icon class="test" type="csdn"></Icon>
  </div>
</template>

<script>
import Icon from '@/components/Icon'

export default {
  components: {
    Icon
  }
}
</script>

<style scoped lang="less">
.test{
  font-size: 50px;
}
</style>