UNPKG

hae

Version:

Mobile web UI based on Vux

70 lines (57 loc) 2.06 kB
category: en: Basic zh-CN: 基础组件 category_order: 1 icon: '&#xe619;' import_code: '&nbsp;' 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] 新组件'