uni-ui组件库uni-icons不显示

7月前作者：菜鸟娇嗔分类：Toy博客阅读(29) 违法举报

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

问题：

按照官方文档用yarn引用了uni-ui组件库并且在pages.json和vue.config.js中配置了相关的内容后使用uni-icon效果如下：

uni-ui组件库uni-icons不显示,前端

使用uni-icons的地方图标都未显示成功

解决：

1-按照项目名称\node_modules\@dcloudio\uni-ui\lib\uni-icons目录找到uni-icons目录

uni-ui组件库uni-icons不显示,前端

2-将uni-icons目录放到src目录下的components目录下

uni-ui组件库uni-icons不显示,前端

3-在pages.json文件中添加配置项

"easycom": {
   "autoscan": true,
   "custom": {
       "^uni-((?!(shadow-root|icons)).*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" //这里排除了uni-shadow-root，uni-icons
   }
},

运行效果：

uni-icons成功展示

uni-ui组件库uni-icons不显示,前端

文章来源地址https://www.toymoban.com/news/detail-605559.html

到了这里，关于uni-ui组件库uni-icons不显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

分享到：

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

uni-app自定义组件及拓展(uni-ui)组件的使用

UniApp 是一个基于 Vue.js 的跨平台应用框架，可以用来开发同时运行在多个平台（如微信小程序、支付宝小程序、App等）的应用程序。在 UniApp 中，组件的使用与 Vue.js 中的组件使用基本类似，但需要考虑跨平台兼容性。 1. 创建组件文件在 UniApp 项目中创建一个新的组件，通常

2024年04月29日
浏览(32)
小程序-uni-app：hbuildx uni-app 安装 uni-icons 及使用

一、官方文档找到uni-icons uni-app官网二、下载插件三、点击“打开HBuildX” 四、选择要安装的项目五、勾选要安装的插件六、安装后，项目插件目录根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件，使用组件八、经过测试，成功。参考链接 http://lihuaxi.xjx100.cn/new

2024年02月12日
浏览(34)
uni-ui 中 uni-file-picker组件限制用户上传大小超过大小自动去除

uni-ui 中 uni-file-picker组件限制用户上传大小超过大小自动去除找到该组件位置打开uni-file-picker 在props中添加自己想起的名字绑定限制大小找到chooseFileCallback方法插入代码: 其他页面调用即可

2024年01月15日
浏览(37)
uniapp 官方 ui组件库 uni-ui 的uni-data-checkbox 如何实现自定义选中时的边框颜色

官方组件并不支持这一项自定义，所以选择修改组件库，非常简单，傻瓜式修改。首先找到该组件文件，这个就不过多赘述了。贴下图：在props选项中增加一个borderColor变量：找到设置背景的方法中添加两行代码然后是使用：效果：完结！！！

2024年02月08日
浏览(34)
uni-app开发使用uni-ui组件uni-data-checkbox编译微信小程序报错

uniapp开发使用uni-ui控件uni-data-checkbox，编译成微信小程序报错VM50 WAService.js:1 TypeError: Cannot read property \\\'length\\\' of undefined，并且页面无法显示。解决方法： 1、 HBuilder X 编译器下载 sass 或更新 HBuilder X 版本 2、更新uni-ui组件库 3、如果不使用uniCloud就注释uni-data-checkbox.vue文件中的

2024年02月06日
浏览(53)
【uniapp】在微信小程序中修改uni-ui组件样式不生效的解决方案

在使用uniapp框架开发微信小程序时，使用到了uni-ui的uni-table组件。由于需要修改表头的背景色，于是乎在微信开发工具中使用调试工具审查元素获取其class名：尝试直接在页面中修改样式：结果无效。于是尝试使用深度选择器依然无效。然后查询微信平台官方开发文档得知

2024年02月02日
浏览(48)
uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

一、创建项目架构首先使用官方提供的脚手架创建一个项目在这里插入代码片，这里我创建的 vue3 + vite + ts 的项目：（如命令行创建失败，请直接访问 gitee下载模板）二、下载依赖启动三、下载安装包引入uni-ui src/package.json 文件配置easycom模式引入uview-plus main.ts配置 u

2024年02月13日
浏览(40)
【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)
uni-app uni-ui 微信小程序 uni-datetime-picker 时间选择组件设置start和end属性，实现时间选择限制

效果如图，先选择开始日期，完成日期需要在开始日期之后，先选择完成日期，开始日期需要在完成日期之前需要用到uni-datetime-picker官方的三个属性代码如下这样一个能够限制选定范围的组件就ok了！

2024年02月11日
浏览(44)
uniapp之通过vue-cli命令行创建Vue3/Vite版，JavaScript开发，引入uni-ui扩展组件

注意： Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效） HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

2024年02月12日
浏览(41)