当前位置: 首页 > article >正文

unipp中使用阿里图标,以及闭坑指南

在这里插入图片描述-----------------------------------------------------点赞收藏才是更新的动力-------------------------------------------------

unipp中使用阿里图标

  • 官网下载图标
  • 在项目中引入
  • 使用
  • 注意事项

官网下载图标

进入阿里图标网站

  1. 将需要下载的图标添加到购物车中

在这里插入图片描述
2. 直接下载代码进行解压

在项目中引入

1.在项目根目录新建文件夹如下
在这里插入图片描述
2.在app.vue中引入(注意引入路径)

@import  url('./static/font/iconfont.css'); 

使用

  1. 通常弄成组件的形式使用,更灵活

  2. 新建组件在项目根目录的components下面简历如下组件u-icons/u-icons.vue
    3. 在这里插入图片描述

  3. u-icons.vue

<template>
	<view style="display: inline-block;">
		<text :class="[delcss, type]" :style="dynamicStyles"></text>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				default: '30'
			},
			color: {
				type: String,
				default: '#999'
			}
		},
		data() {
			return {
				delcss: 'iconfont', //这里必须是这个值
				dynamicStyles: {
					"font-size": this.size + 'px',
					"color": this.color
				}
			}
		}
	}
</script>

4.在页面中直接使用,比如index.vue中 (同名字的组件是不需要引入注册的,直接使用type就是
在这里插入图片描述

<u-icons  size="50" type="icon-gongzuojingyan" color="red" />

注意事项

建议直接在阿里图标下新建一个项目,以后每次要的图标添加进去项目中
这个文件这里有的下载下来的引入是bsae64的,一大串,

这里需要改成绝对路径,不然在h5上正常,在小程序就显示不出来

在这里插入图片描述


http://www.kler.cn/a/449885.html

相关文章:

  • 链路聚合与GVRP的混合构建(eNSP)
  • 【目标跟踪综述及关键技术】
  • R语言数据分析案例46-不同区域教育情况回归分析和探索
  • AI可信论坛亮点:合合信息分享视觉内容安全技术前沿
  • leetcode hot100除自身以外的数组的乘积
  • 软件设计与体系结构
  • 端口状态检查工具portchecker.io
  • 【OceanBase 诊断调优】—— packet fly cost too much time 的根因分析
  • STM32——“SPI Flash”
  • CentOS-stream-9安装ansible
  • 【stable diffusion】ComfyUI 使用 LoRA 极简工作流
  • 重温设计模式--工厂模式(简单、工厂、抽象)
  • Spring Boot 动态定时任务管理系统(轻量级实现)
  • IDEA自己常用的几个快捷方式(自己的习惯)
  • Nginx三种安装方式
  • 【Threejs】从零开始(十一)--3D交互事件
  • Ubuntu20.04 修改root密码
  • 小程序将对象通过url传递到下个页面
  • LeetCode每日三题(一)哈希
  • R语言基础| 功效分析
  • Effective C++ 条款 02:尽量以 const,enum,inline 替换 #define
  • 递归查询全量分页数据问题
  • C++---------随机库,standfor库
  • 16×16LED点阵字符滚动显示-基于译码器与移位寄存器(设计报告+仿真+单片机源程序)
  • IMX6ULL开发板如何关掉自带的QT的GUI界面和poky的界面的方法
  • [spring]处理器