解决uni-app无法使用icon-font彩色图标(Symbol方式)

WeirdoPrincess

已于 2023-07-29 09:08:27 修改

阅读量1.8k

点赞数 1

分类专栏： uni-app

于 2022-07-08 14:41:28 首次发布

本文链接：https://blog.csdn.net/FantasyWeirdo/article/details/125677571

版权

Iconfont 微信小程序图标库引入组件化

关键词由CSDN通过智能技术生成

uni-app 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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>