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] 新组件'