EL-Icon：为Vue打造的全能图标库

1. 简介

在Vue开发中，经常会用到图标来提升用户界面的美观性和交互性。EL-Icon是一个Vue组件库，专门用于提供丰富多样的图标选择和操控。本文将详细介绍EL-Icon的使用方法和特点。

2. 安装

可以通过npm或者yarn来安装EL-Icon。

npm install el-icon

或者

yarn add el-icon

3. 基本用法

在Vue组件中，可以直接引入EL-Icon组件来使用图标。

<template>
  <div>
    <el-icon name="el-icon-star-on"></el-icon>
  </div>
</template>

<script>
import 'el-icon' from 'el-icon'

export default {
  ...
}
</script>

4. 图标列表

EL-Icon提供了大量的常用图标供选择。可以在官方文档中找到完整的图标列表。

5. 图标属性

EL-Icon组件支持多种属性来定制图标的样式和行为。

5.1 name

类型：String
默认值：''
描述：图标名称，用于指定所需显示的图标。

例如：

<el-icon name="el-icon-search"></el-icon>

5.2 size

类型：Number
默认值：16
描述：图标的尺寸，单位为像素。

例如：

<el-icon name="el-icon-star-on" :size="24"></el-icon>

5.3 color

类型：String
默认值：''
描述：图标的颜色。

例如：

<el-icon name="el-icon-star-on" color="#ff0000"></el-icon>

6. 事件

EL-Icon组件支持两种事件：click和hover。

6.1 click事件

点击图标时触发的事件。

<el-icon name="el-icon-star-on" @click="handleClick"></el-icon>

6.2 hover事件

鼠标悬停在图标上时触发的事件。

<el-icon name="el-icon-star-on" @hover="handleHover"></el-icon>

7. 示例代码运行结果

7.1 基本用法示例

<template>
  <div>
    <el-icon name="el-icon-star-on"></el-icon>
  </div>
</template>

<script>
import 'el-icon' from 'el-icon'

export default {
  ...
}
</script>

7.2 图标属性示例

<template>
  <div>
    <el-icon name="el-icon-star-on" :size="24" color="#ff0000"></el-icon>
  </div>
</template>

<script>
import 'el-icon' from 'el-icon'

export default {
  ...
}
</script>