小程序-uni-app：hbuildx uni-app 安装 uni-icons 及使用

snowball_li

已于 2023-08-15 09:59:37 修改

阅读量2.7k

点赞数 1

分类专栏：前端小程序文章标签： uni-app 前端小程序插件

于 2023-08-15 09:57:40 首次发布

本文链接：https://blog.csdn.net/snowball_li/article/details/132287988

版权

前端同时被 2 个专栏收录

229 篇文章 22 订阅

订阅专栏

小程序

16 篇文章 0 订阅

订阅专栏

一、官方文档找到uni-icons

uni-app官网

二、下载插件

三、点击“打开HBuildX”

四、选择要安装的项目

五、勾选要安装的插件

六、安装后，项目插件目录

根目录uni_modules目录下增加uni-icons、uni-scss

七、引入组件，使用组件

<uni-icons type="phone-filled" size="26"></uni-icons>


import uniIcons from '../../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'


components: {
        uniIcons
},

八、经过测试，成功。

参考链接

http://lihuaxi.xjx100.cn/news/1221122.html?action=onClick

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

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

snowball_li

关注关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
小程序-uni-app：hbuildx uni-app 安装 uni-icons 及使用

根目录uni_modules目录下增加uni-icons、uni-scss。
复制链接

扫一扫

专栏目录

uni-app小程序简单聊天.rar

12-15

uni-app是一个使用Vue.js开发所有前端应用的框架，它支持多端输出，包括微信小程序、支付宝小程序、百度智能小程序、QQ小程序、H5以及App等。这个压缩包中的内容主要是为了帮助开发者快速理解和实现一个基础的聊天...

【uni-app】uni-app官方自带图标的使用方法

【敦厚的曹操】的专栏

04-27

1502

【代码】【uni-app】uni-app官方自带图标的使用方法。

1 条评论您还未登录，请先登录后发表或查看评论

uni-icons遍历循环所有内置可用图标

热门推荐

路漫漫其修远兮，吾将上下而求索

08-20

4万+

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app约定了如下开发规范：页面文件遵循Vue单文件组件规范组件标签靠近小程序规范，详细见uni-app组件规范接口能力（js api）靠近微信小程序规范，但需将前缀wx替换为uni，详见uni-app接口规范数据绑定及事件处理同Vue.js规范，同时补充了App以及页面的生命周期为兼容多端运行，建议使用flex布局进行开发。

大厂为什么不用Uni-app，核心原因就仨字。

贝格前端工场的博客

03-16

2087

uni-app号称有800万开发者，但是发现了没有，很少有大厂采用uni-app作为技术栈，知道这是为什么吗？

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

weixin_45966674的博客

02-07

6856

如果你系统有HBuilder X 就会自动打开要你选择安装在哪一个项目里如果你的HBuilder X有项目在运行则无法安装。这里我们只需要两个 size 控制尺寸大小的 type 控制图标的方案类型他让我们参考案例。直接在输入框中搜索 uni-icons 下面内容就都出来了。先看下面的 API 看看每个字段都是干什么的。安装成功后我们继续回到刚才的文档。uni的组件都可以直接进入官网。这里就有非常多的图标给我选。在最上面先点击下载和按在。

【uiapp】uni-icons的使用

cc蒲公英的博客

11-13

781

【uiapp】uni-icons的使用

uniapp组件-uni-icons 图标

02-28

3万+

例子 <template> <view> <uni-icons type="arrowdown"/> <uni-icons type="arrowleft" color="#007aff" /> <uni-icons type="arrowright" color="#007aff" size="25" /> </view> </template> 效果图如果想要换图标，只需要将type值改为.

uniapp 使用自定义icon图标

黎小小的博客

05-29

4948

注意如果时vue3需要 slot用在节点中。

uni-app：uni-icons的使用及如何自定义图标

m0_64401231的博客

07-28

7387

f使用custom-prefix和type属性自定义图标。fontClass是图标的前缀，需要传入组件type属性（type属性前缀），fontFamily是图标集名称，需要传入组件custom-prefix属性，字体格式可以只勾选ttf。

simple-line-icons：简单和最小线条图标

02-05

安装通过 npm install simple-line-icons --save 通过 bower install simple-line-icons --save 通过另外，您也可以克隆或为zip。如果您是设计师，则可以在项目中使用此。自定义LESS / SASS变量减： @...

uni-app的图标插件

01-14

导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',...

github-vscode-icons：:package:github的vscode-icons

01-30

如果您查看带有显示的vscode-icons github存储库，则可以通过它们的特定图标获得使用技术的即时概述（请vscode-icons下面的屏幕截图）。转到以查看最新更改屏幕截图发展历程为了保持vscode-icons ，您需要在...

delivery-app-mobile::pizza:React Native 送餐应用

07-23

使用 React Native 构建的外卖应用连接项目网站： : 返回： : 设置 yarn 要么 npm i 链接您需要链接一些库以使其正常工作 react-native link react-native-gesture-handler react-native link react-native-...

uniapp uni-icons组件自定义图标

weixin_48393490的博客

03-29

688

2、去阿里图标下载自己需要的svg格式的图标。1、找到自己的uni-icons组件位置。这样就完成了，可以取试用一下了。

uni-app值使用icon图标组件的教学指南

码奴一只猿

06-08

8502

UniApp是一个跨平台的开发框架，允许开发者使用一套代码同时构建多个平台的应用程序。其中，Icon组件是UniApp提供的一个非常实用的组件，用于显示各种图标。本篇文章将详细介绍如何在UniApp中使用Icon组件，并提供详细的示例代码。

uni ui 、color ui 图标icon的使用

m0_65392968的博客

09-21

3473

uni ui中使用icon

uniapp开发使用uni-icons添加自定义图标

x13459484764的博客

08-03

3987

uniapp开发中，使用uni-icons组件，添加自定义图标（用图标的方式是为了防止图标在大小设置时模糊，以及方便更改图标颜色）

npm安装uni-icons

08-23

通过npm安装uni-icons可以按照以下步骤进行操作： 1. 首先，进入你的项目目录，可以使用命令行或终端进入该目录。 2. 接下来，在命令行或终端中执行以下命令：npm install uni-icons 3. 这将会通过npm安装uni-icons组件到你的项目中。 4. 安装完成后，你可以在你的代码中引用该组件。比如，在你的脚本中使用import语句引入uni-icons组件：import { uniIcon } from 'uni-icons' 5. 接着，在template中使用该组件，例如：<uni-icon name="example"></uni-icon> 6. 通过以上步骤，你就成功地使用npm安装了uni-icons组件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [npm-cli-login](https://download.csdn.net/download/weixin_42133861/18323682)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [uni-app使用npm命令安装组件](https://blog.csdn.net/u010855711/article/details/125078942)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [uniapp 单独安装 select-data 选择框，提示报错： Unknown custom element: ＜uni-icons＞](https://blog.csdn.net/weixin_44805839/article/details/128581572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交