iconfont 使用

iconfont 使用

svg引入方式参考文章@十木禾
参考文章@一像素的执着

方法一:svg 引入

1. 创建一个 iconfont.js 文件
2. 将从 icon-font 网站中下载的代码粘贴进上面的js文件。
3. 在 main.js 文件中引入改js文件

使用方式

// 在 main.js 文件中引入 iconfont.js 文件
import './assets/iconfontsvg'

// 正常使用
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-buding"></use>
    </svg>

//  可以添加基础的 css样式
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

封装svg组件

//封装 vue组件使用
<template>
  <i class="sketch-icon">
    <svg class="icon svgfont" aria-hidden="true">
      <use :xlink:href="xlinkHref"></use>
    </svg>
  </i>
</template>

<script>
export default {
  name  : 'SketchIcon',
  props : {
    type : {
      type     : String,
      required : true,
    },
  },
  computed : {
    xlinkHref() {
      return `#${this.type}`;
    },
  },
};
</script>

<style scoped lang="less">
.sketch-icon {
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>

使用方式

    <sketch-icon type="sk-sound"/>

方法二：fontclass 引入

1. 创建一个 css 文件，将存放图表的代码 粘贴进改css文件。
2. 在main.js 中全局引入 该css文件。

使用方式

注意 ： 一定要添加 iconfont 这个前缀

<i class="iconfont icon-wangyiyunyinleclick"></i>

方法三：unicode 引入

1. 创建一个 css 文件，将存放图表的代码 粘贴进改css文件。
2. 在main.js 中全局引入 该css文件。

使用方式

注意 ： 一定要添加 iconfont 类名

<i class="iconfont">&#xe601;</i>