---
name: Icon
title: icon标签
category: icon标签
owner: 刁佳佳
---

## 示例
```atom 基础示例
<template>
    <view class="group">
        <h3>默认样式</h3>
        <view>
            <icon
                a-for="(item, index) in smallDefault"
                :icon-type="item"
                :key="index"
                class="smallDefault"
            >
            </icon>

        </view>
        <h3>颜色选择</h3>
        <view>
            <icon
                a-for="(item, index) in colors"
                :icon-color="item"
                :key="index"
                class="smallDefault"
            >
            </icon>
        </view>
        <h3>尺寸选择</h3>
        <view>
            <icon
                a-for="(item, index) in sizes"
                :icon-size="item"
                :key="index"
                class="smallDefault"
            >
            </icon>
        </view>
    </view>
</template>

<script>
export default {
    config: {
        navigationBarTitleText: 'Icon Test'
    },
    data() {
        return {
            smallDefault: ['success', 'info', 'warn', 'waiting',
                'success_no_circle', 'clear', 'search', 'personal',
                'setting', 'top', 'close', 'cancel', 'download',
                'checkboxSelected', 'radioUnselect']
            ,
            colors: [
                '#333', '#666', '#999', '#3C76FF', '#F7534F'
            ],
            sizes: [
                40, 35, 30, 25
            ]
        }
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
.group {
    width: 100%;
    h3 {
        line-height: 30px;
        padding-left: 10px;
    }
}
.smallDefault {
    display: inline-block;
    margin: 10px;
}

</style>


```
## API
### Props


名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
iconType | string | success | 可选 | icon的类型 | -
iconColor | string | - | 可选 | icon的颜色 | -
iconSize | number | - | 可选 | icon的大小 | -