uni-app 2.0 自定义图标

在uni-app 2.0中，自定义图标通常涉及将自定义的SVG图标或者图标字体集成到你的应用中。下面我将展示如何通过引入自定义SVG图标和图标字体两种方式来在uni-app中使用自定义图标。

方法一：使用自定义SVG图标

1. 准备SVG图标： 首先，你需要有SVG格式的图标文件。假设你有一个名为my-icon.svg的文件。

2. 在项目中引入SVG： 将SVG文件放置在项目的static目录下。

3. 在组件中使用SVG： 使用<image>标签或者<svg>标签直接引入SVG文件。这里以<image>标签为例：

<template>
  <view>
    <image src="/static/my-icon.svg" style="width: 50px; height: 50px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style scoped>
/* 添加必要的样式 */
</style>

方法二：使用图标字体

1. 准备图标字体： 通常你会有一个包含.ttf、.woff等格式的字体文件，以及一个描述图标对应字符的CSS文件。

2. 在项目中引入字体文件： 将字体文件放置在static目录下，并在pages.json或manifest.json中配置全局样式引用（如果适用）。

3. 在全局样式中引入图标字体CSS： 在App.vue或全局CSS文件中引入图标字体的CSS文件（假设CSS文件名为icons.css，且已放置在static/css目录下）：

<style>
@import url('/static/css/icons.css');
</style>

1. 在组件中使用图标字体： 使用类名来引用图标字体中的图标：

<template>
  <view>
    <text class="icon-home"></text>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style scoped>
.icon-home::before {
  content: "\e900"; /* 这里的\e900是图标字体CSS文件中定义的字符 */
  font-family: 'my-icon-font'; /* 图标字体的font-family */
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: none;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* 你可以根据需要添加更多的样式 */
}
</style>

通过上述两种方法，你可以在uni-app 2.0中轻松集成和使用自定义图标。选择哪种方法取决于你的具体需求和图标的格式。