本文已参与「新人创作礼」活动,一起开启掘金创作之路。
1、进入https://www.iconfont.cn/官网
2、将项目内或者需要的图标下载至本地
3、将下载的文件进行解压
4、在文件内执行命令行:pm install -g iconfont-tools
或cnpm install -g iconfont-tools
进行安装,安装成功之后再执行 iconfont-tools
5、出现如图所示的内容,按图示输入文件名即可
6、打开iconfont文件夹即可看到生成的目标文件 iconfont-weapp
7、打开iconfont-weap文件夹,iconfont-weapp-icon.css (默认生成的文件名字)即可引入使用
引入方式1:main.js中引入iconfont图标文件
import '@/iconfont/iconfont-weapp/iconfont-weapp-icon.css'
引入方式2:App.vue文件中引入iconfont文件
@import '@/iconfont/iconfont-weapp/iconfont-weapp-icon.css';
8、使用
普通使用
<view class="t-icon t-icon-图标名""></view>
<style>
// 调整大小 可以使用宽高也可以fontSize
.t-icon {
width: 10px;
height:10px;
}
</style>
这里仅做参考与笔记,我同时引入了字体图标样式,做了组件分类
<template>
<view
v-if="isFont"
:style="{ color, fontSize: size + 'rpx' }"
:class="'iconfont ' + iconName"
></view>
<view
v-else
:style="{ fontSize: size + 'rpx' }"
:class="'t-icon t-' + iconName"
></view>
</template>
<script setup>
const props = defineProps({
iconName: String,
isFont: Boolean,
color: String,
size: [String, Number],
})
</script>