微信小程序中引入并使用自带和外部图标的方法

1. 引入自带图标

微信小程序本身提供了一些常用的图标，例如首页、我的、搜索等。开发者可以直接在wxml文件中使用它们，无需再次引入。具体使用方法如下：

在wxml文件中使用自带图标

<icon type="success" size="23" color="#007aff"></icon>

其中，type属性值代表图标的类型，size属性值代表图标大小，color属性值代表图标颜色。

自带图标类型

微信小程序自带了很多图标类型，包括成功、警告、等待、错误等，具体如下：

<icon type="success"></icon>       成功图标
<icon type="success_no_circle"></icon>   成功图标（无圆圈）
<icon type="info"></icon>          信息图标
<icon type="warn"></icon>          警告图标
<icon type="waiting"></icon>           等待图标
<icon type="cancel"></icon>           取消图标
<icon type="search"></icon>           搜索图标
<icon type="clear"></icon>            清除图标
<icon type="closed"></icon>           关闭图标

2. 引入外部图标

通常情况下，开发者需要使用自定义图标，此时需要引入外部图标。常见的外部图标有svg格式和iconfont格式。其中，svg格式的优点是颜色可控、样式简单，缺点是文件较大，无法配合iconfont进行字体图标优化。

引入svg格式图标

// 引入svg图标
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-bilibili"></use>
</svg>
// 引入css样式
.icon {
  width: 1.2em; height: 1.2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

其中，svg标签内use标签的xlink:href属性可以指定引入的图标路径，引入后可以通过css样式对图标进行控制。

引入iconfont图标

iconfont是一种以字体形式展现图标的技术，具有文件小、颜色可控、兼容性好等优点。引入iconfont图标的具体步骤如下：

（1）首先需要在iconfont官网上找到需要使用的图标，在我的项目中下载对应的字体库文件。

（2）将下载后的字体库文件解压缩，并将其中的iconfont.ttf文件放入小程序项目根目录中。

（3）在小程序中添加一个iconfont.wxss文件，放在app.wxss同级目录下，并在app.wxss中引入该文件。iconfont.wxss文件中的内容为：

@font-face {
  font-family: "iconfont";
  src: url("./iconfont.ttf") format('truetype');
}
.iconfont {
  font-family:"iconfont";
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

（4）在wxml文件中使用iconfont，具体方法如下：

// 引入iconfont图标
<text class="iconfont"></text>

其中，class属性值为iconfont的样式可以由开发者自己定义，style属性值可以根据需要进行调整，而具体的图标可在iconfont官网上进行查询和选择。

总结：本文主要介绍了微信小程序中引入和使用自带和外部图标的方法，详细介绍了自带图标和外部图标的使用方式和注意事项，包括svg格式和iconfont格式，希望对小程序开发者有所帮助。