Easy UI

Icon 图标 ​

提供了一套常用的图标集合。图标来源：Font Awesome。请访问查看完整的图标列表。

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-icon/index.js";
</script>

使用方法 ​

直接通过设置 name 属性来使用即可。例如：

html
<div class="demo">
  <ea-icon name="coffee"></ea-icon>
  <ea-icon name="check" variant="solid"></ea-icon>
  <ea-icon name="github" family="brands"></ea-icon>
</div>
html
<div class="demo">
  <i class="fa-solid fa-coffee"></i> <i class="fa-brands fa-github"></i>
</div>

示例 ​

基础用法 ​

查看代码
html
<div class="demo row left">
  <ea-icon name="coffee"></ea-icon>
  <ea-icon name="check" variant="solid"></ea-icon>
  <ea-icon name="user" variant="regular"></ea-icon>
  <ea-icon name="github" family="brands"></ea-icon>
</div>

不同样式 ​

查看代码
html
<div class="demo row left">
  <ea-icon name="heart" variant="solid" color="#ff4757"></ea-icon>
  <ea-icon name="heart" variant="regular" color="#ff4757"></ea-icon>
  <ea-icon name="star" variant="solid" color="#ffa502"></ea-icon>
  <ea-icon name="star" variant="regular" color="#ffa502"></ea-icon>
</div>
` ::: ### 设置大小

<div class="demo row left">
  <ea-icon name="coffee" size="16"></ea-icon>
  <ea-icon name="coffee" size="24"></ea-icon>
  <ea-icon name="coffee" size="32"></ea-icon>
  <ea-icon name="coffee" size="48"></ea-icon>
</div>

::: details 查看代码 ```html
<div class="demo row left">
  <ea-icon name="coffee" size="16"></ea-icon>
  <ea-icon name="coffee" size="24"></ea-icon>
  <ea-icon name="coffee" size="32"></ea-icon>
  <ea-icon name="coffee" size="48"></ea-icon>
</div>

Attributes ​

属性名类型默认值说明
namestring-图标名称，如 coffee、check、github
familystringclassic图标家族：classic、sharp、brands
variantstringsolid图标样式：solid、regular、light、thin、duotone
sizestring/number-图标大小
colorstring-图标颜色