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>
源码-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的方式要稍微复杂一点点,可以看下一章节的源码分析