Element-UI源码阅读-icon

291 阅读1分钟

icon用法

<i class="el-icon-edit"></i>

<i class="el-icon-share"></i>

<i class="el-icon-delete"></i>

<el-button type="primary" icon="el-icon-search">搜索</el-button>

1641218738(1).png

源码-template

//利用i标签来加载图片
//el-icon-name实际上是element-ui中所有基于类名设置icon的一种方式,使用伪类el-icon-name:before {content: '\xxxx'}( xxxx图片的实际编码,存储在font文件下的.ttf.woff文件中)现实。
//所有基于class的icon设置可以见theme-chalk下的icon.scss
<template>
  <i :class="'el-icon-' + name"></i> // 没有什么复杂的东西,朴实无华。
</template>

源码-script

<script>
  export default {
    name: 'ElIcon',

    props: {
      name: String  // icon的名称
    }
  };
</script>

特例说明:

在icon的使用中官网同时也介绍了button添加icon的用例,button实现icon的方式要稍微复杂一点点,可以看下一章节的源码分析

下一章节:

Element-UI源码阅读-El-Button