uniapp如何新加icon

百变鹏仔 4周前 (11-20) #uniapp

文章标签 uniapp

随着移动应用的不断发展趋势，移动应用界面设计中的图标设计也变得越来越重要。在uniapp中，我们可以通过一些简单的方法来添加图标，进一步美化应用。本文将介绍uniapp中如何新加icon。

一、导入iconfont图标库

我们可以通过导入iconfont图标库来快速添加图标。以下是具体步骤：

1.在iconfont官网搜索并选择符合需求的图标；

2.添加选中的图标，并生成适合uniapp使用的文件；

3.将生成的文件夹复制到uniapp项目的static目录下。

二、使用第三方图标库

还可以通过使用第三方图标库来快速添加图标，其中最为知名的是Font Awesome，该图标库提供超过3700多个图标。

以下是具体步骤：

1.前往Font Awesome官网，注册账号；

2.选择符合需求的图标，并点击复制类名；

3.在uniapp项目的pages.json文件中，添加以下代码：

{
"navigationBarTitleText": "页面标题",
"usingComponents": {

"icon": "/static/fontawesome/uniFA.vue"

},
}

其中，"uniFA.vue"是Font Awesome提供的uniapp的自定义组件。

三、使用 iu-icon

iu-icon是uni-app提供的一个自定义组件。以下是具体步骤：

1.打开uni-app应用目录，找到 components 文件夹；

2.新建一个 iu-icon 文件夹，并加入一个 vue 文件，命名为 iu-icon.vue；

3.在 iu-icon.vue 文件中添加以下代码：

<template>    <view class="iu-icon iu-icon-{{type}}" :style="{'font-size':size+'px',color:color}">        <text class="fa fa-{{name}}"></text>    </view></template><script>export default {  props: {    name: { // icon 名称      type: String,      value: ''    },    size: { // icon 大小      type: Number,      value: 14    },    color: { // icon 颜色      type: String,      value: '#666666'    },    type: {       type: String,      value: 'fa' // icon 的类型，比如 font-awesome，material，iconfont等    }  }}</script><style scoped>.iu-icon {  display: flex;  justify-content: center;  align-items: center;}</style>

4.在需要使用该 icon 的地方，加入以下代码：

<iu-icon name="图标名称"></iu-icon>

文章推荐

uniapp如何新加icon

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项