Icon 图标

优质

小牛编辑

121浏览

2023-12-01

使用指南

组件介绍

Icon 组件是通过字体图标的方式引入

引入方式

import { Icon } from 'feart';

components: {
  'fe-icon': Icon,
},

代码演示

默认 Icon

<div class="fe-center">
  <fe-icon name="placeholder" />
</div>

设置自定义大小颜色

<div class="fe-center">
  <fe-icon name="love" color="#FF0000" size="50px" />
</div>

通过设置类名前缀

@font-face {
  font-family: 'fy-icon';
  src: url('//at.alicdn.com/t/font_1278840_253otcm66h1.ttf?t=1562305738883') format('truetype');
}

.fy-icon {
  font-family: 'fy-icon' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fy-icon-feui:before {
  content: '\e61b';
}

.fy-icon-fy:before {
  content: '\e61f';
}

<div class="fe-center">
  <fe-icon classPrefix="fy-icon" name="feui" size="50px" color="#41b883" />
</div>

设置图片

<div class="fe-center">
  <fe-icon name="https://www.jss.com.cn/.../images/logo.png" size="130px" />
</div>

设置 base64 图片

<div class="fe-center">
  <fe-icon name="data:image/png;base64,iV...II=" size="130px" />
</div>

API

参数	说明	类型	默认值	可选值
name	图标名称或图片链接	`String`	-	-
color	图标颜色	`String`	`inherit`	-
size	图标大小，如 20px 2em，默认单位为 px	`String`	`inherit`	-
classPrefix	类名前缀	`String`	`feart`	-
-	-	-	-	-