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

刺骨的言语ヽ痛彻心扉 2024-03-23 23:01 45阅读 0赞

#### 一、官方文档找到uni-icons ####

[uni-app官网][uni-app]

![decd86f51b794e2f97c2048f4d209880.png][]

#### 二、下载插件 ####

![087324bc1d564a7291bbc71da449de3c.png][]

#### 三、点击“打开HBuildX” ####

![70d824d055c94d4e8f4d8e3d90594c5a.png][]

#### 四、选择要安装的项目 ####

![5c1e23d92592487fb71cde589489960d.png][]

#### 五、勾选要安装的插件 ####

![a8a8429a59f54aa9a3eee29caa618f3a.png][]

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

根目录uni\_modules目录下增加uni-icons、uni-scss

![f7748d8fa66d4ba390097b433f7f8c86.png][]

#### 七、引入组件，使用组件 ####

<uni-icons type="phone-filled" size="26"></uni-icons>
    
    
    import uniIcons from '../../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
    
    
    components: {
            uniIcons
    },

#### 八、经过测试，成功。 ####

![a72386fe27ab4ed98f23d2741ad96967.png][]

#### 参考链接 ####

[http://lihuaxi.xjx100.cn/news/1221122.html?action=onClick][http_lihuaxi.xjx100.cn_news_1221122.html_action_onClick]

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

[uni-app]: https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#%E4%BB%8B%E7%BB%8D
[decd86f51b794e2f97c2048f4d209880.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6711fbbc34064a5c8b87980925be7306.png
[087324bc1d564a7291bbc71da449de3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/70204d11b62f4afb92a73f13b57dacf8.png
[70d824d055c94d4e8f4d8e3d90594c5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/49b46e1b3825475eb03e1cd93f3cffe1.png
[5c1e23d92592487fb71cde589489960d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/276788e28bfc45b79f8cbc477b56cb6b.png
[a8a8429a59f54aa9a3eee29caa618f3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3625aca5a5734b0d916f75e48063307c.png
[f7748d8fa66d4ba390097b433f7f8c86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/02e8af7f5d174961b37ce23b7aaa31e5.png
[a72386fe27ab4ed98f23d2741ad96967.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c76265292f7d415eb59f2bc1ed88a3e2.png
[http_lihuaxi.xjx100.cn_news_1221122.html_action_onClick]: http://lihuaxi.xjx100.cn/news/1221122.html?action=onClick
[uniapp uni-icons _ _ - overfit.cn]: https://avoid.overfit.cn/post/966c5283eb444adfb7f8e5d57a62315c