uView已通过大量的实践中，收集了用户最有可能需要用到的图标，但我们也相信，它肯定无法覆盖所有的场景和需求。

用户也可以使用标签的方式，自行引入字体图标，为何要通过扩展的方式集成呢？

这是因为uView有统一的字体图标组件，使用方便，配置灵活，且风格统一。

一、下载图标文件

在 iconfont-阿里巴巴矢量图标库（https://www.iconfont.cn）下载图标文件

二、转换 iconfont.ttf 文件为 base64格式

1）打开Transfonter网站（https://transfonter.org）

2）点击 Add fonts 按钮 添加 ttf 文件并设置选项

3）添加完成后点击 Convert 按钮转换并下载文件

三、添加到 uniapp 项目 中的 uni.scss文件（可自行调整要放置的文件）

1）将转换后的 stylesheet.css 文件代码复制到 uni.scss 文件中

2）将 iconfont.css 的文件类名代码复制到 uni.scss 文件中

效果示例

四、页面使用

<!-- 通过 custom-prefix 指定类名为 test-icon -->

<u-button>
  <text style="padding-right: 4px;">自定义扩展图标</text>
  <u-icon color="#f00" name="msg" custom-prefix="test-icon"></u-icon>
</u-button>

效果图

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。