在uView UI中扩展和使用自定义图标

àì夳堔傛蜴生んèń 2022-08-29 00:02 1851阅读 0赞

# uView UI #

[uView UI][] 是 [uni-app][] 生态最优秀的UI框架之一，提供了众多常有组件。  
在一般的项目中，都会涉及一些定制的图标，以美化界面上的展示效果。  
以下记录uView UI扩展和使用自定义图标的步骤；主要有五步操作，按照步骤来，分分钟搞定。

### 1. 准备图标素材 ###

这里使用阿里巴巴矢量图标库[iconfont][]，进行图标的查找和管理。

*  创建一个和项目对应的图标库项目  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]
 *  然后设置项目`FontClass/Symbol 前缀`和`Font Family`的值分别为`custom-icon-`和`custom-icon`。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 1]

### 2. 导入扩展图标 ###

*  下载图标项目，解压后将`iconfont.css`和`iconfont.woff2`复至项目根目录的static文件夹下的iconfont文件夹下。  
    将iconfont.css中的字体文件引用改为以下内容：
    
        @font-face { 
          font-family: "custom-icon"; 
          src: url('./static/iconfont/iconfont.woff2') format('woff2');
        }
    
    ![在这里插入图片描述][80e08e1d962e4ebfba8eb729ad499d6e.png]
 *  在`"App.vue`中，对图标进行全局引用，方便使用。
    
        @import './static/iconfont/iconfont.css';
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 2]

### 3. 使用扩展图标 ###

*  先确定图标的`name`值，如下方式可以查看。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 3]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 4]
 *  在页面上使用带有`custom-prefix="custom-icon`属性的图标组件设置好`name`即可。

<u-icon name="shoushimima" custom-prefix="custom-icon" size="60" color="#888888"></u-icon>

![在这里插入图片描述][a0c4cc418c594f1c80ec05f005dd1fe0.png]

## 注意事项 ##

*  如果微信小程序对项目体积有要求，可以将woff2文件放到服务器上；或使用iconfont官方的在线链接。

[uView UI]: https://www.uviewui.com/
[uni-app]: https://uniapp.dcloud.io/
[iconfont]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]: /images/20220829/e4ce6384a3354c888f35a819b4193cf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/17eb397872bd4a23be5d996bc4644e18.png
[80e08e1d962e4ebfba8eb729ad499d6e.png]: /images/20220829/e87c621a51bc4e27bb7398f4bf566707.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/473bbc4ea5884694b83a8e3bf110a518.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/33687903fe3f4b748fdb17550cf51329.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/be101eeaefb744b689ffdd09cd936f7e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA=,size_16,color_FFFFFF,t_70
[a0c4cc418c594f1c80ec05f005dd1fe0.png]: https://img-blog.csdnimg.cn/a0c4cc418c594f1c80ec05f005dd1fe0.png