Icon 字体图标

基于字体的图标集，搜集了大多数常见场景的图标。

本组件是基于阿里iconfont进行封装，让项目使用字体图标更加方便；

可根据项目情况扩展图标。

查看图标集

基本使用

<h1>不同图标示例(线性风格)</h1>
<view>
    <com-icon name="user"></com-icon>
    <com-icon name="bell"></com-icon>
    <com-icon name="cart"></com-icon>
    <com-icon name="clock"></com-icon>
    <com-icon name="question-circle"></com-icon>
</view>

<h1>不同图标示例(扁平风格)</h1>
<view>
    <com-icon name="user-fill"></com-icon>
    <com-icon name="bell-fill"></com-icon>
    <com-icon name="cart-fill"></com-icon>
    <com-icon name="clock-fill"></com-icon>
    <com-icon name="question-fill"></com-icon>
</view>

<h1>不同颜色</h1>
<view>
    <com-icon name="user-fill" color="#aa00ff"></com-icon>
    <com-icon name="user-fill" color="#2acc2a"></com-icon>
    <com-icon name="user-fill" color="#ff0000"></com-icon>
    <com-icon name="user-fill" color="#aa0000"></com-icon>
    <com-icon name="user-fill" color="#0000ff"></com-icon>
</view>

<h1>不同大小</h1>
<view>
    <com-icon name="user-fill" size="24"></com-icon>
    <com-icon name="user-fill" size="32"></com-icon>
    <com-icon name="user-fill" size="40"></com-icon>
    <com-icon name="user-fill" size="50"></com-icon>
</view>

其他样式

设计稿是千变万化的，图标类型通常变化不大，但是风格迥异；

故我们可以结合com-tag组件给图标添加背景色和边框等；

结合css的transform属性对图标进行拉伸旋转等变换以得到新的图标。

<com-tag width="100" height="100" padding="0" border-radius="5">
    <com-icon name="user" size="50"></com-icon>
</com-tag>

<com-tag width="100" height="100" padding="0" circle>
    <com-icon name="user" size="50"></com-icon>
</com-tag>

<com-tag width="100" height="100" padding="0" border-radius="5" bg-color="red">
    <com-icon name="user-fill" size="50" color="#fff"></com-icon>
</com-tag>

<com-tag width="100" height="100" padding="0" circle bg-color="red">
    <com-icon name="user-fill" size="50" color="#fff"></com-icon>
</com-tag>

图标扩展

1. 在阿里在线字体网 (opens new window)，新建项目，搜集图标后下载iconfont.css文件

2. 替换/static/fonts/iconfont.css文件即可使用自定义图标

API

Props

属性名	说明	类型	必填	默认值
name	图标名称	String	false	-
size	图标大小	String	false	inherit
color	图标颜色	String	false	-
prefix	图标名称统一前缀	String	false	icon-
rotate	2D旋转角度	String / Number	false	0
rotate3D	3D旋转角度 示例：[0,180,0]	Array	false	[0,0,0]
customStyle	自定义样式	Object	false	{}

Events

事件	说明	回调参数
upload	点击上传时触发	path 裁剪后的图片本地路径