atui/src/components/Icon/demo/color.md

components built with Vue.js

---
order: 0
title:
  zh-CN: 自定义颜色
  en-US: Color
---

## zh-CN

自定义颜色的图标


## en-US


````jsx

<v-icon type="info-s" color="#30b2f2"></v-icon>
<v-icon type="error-s" color="#ff5959"></v-icon>
<v-icon type="success-s" color="#1dbf38"></v-icon>
<v-icon type="help-s" color="#ff9000"></v-icon>
<v-icon type="warning-s" color="#b366ff"></v-icon>
<v-icon type="info-s-b" color="#30b2f2"></v-icon>
<v-icon type="error-s-b" color="#ff5959"></v-icon>
<v-icon type="success-s-b" color="#1dbf38"></v-icon>
<v-icon type="help-s-b" color="#ff9000"></v-icon>
<v-icon type="warning-s-b" color="#b366ff"></v-icon>
<br>
<v-icon type="info" color="#30b2f2"></v-icon>
<v-icon type="error" color="#ff5959"></v-icon>
<v-icon type="success" color="#1dbf38"></v-icon>
<v-icon type="help" color="#ff9000"></v-icon>
<v-icon type="warning" color="#b366ff"></v-icon>
<br>
<v-icon type="info-l" color="#30b2f2"></v-icon>
<v-icon type="error-l" color="#ff5959"></v-icon>
<v-icon type="success-l" color="#1dbf38"></v-icon>
<v-icon type="help-l" color="#ff9000"></v-icon>
<v-icon type="warning-l" color="#b366ff"></v-icon>

````

````vue-script
new Vue({
    el: 'body',
    components: {
        vIcon: atui.Icon
    }
})
````