XIcon 组件使用教程
优质
小牛编辑
148浏览
2023-12-01
该组件可以直接使用,不需要引入。
组件来自于 Ionicons(MIT),你可以在网站上面看到所有的图标。
该组件无法在script
引入的方式中使用,需要自行拷贝 svg 资源。
x-icon
是一个虚拟(占位)组件,你不需要引入XIcon
组件,当调用时vux-loader@^1.0.43
会自动将转换成 inline svg
。
你可以根据类名来设置样式(fill)。
目前并不支持 svg sprite
,将在后面版本支持。
示例(请更新 vux-loader 到 v1.0.57 以上,否则不支持传除 type 和 size 之外的属性):
<x-icon type="ios-arrow-up" class="icon-red"></x-icon>
<x-icon type="ios-arrow-up" size="30"></x-icon>
x-icon 无法动态设置 type
,只能单个引入,原因是 x-icon 组件主要目的是实现按需引入图标。
若要实现动态切换那么也意味着整个 icon 列表都得引入,因此暂时不支持。
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
type | string | 图标名字 | -- | |
size | string | 24 | 尺寸大小 | -- |
样式变量
名字 | 默认值 | 说明 | 继承自变量 |
@icon-success-color | #09BB07 | -- |