hae
Version:
Mobile web UI based on Vux
70 lines (57 loc) • 2.06 kB
YAML
category:
en: Basic
zh-CN: 基础组件
category_order: 1
icon: ''
import_code: ' '
need_import: false
extra:
en: |
::: tip
Icons come from [Ionicons(MIT)](http://ionicons.com/)
:::
`x-icon` is a virtual component,which means you don't need to import `XIcon`, `vux-loader@^1.0.46` will transform your code into `inline svg`。
you can set `fill` style by its class names.
Currently it does not support `svg sprite`,will implement in later release.
``` html
<x-icon type="ios-arrow-up"></x-icon>
<x-icon type="ios-arrow-up" size="30"></x-icon>
```
zh-CN: |
::: tip
组件来自于 [Ionicons(MIT)](http://ionicons.com/),你可以在网站上面看到所有的图标。
<br />
该组件无法在`script`引入的方式中使用,需要自行拷贝 svg 资源。
:::
`x-icon` 是一个虚拟(占位)组件,你不需要引入`XIcon` 组件,当调用时`vux-loader@^1.0.43`会自动将转换成 `inline svg`。
你可以根据类名来设置样式(fill)。
目前并不支持 `svg sprite`,将在后面版本支持。
示例(请更新 vux-loader 到 v1.0.57 以上,否则不支持传除 type 和 size 之外的属性):
``` html
<x-icon type="ios-arrow-up" class="icon-red"></x-icon>
<x-icon type="ios-arrow-up" size="30"></x-icon>
```
::: warning
x-icon 无法动态设置 `type`,只能单个引入,原因是 x-icon 组件主要目的是实现按需引入图标。
<br>
若要实现动态切换那么也意味着整个 icon 列表都得引入,因此暂时不支持。
:::
props:
type:
en: icon name
zh-CN: 图标名字
size:
default: 24
en: icon size
zh-CN: 尺寸大小
changes:
v2.2.0:
en:
- '[enhance] Support all attributes #1147'
zh-CN:
- '[enhance] 支持传任意属性 #1147'
v2.1.1-rc.4:
en:
- '[feature] new component'
zh-CN:
- '[feature] 新组件'