在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插件市场 中发布,欢迎前来本人的 开发者空间 查看。