uniapp如何新加icon-uni-app-PHP中文网

uniapp如何新加icon

PHPz

发布： 2023-04-20 09:08:17

原创

2222人浏览过

随着移动应用的不断发展趋势，移动应用界面设计中的图标设计也变得越来越重要。在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 的地方，加入以下代码：