uni-app uView UI 扩展自定义图标

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

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

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

一、下载图标文件

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

uni-app uView UI 扩展自定义图标

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

1)打开Transfonter网站(https://transfonter.org

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

uni-app uView UI 扩展自定义图标

uni-app uView UI 扩展自定义图标

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

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

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

uni-app uView UI 扩展自定义图标

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

uni-app uView UI 扩展自定义图标

效果示例

uni-app uView UI 扩展自定义图标

四、页面使用

<!-- 通过 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>

效果图

uni-app uView UI 扩展自定义图标

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

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

上一篇:uview——uniapp最优秀的UI框架


下一篇:Linux下oracle数据库启动和关闭操作