在uniapp、uni-admin中使用阿里巴巴矢量库自定义字体图标

在uniapp、uni-admin中使用阿里巴巴矢量库自定义字体图标

提示：主要用于基于uni-admin开发的h5管理端，与uni-admin官方源码使用方式相同，便于统一管理。若只是单纯使用阿里巴巴矢量库图标，也可根据常规方式，本方法非唯一，只是对接了uni-admin相同的处理方式。

---

---

前言

官方文档：
uni-admin icon 图标
uni-icons 图标
官方文档不懂的话，直接看下面我们根据官方uni-admin源码中对自定义图标的引入步骤与写法

---

一、阿里巴巴矢量库创建项目

创建图标库项目

创建图标库项目时，建议先决定好前缀，这里只勾选ttf。

如何引入和调整图标就不赘述了，准备好图标后选择下载。

下载完成后打开压缩包

这里我们只需要这两个文件，复制至项目中去。

文件放在项目哪儿由开发者决定，后续正确写好路径就行了

二、文件内容修改与引入

1.iconfont.css修改

原文件大概是这样

@font-face {
    
    
  font-family: "sv-icons"; /* Project id 4330138 */
  src: url('iconfont.ttf?t=1699972420396') format('truetype');
}

.sv-icons {
    
    
  font-family: "sv-icons" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sv-icons-uniapp:before {
    
    
  content: "\e642";
}

大改一番成这样

@font-face {
    
    
  font-family: sv-icons;
  src: url('~@/common/font/iconfont.ttf') format('truetype');  // 这里ttf文件的路径确保正确
  font-weight: 400;
  font-display: "auto";
  font-style: normal
}

[class*="sv-icons-"],
[class^=sv-icons-] {
    
    
	font-family: sv-icons !important;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: baseline;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.sv-icons-uniapp:before {
    
    
  content: "\e642";
}
// 同理继续追加图标类...

重要：后续添加图标，只需在后面继续追加即可，该iconfont.css不必覆盖，但是iconfont.ttf文件需要覆盖

2.App.vue中引入

<style lang="scss">
/*每个页面公共css */
@import 'common/scss/style.scss';
@import 'common/scss/animations.scss';
@import 'common/scss/layout.scss';
@import 'common/scss/element-plus.scss';
@import 'common/scss/uni-icons.scss';
@import 'common/scss/admin-icons.css';
@import 'common/scss/iconfont.css'; // 引入阿里巴巴矢量库的图标样式
</style>

到这里其实已经可以用了

<view class="sv-icons-uniapp"></view>
// 换颜色或者大小就正常style或者class修改样式就行了
<view class="sv-icons-uniapp" style="color:#66ccff;font-size:20px"></view>

---

三、将图标放入图标列表中

如果想把新增的图标都放入本地内置图标列表中，还需要在uni-icons.js数组中添加图标类名

这里罗列了所有内置图标，最终通过遍历数组中所有的图标类名，渲染出内置图标库

---

结语

图中出现的该项目是本人基于uni-admin魔改了一番，使用element-plus+vue3+unicloud云开发重构的管理端项目，还在持续完善中…后续该项目会在 DCloud插件市场 中发布，欢迎前来本人的 开发者空间 查看。