uniapp在web端怎么使用svg图标呢

  1. 在图标库中添加好项目用到的图标,点击symbol
  2. 点击生成在线链接
    在这里插入图片描述
  3. 点击生成的在线链接,此时会跳转到一个新窗口,是一个js文件
    在这里插入图片描述
  4. 复制这个js文件的内容
    在这里插入图片描述
  5. 然后在uniapp中新建svg.js文件,把从上面复制的代码粘贴到这个svg.js中
    在这里插入图片描述
  6. 在main.js中引入svg.js文件
import Vue from 'vue';
import svg from '@/utils/svg.js';
Vue.use(svg);
  1. 在页面中使用
<svg class="svg-icon"><use xlink:href="#icon-tubiao-zhinengwangguan"></use>
</svg>

其中的 icon-tubiao-zhinengwangguan 就是仓库中对应图标的名称
在这里插入图片描述
9. 设置图标大小

.svg-icon {width: 40px;height: 40px;
}

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/612056.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA基础学习笔记-day16-网络编程

JAVA基础学习笔记-day16-网络编程 1. 网络编程概述1.1 软件架构1.2 网络基础 2. 网络通信要素2.1 如何实现网络中的主机互相通信2.2 通信要素一&#xff1a;IP地址和域名2.2.1 IP地址2.2.2 域名 2.3 通信要素二&#xff1a;端口号2.4 通信要素三&#xff1a;网络通信协议 3. 谈…

0110qt

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示"登录成功"&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&…

Pytorch基础:数据读取与预处理——图像读取与存储

Pytorch基础&#xff1a;数据读取与预处理——图像读取与存储 1.读取图片2. 使用 matplotlib 库显示和保存图像 1.读取图片 图像库 opencv-python、imageio、PIL 等都具有图像读取的功能。 (base) PS C:\Users\阳> conda activate yang (yang) PS C:\Users\阳> python …

脚本编程游戏引擎会遇到哪些问题

在游戏开发中&#xff0c;脚本编程已经成为了一种非常常见的方式&#xff0c;用来实现游戏逻辑和功能。但是脚本编程游戏引擎也可能会面临一些挑战和问题。下面简单的探讨一下都会遇到哪些问题&#xff0c;并且该如果做。 性能问题 脚本语言通常需要运行时解释执行&#xff0…

【Kafka-3.x-教程】-【六】Kafka 外部系统集成 【Flume、Flink、SpringBoot、Spark】

【Kafka-3.x-教程】专栏&#xff1a; 【Kafka-3.x-教程】-【一】Kafka 概述、Kafka 快速入门 【Kafka-3.x-教程】-【二】Kafka-生产者-Producer 【Kafka-3.x-教程】-【三】Kafka-Broker、Kafka-Kraft 【Kafka-3.x-教程】-【四】Kafka-消费者-Consumer 【Kafka-3.x-教程】-【五…

Pycharm 重命名SSH的conda解释器后,提示该解释器不可用

结论 目前已知是BUG&#xff0c;截至投稿日未修复已经提交给youtrack.jetbrains.com&#xff0c;如下图&#xff1a; 解决方法&#xff0c;待更新…

如何给AVR16芯片解锁

AVRM16核心板本身集成了强大的芯片自解锁功能模块&#xff0c;当由于熔丝位设置错误&#xff0c;导致芯片锁死&#xff0c;无法正常使用时候&#xff0c;可以利用畅学AVR16核心板上的解锁功能给芯片解锁。 &#xff08;如果芯片没有锁死&#xff0c;可以跳过此步骤&#xff09…

ffmpeg解码音频planar模式和packed模式

转载&#xff1a;原文地址&#xff1a; FFmpeg连载4-音频解码-阿里云开发者社区ffmpeg连载系列https://developer.aliyun.com/article/1197520 导读 前面我们介绍了使用FFmpeg解码视频&#xff0c;今天我们使用FFmpeg解码音频。我们的目标将mp4中的音频文件解码成PCM数据&…

python 文本内容随机生成器

这段代码是一个用于生成指定长度的随机文本的函数。主要包括两个函数&#xff1a;generate_text()和generate_other_content()。 generate_text(original_text, length)函数接受两个参数&#xff1a;原始文本和生成文本的长度。该函数的作用是根据原始文本生成指定长度的文本。…

Java异常及网络编程

异常续 throws关键字 当一个方法中使用throw抛出一个非RuntimeException的异常时&#xff0c;就要在该方法上使用throws声明这个异常的抛出。此时调用该方法的代码就必须处理这个异常&#xff0c;否则编译不通过。 package exception; ​ /*** 测试异常的抛出*/ public clas…

【普中开发板】基于51单片机的简易密码锁设计( proteus仿真+程序+设计报告+讲解视频)

基于51单片机的简易密码锁设计 1.主要功能&#xff1a;资料下载链接&#xff1a; 实物图&#xff1a;2.仿真3. 程序代码4. 设计报告5. 设计资料内容清单 【普中】基于51单片机的简易密码锁设计 ( proteus仿真程序设计报告讲解视频&#xff09; 仿真图proteus8.16(有低版本) 程…

vue知识-04

计算属性computed 注意&#xff1a; 1、计算属性是基于它们的依赖进行缓存的 2、计算属性只有在它的相关依赖发生改变时才会重新求值 3、计算属性就像Python中的property&#xff0c;可以把方法/函数伪装成属性 4、computed: { ... } 5、计算属性必须要有…

css的一些属性

我们在写项目的时候&#xff0c;会遇到多种多样的样式&#xff0c;大部分都是由css来实现的&#xff0c;css可以让我们的页面更美观&#xff0c;css通常是配合HTML使用&#xff0c;代码较为简单! 下面我就给大家举几个较为常用的一些css属性。 1.CSS中怎样让元素圆角化&#…

【从零开始学习微服务 | 第一篇】什么是微服务

目录 前言&#xff1a; 架构风格&#xff1a; 单体架构&#xff1a; 分布式架构&#xff1a; 微服务&#xff1a; 总结&#xff1a; 前言&#xff1a; 在当今快速发展的软件开发领域&#xff0c;构建大型应用程序已经成为一项巨大的挑战。传统的单体应用架构往往难以满足…

未完成销量任务的智己汽车突发大规模车机故障,竞争压力不小

2024年刚开年&#xff0c;智己汽车便上演了一出“开门黑”。 近日&#xff0c;不少车主在社交平台发帖&#xff0c;反映智己LS6出现大规模车机故障&#xff0c;包括但不限于主驾驶屏幕不显示车速、档位、行驶里程&#xff0c;左右转盲区显示失效&#xff0c;无转向灯、雷达提醒…

ThreadLocal如何使用详解

ThreadLocal概述&#xff1a; ThreadLocal是Java中的一个线程局部变量工具类&#xff0c;它提供了一种在多线程环境下&#xff0c;每个线程都可以独立访问自己的变量副本的机制。ThreadLocal中存储的数据对于每个线程来说都是独立的&#xff0c;互不干扰。 使用场景&#xff1a…

Linux最常用的几个系统管理命令

文章目录 Linux最常用的几个系统管理命令查看网络信息的原初 ifconfig默认无参数使用-s显示短列表配置IP地址修改MTU启动关闭网卡 显示进程状态 ps语法几个实例默认情况显示所有进程查找特定进程信息 任务管理器的 top常规使用显示完整命令设置信息更新次数设置信息更新时间显示…

树莓派非常实用的程序-2 vcgencmd

vcgencmd 工具用于从Raspberry Pi上的VideoCore GPU输出信息。您可以在 https://github.com/raspberrypi/userland/tree/master/host_applications/linux/apps/gencmd[Github].上找到 vcgencmd 实用程序的源代码。要获取支持的所有 vcgencmd 命令的列表&#xff0c;请使用 vcge…

vbs读取数据库值前端FlexGrid前导0出不来的原因

vbs读取数据库值前端FlexGrid前导0出不来的原因 原因 系统设置问题 解决 修改系统默认数值显示&#xff1a; 1&#xff09;控制面板找到“区域”&#xff0c;点击“更改日期、时间和数字模式”&#xff0c;在弹出窗口点击“其他设置” 2&#xff09;在数字一栏中的“显示前…

AirBrush - AI 照片编辑器

​【应用名称】&#xff1a;AirBrush - AI 照片编辑器 ​【适用平台】&#xff1a;#Android ​【软件标签】&#xff1a;#AirBrush ​【应用版本】&#xff1a;6.0.1 ​【应用大小】&#xff1a;270MB ​【软件说明】&#xff1a;谁说我们的照片不能完美&#xff1f;我们相信…