uniapp uni-icons 组件为例带着大家使用并熟悉一次文档

7月前作者：-耿瑞- 分类：Toy博客阅读(30) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp uni-icons 组件为例带着大家使用并熟悉一次文档。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uni的组件都可以直接进入官网
https://uniapp.dcloud.net.cn/
然后点击右上角的搜索
uni-icons,uni-app,前端
直接在输入框中搜索 uni-icons 下面内容就都出来了

在最上面先点击下载和按在

进入界面后点击箭头指向出进行下载

如果你系统有HBuilder X 就会自动打开要你选择安装在哪一个项目里如果你的HBuilder X有项目在运行则无法安装
uni-icons,uni-app,前端

uni-icons,uni-app,前端
安装成功后我们继续回到刚才的文档

先看下面的 API 看看每个字段都是干什么的
uni-icons,uni-app,前端
这里我们只需要两个 size 控制尺寸大小的 type 控制图标的方案类型他让我们参考案例
然后我们看案例

这里就有非常多的图标给我选

最上面就是基础用法
uni-icons,uni-app,前端
那么我们就可以理解为

<uni-icons type="图标方案  在图标案例下面复制" size="组件尺寸大小  要一个数字"></uni-icons>

例如我这里直接在一个组件里写

<uni-icons type="contact" size="30"></uni-icons>

uni-icons,uni-app,前端文章来源地址https://www.toymoban.com/news/detail-539316.html

到了这里，关于uniapp uni-icons 组件为例带着大家使用并熟悉一次文档的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

uniapp 使用组件 uni-list 实现聊天列表功能

如何使用 uniapp 的组件实现聊天列表的功能呢，翻阅了半天文档，终于找到一个实用的方法，下面是具体的步骤 1、首先需要下载对应的插件去uniapp的官方文档进行下载（uni-ui - DCloud 插件市场），这里直接下载插件并导入到HBuilderx 中就可以了。 2、接下来就可以直接进行使

2024年02月09日
浏览(36)
uniapp仿微信朋友圈发布页(原生uni方法不使用扩展组件)

常见的一些UI组件库都是只能提前选择发布图片或者发布视频，我觉得在发布前还要选择一下，挺麻烦的。虽然微信朋友圈也是这么做的吧。我希望的是，直接进入发布页，如果没有选择图片或者视频，也可以直接发布文字，选择媒体的话支持拍照、图片、视频三个选项。如

2024年02月08日
浏览(41)
uniapp使用uni-file-picker上传组件实现多文件上传功能

组件代码选择以及发生请求代码，可以实现多文件上传功能

2024年02月11日
浏览(38)
uniapp 小程序端使用uni-popup组件时，页面用了scroll-view滚动组件，uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案

在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent=\\\"\\\" 和一个样式height: 100vh;

2024年02月10日
浏览(41)
Web3 solidity编写交易所合约编写ETH和自定义代币存入逻辑并带着大家手动测试

上文 Web3 叙述交易所授权置换概念编写transferFrom与approve函数我们写完一个简单授权交易所的逻辑但是并没有测试其实也不是我不想主要是交易所也没实例化现在也测试不了我们先运行 ganache 启动一个虚拟的区块链环境先发布在终端执行如果你跟着我一步一步来的那编

2024年02月13日
浏览(29)
【uniapp】小程序开发：2 安装uni-ui组件库、使用pinia状态管理、自定义http请求

1、安装 2、配置组件自动导入使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom 打开项目根目录下的 pages.json 并添加 easycom 节点： 3、安装插件，实现uni-ui组件的类型提示安装完成后，在 tsconfig.json 中增加配置项 4、测试使用随便复制一个组件在

2024年02月08日
浏览(42)
uniapp扩展组件---uni-list

文章目录基本用法多行内容显示右侧显示角标、switch 左侧显示略缩图、图标开启点击反馈和右侧箭头聊天列表示例组件名：uni-list 代码块： uList 、 uListItem 关联组件： uni-list-item 、 uni-badge 、 uni-icons 、 uni-list-chat 点击下载安装一、Api属性以及基础用法点击下方查看

2024年02月07日
浏览(26)
Uniapp之uni-ui-扩展组件（1）

uni组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components HBuilder插件市场（uni-ui组件库） uni-ui 不支持使用 Vue.use() 的方式安装 npm安装uni-ui库（vue-cli项目需先安装sass及sass-loader，HBuilder可省略）安装sass：

2023年04月08日
浏览(36)
【微信小程序】使用iView组件库中的icons资源

要在微信小程序中使用 iView 组件库中的 icons 资源，需要先下载并引入 iView 组件库，并按照 iView 的文档进行配置和使用。以下是一般的使用步骤：下载 iView 组件库的源码或使用npm安装 iView 。在小程序项目的 app.json 文件中添加 iView 组件库的引入配置：其中， /path/to/iView

2024年02月16日
浏览(23)
关于uniapp中的日历组件uni-calendar中的小红点

如果你使用过uni-calendar组件，可能你觉得这个小红点有点碍眼，但是官方给定的日历组件uni-calendar中如果你想要在某一天上添加一些信息例如:价格，签到，打卡之类，只要标记上就必定会带上小红点，那么我如何有想保留这些信息又把小红点去掉呢？可以修改一下日历组件

2024年02月15日
浏览(37)