uView Icon 图标

简介: uView Icon 图标

基于字体的图标集,包含了大多数常见场景的图标。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

注意

因为在nvue下暂时无法解决自定义图标的问题,所以此功能暂缓推出。

icon下载地址

通过<u-icon>形式来调用,设置name参数为图标名即可。其中color默认为#606266size默认为16px

<u-icon name="photo"></u-icon>

copy

#修改图标的样式

  • 通过color参数修改图标的颜色
  • 通过size参数修改图标的大小,单位为px
<u-icon name="photo" color="#2979ff" size="28"></u-icon>

copy

#图片图标

这里说的图片图标,指的是小图标,起作用定位为"icon"图标作用,而非大尺寸的图片展示场景,理论上,这个小图标应该为png格式的正方形图标。

上面说到,给组件的name参数传入一个图片的名称即可显示字体图标,这些名称中不能带有/斜杠符号,否则会被认为是传入了图片图标,同时,size参数 也被设置为这个图片图标的宽度,由于是图片,诸如颜色color等参数都会失效。

<u-icon label="uView" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
相关文章
|
10月前
|
移动开发 JavaScript 小程序
uView Popup 弹出层
uView Popup 弹出层
144 0
|
10月前
|
移动开发 JavaScript 小程序
uView Tabbar 底部导航栏
uView Tabbar 底部导航栏
232 0
|
10月前
|
前端开发
uView Tabs 标签页
uView Tabs 标签页
181 0
|
5月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
561 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
8月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
159 1
|
10月前
|
移动开发 小程序 JavaScript
uView Button 按钮
uView Button 按钮
188 2
|
10月前
|
JavaScript API
uView Drawer 抽屉
uView Drawer 抽屉
138 0
|
10月前
|
JavaScript 测试技术 iOS开发
vue element plus Icon 图标
vue element plus Icon 图标
743 0
|
10月前
|
移动开发 小程序 JavaScript
uView Navbar 自定义导航栏
uView Navbar 自定义导航栏
326 0
|
10月前
elementUI el-tabs 实现动态选项卡页面效果
elementUI el-tabs 实现动态选项卡页面效果