更新记录
1.0.3(2021-12-09) 下载此版本
改正了模拟器与真机样式不一致问题
1.0.2(2021-10-21) 下载此版本
把扩展自定义icon的内容独立成一份css文件,把自定义颜色也独立成一份css文件。有自定义的需求的时候,找对应的文件即可
1.0.1(2021-09-09) 下载此版本
添加自定义颜色和图片的文档
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
使用方法
直接引入
复制代码<lgf-icon></lgf-icon>
属性
属性名 | 描述 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
icon | icon图标的名称 | String | - | icon-baoxiu-weixuanzhong |
color | 图标的颜色 | String | orange|red|yellow|green|cyan(颜色可以自己添加) | red |
size | 图标的大小 | Number|String | - | 60 |
示例
<lgf-icon></lgf-icon>
<lgf-icon icon="icon-24gf-phoneLoudspeaker" color="red"></lgf-icon>
自定义系列操作
1、扩展自定义icon图标
本组件结合阿里icon font库进行使用
选好图标后 ,选择font class,点击旁边的查看在线链接,然后点击出现的链接地址,将新打开的页面里的代码全部拷贝出来,放入到组件文件夹中的 icons.css 文件中,覆盖原先的内容,即可达到扩展自定义的icon图标
2、添加自定义icon颜色
打开组件文件加,在 color.css 文件中,按照示例,自定义 icon 的颜色