阿里图库iconfont使用方法

iconfont 使用

svg引入方式

iconfont引入方法

方法一: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>

到此这篇关于阿里图库iconfont使用介绍的文章就介绍到这了,更多相关阿里图库iconfont请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文地址：https://blog.csdn.net/i_Satan/article/details/126630739