Icon 图标

注意

图标来自 element-plus/element-plus-icons

基础用法

通过 name 来设置不同的图标

<ivy-icon name="download"></ivy-icon>
<ivy-icon name="edit" class="margin-left"></ivy-icon>
<ivy-icon name="reading" class="margin-left"></ivy-icon>

旋转

添加 spin 属性来使 icon 旋转

<ivy-icon name="loading" spin></ivy-icon>
<ivy-icon name="refresh-right" spin class="margin-left"></ivy-icon>
<ivy-icon name="refresh" spin class="margin-left"></ivy-icon>

大小

添加 size 属性和直接设置 css 来设置大小，size 属性的优先级高

<ivy-icon name="loading" size="12px"></ivy-icon>
<ivy-icon name="loading" class="margin-left"></ivy-icon>
<ivy-icon name="loading" size="16px" class="margin-left"></ivy-icon>
<ivy-icon name="loading" size="18px" class="margin-left"></ivy-icon>
<ivy-icon name="loading" size="20px" class="margin-left"></ivy-icon>

颜色

添加 color 属性和直接设置 css 来设置颜色，size 属性的优先级高

<ivy-icon name="loading"></ivy-icon>
<ivy-icon name="loading" color="red" class="margin-left"></ivy-icon>
<ivy-icon name="loading" color="blue" class="margin-left"></ivy-icon>
<ivy-icon name="loading" color="pink" class="margin-left"></ivy-icon>
<ivy-icon name="loading" color="green" class="margin-left"></ivy-icon>

Attrs

属性名	说明	类型	可选值	默认值
size	图标大小，合法的 css 单位	string	-	-
color	图标颜色，合法的颜色值	string	-	-
name	图标名字	string	-	-

所有 icon