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. 谈…

go 中的 fmt 占位符

通用占位符 %v 值的默认格式表示 fmt.Printf("%v\n", 100)}//100%v 类似%v&#xff0c;但输出结构体时会添加字段名 o : struct{ name string }{"tim"} fmt.Printf("%v\n", o)}} //{name:tim}%#v 值的 Go 语法表示 o : struct{ name stri…

0110qt

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

RK3568平台 平台总线模型Platform

一.平台总线模型介绍 编写了一个独立的驱动程序&#xff0c;但这样编写出来的驱动程序在重用性和可移植性上是很低的&#xff0c;无论之后要编写一个同类型的驱动还是将该驱动更换一个平台&#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 …

【angular教程240109】06 Angular父子组件以及非父子组件之间通讯

【angular教程240109】06 Angular父子组件以及组件之间通讯 目录&#xff1a; 【angular教程240109】06 Angular父子组件以及组件之间通讯一、子组件获取父组件的数据、执行子组件的方法 父组件给子组件传值-input1子组件 二、子组件通过Output 结合事件驱动实现组件通讯1 子组…

onlyOffice实践-在线协同word、ppt、excel编辑

一、x86 安装docker 18.09.0版本及以上&#xff08;我的版本是18.09.0&#xff09;配置docker阿里源&#xff0c;下载国外的镜像加速&#xff08;参考docker的常规使用总结-CSDN博客&#xff09;docker search 186184848/documentserver选择对应的破解版本下载&#xff08;这个…

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

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

Android 自动滚动的RecyclerView,手动滑动和自动滑动无缝斜街,手动滑动时数据不重复

概要 做一个自动滑动的列表&#xff0c;用于展示聊天记录或者通知栏信息等&#xff0c;还是使用主流的RecyclerView来做。网上有很多案例&#xff0c;但当手动滑动时会一直无限循环&#xff0c;数据重复的出现&#xff0c;如果想要自动滑动时能无限循环&#xff0c;手动滑动时又…

端到端自动驾驶

自动驾驶主要流程&#xff1a;感知->预测->规划 预测是预测周围目标&#xff08;车、行人、动物等&#xff09;的轨迹&#xff0c;规划是规划自车的运动轨迹。 UniAD[CVPR 2023]: 使用transformer架构&#xff0c;统一自动驾驶流程&#xff0c;完成所有检测&#xff0c…

Springboot对接ceph集群以及java利用s3对象网关接口与ceph集群交互

springboot中引入相关依赖 <dependency><groupId>software.amazon.awssdk</groupId><artifactId>regions</artifactId><version>2.22.13</version></dependency><dependency><groupId>software.amazon.awssdk<…

【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;待更新…

monorepo工程开发交互nodejs命令行程序

前言 [MixedCli](https://zhangfisher.github.io/mixed-cli/)为monorepo应用开发命令行程序提供了一套解决方案&#xff0c;提供了更加友好的命令行开发体验。 第1步&#xff1a;创建工程 以一个典型的monorepo为例开始&#xff1a; flexapppackagescli corevuereact示例…

如何给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、计算属性必须要有…