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

布满荆棘的人生 2023-01-13 14:57 622阅读 0赞

> uView已通过大量的实践中，收集了用户最有可能需要用到的图标，但我们也相信，它肯定无法覆盖所有的场景和需求。
> 
> 用户也可以使用标签的方式，自行引入字体图标，为何要通过扩展的方式集成呢？
> 
> 这是因为uView有统一的字体图标组件，使用方便，配置灵活，且风格统一。

# 一、下载图标文件 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

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

### 1）打开Transfonter网站（[https://transfonter.org][https_transfonter.org]） ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 2][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 4][]

## 效果示例 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 5][]

# 四、页面使用 #

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

## 效果图 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 6][]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。

[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20221022/b4a676ba37ca4a6199c679614dd1710d.png
[https_transfonter.org]: https://transfonter.org
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 1]: /images/20221022/750b715beb294639bd7958afaad15c12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 2]: /images/20221022/c5ec410fce4d42c2b1b9a2ccf36c813b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 3]: /images/20221022/2524d3820cf9477b9746a473b72ccd77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 4]: /images/20221022/3b0e11e93cc34ecd82e1fcdb7ce8af8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 5]: /images/20221022/07ebd2fd8df2418f9fb43c2d2578a44d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 6]: /images/20221022/cd595e0feda34940800084bfc8d9d9c4.png
[Link 1]: https://blog.csdn.net/u013350495